I'm sure there is a simple solution to this problem. Basically, if I have two columns how can I add a space between them?

e.g. if the html is:

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

The output would simply be two columns right next to each other taking up the whole width of the page. Say the width was set to 1000px then each div would be 500px wide.

If I wanted a 100px space between the two how could I achieve this? Obviously automatically through bootstrap the div sizes would become 450px each to compensate for the space

You can achieve spacing between columns using the col-md-offset-* classes, documented here. The spacing is consistent so that all of your columns line up correctly. To get even spacing and column size I would do the following:

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

In Bootstrap 4 use: offset-2 or offset-md-2

J'étais confronté au même problème; et ce qui suit a bien fonctionné pour moi. J'espère que cela aide quelqu'un à atterrir ici:

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

Cela rendra automatiquement un espace entre les 2 divs.

Je sais que je suis en retard à la fête, mais vous pouvez essayer d'espacer les boîtes avec du rembourrage.

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

Essayez-le

vous pouvez utiliser un clip d'arrière-plan et un modèle de boîte avec une propriété de bordure

.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>

J'ai eu des problèmes similaires avec l'espace entre les colonnes. Le problème racine est que les colonnes du bootstrap 3 et 4 utilisent un remplissage au lieu de la marge. Ainsi, les couleurs d'arrière-plan de deux colonnes adjacentes se touchent.

J'ai trouvé une solution qui correspond à notre problème et fonctionnera très probablement pour la plupart des gens qui tentent d'espacer les colonnes et de maintenir les mêmes largeurs de gouttière que le reste du système de grille.

C'était le résultat final que nous recherchions

Il était problématique d'avoir l'écart avec une ombre portée entre les colonnes. Nous ne voulions pas d'espace supplémentaire entre les colonnes. Nous voulions juste que les gouttières soient "transparentes" pour que la couleur de fond du site apparaisse entre deux colonnes blanches.

c'est le balisage pour les deux colonnes

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

Cette approche nécessite un div interne avec des marges négatives, tout comme le bootstrap de classe "row". Et ce div, nous l'avons appelé "bloc surélevé", doit être le frère direct d'une colonne

De cette façon, vous obtenez toujours un remplissage correct à l'intérieur de vos colonnes. J'ai vu des solutions qui semblent fonctionner en créant de l'espace, mais malheureusement, les colonnes qu'elles créent ont un rembourrage supplémentaire de chaque côté de la ligne, ce qui finit par rendre la ligne plus mince pour laquelle la disposition de la grille a été conçue. Si vous regardez l'image pour obtenir l'apparence souhaitée, cela signifierait que les deux colonnes ensemble seraient plus petites que celle plus grande en haut, ce qui brise la structure naturelle de la grille.

L'inconvénient majeur de cette approche est qu'elle nécessite un balisage supplémentaire enveloppant le contenu de chaque colonne. Pour nous, cela fonctionne car seules des colonnes spécifiques ont besoin d'espace entre elles pour obtenir l'apparence souhaitée.

Cela permettra un espace entre les deux colonnes et, évidemment, si vous voulez changer la largeur par défaut, vous pouvez opter pour des mixins pour modifier la largeur de bootstrap par défaut. Ou, vous pouvez donner la largeur en utilisant le style CSS en ligne.

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

Vous pouvez obtenir un espacement entre les colonnes en utilisant les classes col-xs- *, dans une colonne col-xs- * codée ci-dessous. L'espacement est cohérent afin que toutes vos colonnes s'alignent correctement. Pour obtenir un espacement et une taille de colonne uniformes, je procéderais comme suit:

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

Utilisez la .form-groupclasse de bootstrap . Comme ceci dans votre cas:

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

Selon la documentation de Bootstrap 4 , vous devez donner au parent une marge négative mx-n*et aux enfants un rembourrage positifpx-*

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

À l'intérieur du col-md-?, Créez un autre div et mettez une image dans ce div, que vous pouvez facilement ajouter un rembourrage comme ça.

<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 , fichier custom.scss vous pouvez ajouter le code suivant:

$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
);

par défaut $ grid-gutter-width-base: 30px;

J'ai dû comprendre comment faire cela pour 3 colonnes. Je voulais arrondir les coins des divs et je n'arrivais pas à faire fonctionner l'espacement. J'ai utilisé des marges. Dans mon cas, je pensais que 90% de l'écran serait rempli par les divisions et 10% pour les marges:

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>

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

Pour le redimensionner correctement pour les appareils mobiles, j'ai demandé au CSS de changer la largeur de 30% à width:92.5%;moins@media (max-width:1023px)

Puisque vous utilisez le bootstrap , je suppose que vous voulez rendre la chose réactive . Dans ce cas, vous ne devez pas utiliser de tailles fixes, en «px» par exemple.

Comme solution de contournement à d'autres solutions, je propose de créer les deux colonnes "col-md-5" au lieu de "col-md-6", puis dans l'élément parent "row" qui contient les colonnes, ajoutez la classe "justification-contenu -between ", ce qui place l'espace libre au milieu, comme vous pouvez le vérifier dans le doc bootstrap ici

Cette solution est également valable pour plus de deux colonnes ajustant le "col-md-x" bien sûr

J'espère que ça aide ;)

c'est simple .. vous devez ajouter une bordure solide à droite, à gauche pour col- * et cela devrait fonctionner .. :)

cela ressemble à ceci: 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;
}

Je sais que ce post est un peu daté mais j'ai rencontré ce même problème. Exemple de mon 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>

Afin de créer de l'espace entre les groupes, j'ai outrepassé la marge de -15px du bootstrap dans mon fichier site.css en réduisant la marge négative de 5.

Voici ce que j'ai fait ...

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

J'espère que cela aide quelqu'un d'autre.

J'avais besoin d'une colonne sur mobile et de deux colonnes à partir du portrait de la tablette, avec un espacement égal entre elles au milieu (également sans remplissage ajouté à la grille à l'intérieur des colonnes). Pourrait être réalisé en utilisant les utilitaires d'espacement et en omettant le nombre dans 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>

Que diriez-vous d'ajouter simplement une bordure de la même couleur que l'arrière-plan en utilisant CSS? Je suis nouveau dans ce domaine, alors il y a peut-être une bonne raison de ne pas le faire, mais ça avait l'air bien quand je l'ai essayé.

Pour obtenir une largeur d'espacement particulière entre les colonnes, nous devons configurer paddingdans la disposition standard 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>

Ce sera utile ..

.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 vous souhaitez augmenter ou diminuer la marge dans le côté droit de la boîte, modifiez simplement la propriété margin-right de l'élément de liste.

exemple de sortie

Bordure blanche autour de l'élément enveloppant

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

et premier + dernier enfant sans bordure

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

Par défaut, cela fournit un rembourrage à l'intérieur de la div externe de la manière dont vous semblez avoir besoin. De plus, vous pouvez également modifier le remplissage à l'aide de CSS personnalisé.

Manière simple

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

Bootstrap 4

La documentation dit ( ici ):

Les lignes sont des wrappers pour les colonnes. Chaque colonne a un rembourrage horizontal (appelé une gouttière) pour contrôler l'espace entre eux. Ce remplissage est ensuite compensé sur les lignes avec des marges négatives. De cette façon, tout le contenu de vos colonnes est visuellement aligné sur le côté gauche.

Donc, la bonne réponse est: définissez colle padding-gauche / droite égal à moins la rowmarge gauche / droite de votre. C'est simple.

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

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

Démo: https://codepen.io/frouo/pen/OqGaWN

Bootstrap 4 - Colonnes séparées utilisant des lignes imbriquées.

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

Créez une classe et utilisez:

marge: 1.5em .5em; largeur max: calc (50% - 1em)! important;

Où 1em sur la largeur max est égal à la marge gauche / droite additionnée.

C'est aussi une façon de le faire et ses œuvres. Veuillez vérifier l'url suivante 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>

Utiliser la marge gauche est la voie à suivre:

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

fonctionne parfaitement

Avec la dernière version de bootstrap, vous pouvez utiliser des "cartes"