Márgenes o espaciado entre columnas
Last updated
Was this helpful?
Last updated
Was this helpful?
Es posible crear un espaciado entre las columnas o dicho de otra forma, mover o desplazar una columna hacia la derecha, añadiendo un offset inicial mediante las clases: .offset-*. Por ejemplo .offset-4 creará un espacio a la izquierda de la columna de tamaño 4 (como si se creara una columna oculta de tipo .col-4). En el siguiente código podemos ver un ejemplo más completo:
El cual se renderizaría de la forma:
Como se puede ver en el ejemplo anterior, también podemos especificar el offset según el tamaño de pantalla. Si usamos, por ejemplo, la clase "offset-4" estaremos indicando que se cree un espacio de 4 para todos los tamaños de pantalla; mientras que con "offset-md-4" se creará este espacio a partir del tamaño de pantalla "md" en adelante.
Si en algún caso necesitamos eliminar el offset podemos utilizar el tamaño cero (0). Por ejemplo, si especificamos un offset de 2 para tamaños pequeños y no queremos que dicho offset se aplique para pantallas medianas ni grandes tendríamos que hacer:
Además de la clase offset también disponemos de las clases para crear márgenes de espacio variable tanto al lado izquierdo (con ".ml-auto") como al lado derecho (con .mr-auto) de una columna. A continuación se incluye un ejemplo:
Con lo que obtendríamos el siguiente resultado:
Como se puede ver, en la primera fila se crea un marge automático por la izquierda (y para todos los tamaños) de la segunda columna, lo que provoca el desplazamiento de esta hasta alinearla a la derecha. En la segunda fila se añade margen por la izquierda a las dos columnas para tamaños de pantalla de "md" en adelante. Y en la última fila se crea un margen automático por la derecha de la primera columna (para todos los tamaños), esto provoca un efecto similar al obtenido en la primera fila.
