¿Cómo puedo añadir espacio entre columnas en Bootstrap?

Estoy seguro de que hay una solución sencilla para este problema. Básicamente, si tengo dos columnas ¿cómo puedo añadir un espacio entre ellas?

Por ejemplo, si el html es:

<div class="col-md-6"></div>
<div class="col-md-6"></div>

La salida sería simplemente dos columnas una al lado de la otra ocupando todo el ancho de la página. Digamos que el ancho se estableció en 1000px entonces cada div sería 500px de ancho.

Si quisiera un espacio de 100px entre las dos, ¿cómo podría conseguirlo? Obviamente, automáticamente a través de bootstrap el tamaño de los divs se convertiría en 450px cada uno para compensar el espacio

TylerH
Pregunta editada 2º noviembre 2018 в 3:20
Programación
css3 html css twitter-bootstrap-3 grid-layout
11º septiembre 2013 в 10:27
75 vistas
Solución

Puedes conseguir el espaciado entre columnas utilizando las clases col-md-offset-*, documentadas aquí. El espaciado es consistente para que todas tus columnas se alineen correctamente. Para conseguir un espaciado uniforme y un tamaño de columna yo haría lo siguiente:

<div class="row">
  <div class="col-md-5"></div>
  <div class="col-md-5 col-md-offset-2"></div>
</div>
WindowsEscapist
Respuesta editada 4º abril 2018 в 8:51
Comentarios (5)

Sé que llego tarde a la fiesta, pero podrías intentar espaciar las cajas con relleno.

<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>

CSS:

.box {
    padding: 0 5px 0 5px;
}
.box .inner {
    background-color: #fff;
}

Inténtalo

Comentarios (1)

Esto permitirá un espacio entre las dos columnas y, obviamente, si quieres cambiar el ancho por defecto puedes ir a por mixins para modificar el ancho por defecto de bootstrap. O bien, puede dar el ancho utilizando el estilo CSS en línea.

<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>
TylerH
Respuesta editada 2º noviembre 2018 в 3:18
Comentarios (1)