Márgenes o espaciado entre columnas

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>

Última actualización