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

por ejemplo, si el html es:

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

El resultado 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 1000pxentonces cada div sería 500pxancho.

Si quisiera un 100pxespacio entre los dos, ¿cómo podría lograr esto? Obviamente, automáticamente a través de bootstrap, los tamaños div se convertirían en 450pxcada uno para compensar el espacio

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

<div class="row">
  <div class="col-md-5"></div>
  <div class="col-md-5 col-md-offset-2"></div>
</div>

En Bootstrap 4 use: offset-2ooffset-md-2

Estaba enfrentando el mismo problema; y lo siguiente funcionó bien para mí. Espero que esto ayude a alguien a aterrizar aquí:

<div class="row">
  <div class="col-md-6">
     <div class="col-md-12">
        Some Content.. 
     </div>
  </div>
  <div class="col-md-6">
     <div class="col-md-12">
        Some Second Content.. 
     </div>
  </div>
</div>

Esto generará automáticamente algo de espacio entre los 2 divs.

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;
}

Pruébalo

puede usar clip de fondo y modelo de caja con propiedad de borde

.box{
  box-model: border-box;
  border: 3px solid transparent;
  background-clip:padding-box;
}

<div class="row">
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
</div>

He tenido problemas similares con el espacio entre columnas. El problema raíz es que las columnas en bootstrap 3 y 4 usan relleno en lugar de margen. Entonces los colores de fondo para dos columnas adyacentes se tocan entre sí.

Encontré una solución que se ajusta a nuestro problema y que probablemente funcionará para la mayoría de las personas que intentan espaciar columnas y mantener el mismo ancho de canal que el resto del sistema de cuadrícula.

Este fue el resultado final al que íbamos

Tener la brecha con una sombra paralela entre columnas fue problemático. No queríamos espacio extra entre columnas. Solo queríamos que las canaletas fueran "transparentes" para que el color de fondo del sitio apareciera entre dos columnas blancas.

este es el marcado para las dos columnas

<div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>

CSS

.raised-block {
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; // for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
    .raised-block {
        margin-left: -0.625rem;
    }
}
.row [class^="col-"]:first-child>.raised-block {
    // this is so the first column has no margin so it will not be "indented"
    margin-left: -0.625rem;
}

Este enfoque requiere un div interno con márgenes negativos al igual que la rutina de arranque de clase "fila". Y este div, lo llamamos "bloque elevado", debe ser el hermano directo de una columna

De esta manera, aún obtienes el relleno adecuado dentro de tus columnas. He visto soluciones que parecen funcionar mediante la creación de espacio, pero desafortunadamente las columnas que crean tienen un relleno adicional a cada lado de la fila, por lo que termina haciendo que la fila sea más delgada para lo que se diseñó la cuadrícula. Si observa la imagen para obtener el aspecto deseado, esto significaría que las dos columnas juntas serían más pequeñas que la más grande en la parte superior, lo que rompe la estructura natural de la cuadrícula.

El principal inconveniente de este enfoque es que requiere un marcado adicional que envuelve el contenido de cada columna. Para nosotros esto funciona porque solo columnas específicas necesitan espacio entre ellas para lograr el aspecto deseado.

Esto permitirá un espacio entre las dos columnas y, obviamente, si desea cambiar el ancho predeterminado, puede elegir mixins para modificar el ancho de arranque predeterminado. O puede dar el ancho usando el estilo CSS en línea.

<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>

Puede lograr el espacio entre columnas utilizando las clases col-xs- *, dentro de un div col-xs- * codificado a continuación. El espaciado es consistente para que todas sus columnas se alineen correctamente. Para obtener un espaciado uniforme y el tamaño de la columna, haría lo siguiente:

<div class="container">
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
</div>

Usa la .form-groupclase de bootstrap . Así en tu caso:

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

De acuerdo con la documentación de Bootstrap 4 , debe darle al padre un margen negativo mx-n*y a los niños un relleno positivopx-*

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row mx-n5">
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
</div>

Dentro de col-md- ?, cree otro div y coloque la imagen en ese div, de modo que pueda agregar fácilmente el relleno de esta manera.

<div class="row">
  <div class="col-md-8">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>
  <div class="col-md-4">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>   
</div>

<style>
  thumbnail{
     padding:4px;
           }
</style>

Bootstrap 4 , archivo custom.scss puede agregar el siguiente código:

$grid-gutter-width-base: 20px;

$grid-gutter-widths: ( xs: $grid-gutter-width-base, 
sm: $grid-gutter-width-base, 
md: $grid-gutter-width-base, 
lg: $grid-gutter-width-base, 
xl: $grid-gutter-width-base
);

por defecto $ grid-gutter-width-base: 30px;

Tuve que descubrir cómo hacer esto para 3 columnas. Quería redondear las esquinas de los divs y no pude conseguir que el espacio funcionara. Usé márgenes. En mi caso, calculé que el 90% de la pantalla se debe completar con los divs y el 10% para los márgenes:

html:

<div class="row">
  <div id="orange" class="col-md-4">
    <h1>Orange Div</h1>
  </div>
  <div id="green" class="col-md-4">
    <h1>Green Div</h1>
  </div>
  <div id="aqua" class="col-md-4">
    <h1>Aqua Div</h1>
  </div>
</div>

y CSS:

#orange {
    background-color:orange;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width:30%;
}
#green {
    background-color:green;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 0 0 0;
    width:30%;
}
#aqua {
    background-color:#39F;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width: 30%;
}

Para cambiar el tamaño correctamente para dispositivos móviles, hice que el CSS cambiara el ancho de 30% a width:92.5%;menos@media (max-width:1023px)

Dado que estás usando bootstrap , supongo que quieres hacer que la cosa responda . En ese caso no deberías usar tamaños fijos, en 'px' por ejemplo.

Como solución alternativa a otras soluciones, propongo hacer ambas columnas "col-md-5" en lugar de "col-md-6", y luego en el elemento padre "fila" que contiene las columnas, agregue la clase "justify-content" -entre ", que coloca el espacio libre en el medio, como puede consultar en el documento de arranque aquí

Esta solución también es válida para más de dos columnas ajustando el "col-md-x" por supuesto

Espero eso ayude ;)

es simple ... tienes que agregar un borde sólido a la derecha, izquierda a col- * y debería funcionar ... :)

se ve así: http://i.stack.imgur.com/CF5ZV.png

HTML:

<div class="row">
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
</div>

CSS:

div#services_block {
   height: 355px;
   background-color: #33363a;
   border-left:3px solid white;
   border-right:3px solid white;
}

Sé que esta publicación está un poco anticuada, pero me encontré con este mismo problema. Ejemplo de mi html.

<div class="row">
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="FirstName" class="control-label"></label>
            <input asp-for="FirstName" class="form-control" />
            <span asp-validation-for="FirstName" class="text-danger"></span>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="LastName" class="control-label"></label>
            <input asp-for="LastName" class="form-control" />
            <span asp-validation-for="LastName" class="text-danger"></span>
        </div>
    </div>            
</div>

Para crear espacio entre los grupos, anulé el margen de bootstrap de -15px en mi archivo site.css al reducir el margen negativo en 5.

Esto es lo que hice ...

.form-group {
    margin-right: -10px;
}

Espero que esto ayude a alguien más.

Necesitaba una columna en el móvil y dos columnas desde el retrato de la tableta hacia arriba, con el mismo espacio entre ellas en el medio (también sin relleno de cuadrícula dentro de las columnas). Podría lograrse utilizando utilidades de espaciado y omitiendo el número en col-md:

    <div class="container-fluid px-0">
        <div class="row no-gutters">
            <div class="col-sm-12 col-md mr-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
            <div class="col-sm-12 col-md ml-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
        </div>
    </div>

¿Qué tal simplemente agregar un borde del mismo color que el fondo usando CSS? Soy nuevo en esto, así que tal vez haya una buena razón para no hacerlo, pero se veía bien cuando lo probé.

Para obtener un ancho particular de espacio entre columnas, tenemos que configurarlo paddingen el diseño estándar de Bootstrap.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

/* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */
@media (min-width: 992px) { 
  .space-100-px > .row > .col-md-6:first-child {
    padding: 0 50px 0 0; /* The first half of 100px */
  }
  .space-100-px > .row > .col-md-6:last-child {
    padding: 0 0 0 50px; /* The second half of 100px */
  }
}

/* The result will be easier to see. */ 
.space-100-px img {
  width: 100%;
  height: auto;
}

<div class="container-fluid space-100-px">
  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Left" alt="Left">
    </div>
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Right" alt="Right">
    </div>
  </div>
</div>

Esto será útil.

.list-item{
  margin-right:-10px;
   margin-top:10px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    padding: 0px;
  }

<div class="col-md-4">
  <div class="list-item">
      <h2>Your name</h2> 
  </div>
</div>
<div class="col-md-4">
   <div class="list-item"></div>
</div>

Si el uso desea aumentar o disminuir un margen adicional en el lado derecho del cuadro, simplemente edite la propiedad margen-derecho del elemento de lista.

salida de muestra

Solo borde blanco alrededor del elemento de envoltura

.padding-pls{
  border-left: 13px solid white;
  border-right: 13px solid white;
}
.row .col-md-6:first-child>.padding-pls {
  border-left: 0px solid white;
}
.row .col-md-6:last-child>.padding-pls {
  border-right: 0px solid white;
}

y primer + último hijo sin borde

    <div class="row">
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
  </div>

    <div class="col-md-12 no_padding header_row"></div>



    <div class="second_row">
        <div class="col-md-4 box_shadow"></div>
        <div class="col-md-8 no_padding_right">
            <div class="col-md-12 box_shadow"></div>
        </div>
    </div>


    body{
    background:#F0F0F0;
}

.main_holder{
    min-height: 600px;
    margin-top: 40px;
    height: 600px;
}
.box_shadow{
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    background: white;
    height: auto;
    min-height: 500px;
}

.no_padding{
    padding: 0px !important;
}

.no_padding_right{
    padding-right: 0px !important;
}

.header_row{
    height: 60px;
    background: #00796B;
    -webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    -moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    box-shadow: 0px 0px 9px 1px rgba(143,140,143,1); 
}

.second_row{
    position: relative;
    width: 100% !important;
    top: 20px;
}

<div class="col-md-6">
    <div class="inner">
        <!-- Put the col-6 elements in the inner div -->
    </div>
</div>

Por defecto, esto proporciona algo de relleno dentro del div externo de la manera que parece necesitar. Además, también puede modificar el relleno utilizando CSS personalizado.

Manera simple

.row div{
  padding-left: 8px;
  padding-right: 8px;
}

Bootstrap 4

La documentación dice ( aquí ):

Las filas son envoltorios para columnas. Cada columna tiene un relleno horizontal (llamado canalón) para controlar el espacio entre ellas. Este relleno se contrarresta en las filas con márgenes negativos. De esta manera, todo el contenido de sus columnas se alinea visualmente hacia abajo en el lado izquierdo.

Entonces, la respuesta correcta es: establecer cols 'padding-left / right igual a menos el rowmargen de su izquierda-derecha / izquierda. Así de simple

#my-row {
  margin-left: -80px;
  margin-right: -80px;
}

#my-col {
  padding-left: 80px;
  padding-right: 80px;
}

Demostración: https://codepen.io/frouo/pen/OqGaWN

Bootstrap 4: columnas separadas utilizando filas anidadas.

<div class="container">
    <div class="row bg-info p-3">

        <!-- left column -->
        <div class="col-8 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>

        <!-- right column -->
        <div class="col-4 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>
    </div>
</div>

Crea una clase y usa:

margen: 1.5em .5em; ancho máximo: calc (50% - 1em)! importante;

Donde 1em en el ancho máximo es igual al margen izquierdo / derecho sumado.

Esta también es una forma de hacerlo y sus trabajos. Por favor, consulte la siguiente url https://jsfiddle.net/sarfarazk/ofgqm0sh/

<div class="container">
 <div class="row">
  <div class="col-md-6">
    <div class="bg-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="col-md-6">
    <div class="bg-warning">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    </div>
  </div>
</div>
</div>

Usar el margen izquierdo es el camino a seguir:

<div style="margin-left:-2px" class="col-md-6"></div>
<div style="margin-left:2px" class="col-md-6"></div>

funciona perfectamente

Con la última versión de bootstrap, puede usar "cartas"