Bootstrap 3
  • Contenidos
  • Introducción
    • Frameworks responsive
    • Funcionamiento del diseño adaptable
    • Probando el responsive
  • Página básica
  • Sistema de Rejilla
    • Forzar el cambio de fila
    • Anidamiento de columnas
    • Márgenes o espaciado entre columnas
    • Ordenación de columnas
  • Utilidades responsive
  • Media Queries
  • Componentes Responsive
    • Botones
    • Desplegables
    • Grupos de botones
    • Formularios
    • Navegación
    • Barra de navegación
    • Tablas
  • Ejercicios 1
  • Ejercicios 2
  • Bibliografía
Con tecnología de GitBook
En esta página

¿Te fue útil?

  1. Sistema de Rejilla

Márgenes o espaciado entre columnas

AnteriorAnidamiento de columnasSiguienteOrdenación de columnas

Última actualización hace 5 años

¿Te fue útil?

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: .col-*-offset-*. Por ejemplo col-md-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-md-4). En el siguiente código podemos ver un ejemplo más completo:

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

El cual se renderizaría de la forma:

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 grandes o medias tendríamos que hacer:

  <div class="col-sm-5 col-sm-offset-2 col-md-7 col-md-offset-0"></div>
Offsetting columns