How to add spacing between columns?

I have two columns:

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

How can I add a space between them?

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 automatically with Bootstrap: the divs sizes would become 450px each to compensate for the spacing.

I was facing the same issue; and the following worked well for me.

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

This will automatically render some space between the 2 divs.

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

I know I'm late to the party, but you could try spacing the boxes with padding.

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

Have a go at it

you can use background-clip and box-model with border proprety

.box{
  box-sizing: 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>

I have had similar issues with space between columns. The root problem is that columns in bootstrap 3 and 4 use padding instead of margin. So background colors for two adjacent columns touch each other.

I found a solution that fit our problem and will most likely work for most people trying to space columns and maintain the same gutter widths as the rest of the grid system.

This was the end result we were going for

Having the gap with a drop shadow between columns was problematic. We did not want extra space between columns. We just wanted the gutters to be "transparent" so the background color of the site would appear between two white columns.

this is the markup for the two columns

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

This approach does require an inner div with negative margins just like the "row" class bootstrap uses. And this div, we called it "raised-block", must be the direct sibling of a column

This way you still get proper padding inside your columns. I have seen solutions that appear to work by creating space, but unfortunately the columns they create have extra padding on either side of the row so it ends up making the row thinner that the grid layout was designed for. If you look at the image for the desired look, this would mean the two columns together would be smaller than the one larger one on top which breaks the natural structure of the grid.

The major drawback to this approach is that it requires extra markup wrapping the content of each columns. For us this works because only specific columns needed space between them to achieve the desired look.

According to Bootstrap 4 documentation you should give the parent a negative margin mx-n*, and the children a positive padding px-*

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

This will allow a space between the two columns and obviously if you want to change the default width you can go for mixins to modify the default bootstrap width. Or, you can give the width using the inline CSS style.

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

You can achieve spacing between columns using the col-xs-* classes,within in a col-xs-* div coded below. 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="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>

Since you're using bootstrap, I guess you want to make the thing responsive. In that case you should'n use fixed sizes, in 'px' for example.

As a workaround to other solutions, I propose make both columns "col-md-5" instead of "col-md-6", and then in the parent element "row" that contains the columns, add the class "justify-content-between", which puts the free space in the middle, as you can check in the bootstrap doc [here][1]

This solution is also valid for more than two columns adjusting the "col-md-x" of course

hope it helps ;)

[1]: https://getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment "bootstrap doc"

Inside the col-md-?, create another div and put picture in that div, than you can easily add padding like so.

<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, file custom.scss you can add following code:

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

by default $grid-gutter-width-base: 30px;

Since you are using Bootstrap, the column-gap property will be useful to implement. https://www.w3schools.com/cssref/css3_pr_column-gap.asp"> W3Schools Column-Gap for Bootstrap has documentation on how this can be used.

• CSS:

.col-gap {
  column-gap: 2rem;
}

And for the HTML, have the class (col-gap) in the row div. But also note this may throw off the spacing of the col-md-6 (or other sizes) so to compensate reduce the size for each column. (i.e. col-md-6 -> col-md-5, even if there are only 2 columns)

• HTML:

    //Row
    <div class="row col-gap justify-content-center">
 
    //Col 1
        <div class="col-md-5 ms-3 card p-5">
            <p>Div 1</p>
        </div>

    //Col 2
        <div class="col-md-5 ms-3 card p-5">
            <p>Div 2</p>
        </div>          
    </div>

I had to figure out how to do this for 3 columns. I wanted to round the corners of the divs and couldn't get the spacing to work. I used margins. In my case I figured for 90% of the screen to be filled in by the divs and 10% for margins:

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>

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

To make it resize correctly for mobile devices, I had the CSS change the width from 30% to width:92.5%; under @media (max-width:1023px)

Bootstrap 4 - Separate columns using nested rows.

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

Use bootstrap's .form-group class. Like this in your case:

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

it's simple .. you have to add solid border right, left to col-* and it should be work ..:)

it looks like this : 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;
}

Just white border around wrap element

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

and first+last child no border

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

I know this post is a little dated but I ran in to this same problem. Example of my 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>

In order to create space between the groups I overrode bootstrap's margin of -15px in my site.css file by reducing the negative margin by 5.

Here's what I did...

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

I hope this helps somebody else.

I needed one column on mobile and two columns from tablet portrait up, with equal spacing between them in the middle (also without any grid-added padding inside columns). Could be achieved using spacing utilities and omitting the number in 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>

Bootstrap col slightly uses some spaces both to the left and right. I have just added a block element like div and set the border for the differences. Also, adding some extra padding or margin in that extra div will work perfectly..

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<br><br>

<div class="container">
    <div class="row">
        <div class="col-6 ">
            <div class="border border-danger ">
                <h2 class="text-center">1</h2>
            </div>
        </div>
        <div class="col-6">
            <div class="border border-warning">
                <h2 class="text-center">2</h2>
            </div>
        </div>
    </div>
</div>

I don't think you can do this with Bootstrap alone. The space between columns is automatically added/maintained. If you need to add a specific width between columns you can do this trick to simulate the space: https://jsfiddle.net/loginet/3rogbh9s/5/

<div class="row">
    <div class="col-6">
	    <div class="left-column">Left column</div>
	</div>
    <div class="col-6">
	    <div class="right-column">Right column</div>
    </div>
</div>

and CSS

.left-column {
	padding: 10px;
    padding-right: 50px;
    background: white;
}

.right-column {	
	padding: 10px;
    padding-left: 50px;	
    background: white;	
}

How about just adding a border the same color as the background using css? I'm new to this, so maybe there's a good reason not to, but it looked good when I tried it.

To obtain a particular width of spacing between columns, we have to set up padding in the standard Bootstrap's layout.

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

This will be useful..

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

If use want to increase or decrease further margin in right side of the box then simply edit margin-right property of list-item.

sample output

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

This by default provides some padding inside the outer div the way you seem to need. Moreover you can also modify the padding using custom CSS.

Simple Way

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

Bootstrap 4

Documentation says (here): > Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.

So the right answer is: set cols' padding-left/right equal to minus your row's margin-left/right. That simple.

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

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

Demo: https://codepen.io/frouo/pen/OqGaWN

Create a class and use:

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

Where 1em on the max-width is equal to the left/right margin added together.

<div class="row">

  <div class="col-sm-6">
    <div class="card">
        Content one
    </div>
  </div>

  <div class="col-sm-6">
    <div class="card">
        Content two
    </div>
  </div>

</div>

In Bootstrap v5.0 you can set gap with cssvariable:

.row {
  --bs-gutter-x: 100px; // column-gap
  --bs-gutter-y: 100px;  // row-gap
}

bootstrap 5 provides a more comfortable way to add cols gaps using g-* class

<div class="container">
  <div class="row g-2">
    <div class="col-6">...</div>
    <div class="col-6">...</div>
  </div>
</div>

docs: https://getbootstrap.com/docs/5.0/layout/gutters/

This also one way of doing it and its works. Please check the following 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>

Using margin-left is the way to go:

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

works perfectly

With latest bootstrap version, you can use "cards"