Bootstrap: add margin/padding space between columns

Simply add a div within col-md-6 that has the extra padding that you need. The col-md-6 is the 'backbone' to keep the column integrity, but you can add additional padding within it.

<div class="row">
<div class="text-center col-md-6">
<div class="classWithPad">Widget 1</div>
</div>
<div class="text-center col-md-6">
<div class="classWithPad">Widget 2</div>
</div>
</div>

CSS

.classWithPad { margin:10px; padding:10px; }

For the more curious, I have also found that adding

border: 5px solid white

or any other variant of your liking, to make it blend in, works superbly.

Try This:

 <div class="row">
<div class="text-center col-md-6">
<div class="col-md-12">
Widget 1
</div>
</div>
<div class="text-center col-md-6">
<div class="col-md-12">
Widget 2
</div>
</div>
</div>

I was facing the same issue; and the following worked well for me. Hope this helps someone landing here:

<div class="row">
<div class="col-md-6">
<div class="col-md-12">
Set room heater temperature
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
Set room heater temperature
</div>
</div>
</div>

This will automatically render some space between the 2 divs.

I would keep an extra column in the middle for larger displays and reset to default when the columns collapse on smaller displays. Something like this:

    <div class="row">
<div class="text-center col-md-5 col-sm-6">
Widget 1
</div>
<div class="col-md-2">
<!-- Gap between columns -->
</div>
<div class="text-center col-md-5 col-sm-6">
Widget 2
</div>
</div>

Super easy with flexbox. Leave room for some space by changing the columns to col-md-5

<div class="row widgets">
<div class="text-center col-md-5">
Widget 1
</div>
<div class="text-center col-md-5">
Widget 2
</div>
</div>

CSS

.widgets {
display: flex;
justify-content: space-around;
}

In the otherside if you like to remove double padding between columns just add class "nogap" inside row

<div class="row nogap">
<div class="text-center col-md-6">Widget 1</div>
<div class="text-center col-md-6">Widget 2</div>
</div>

and create additional css class for it

.nogap > .col{ padding-left:7.5px; padding-right: 7.5px}
.nogap > .col:first-child{ padding-left: 15px; }
.nogap > .col:last-child{ padding-right: 15px; }

Thats it, check here: https://codepen.io/michal-lukasik/pen/xXvoYJ

Try this:

<div class="row">
<div class="col-md-5">
Set room heater temperature
</div>
<div class="col-md-2"></div>
<div class="col-md-5">
Set room heater temperature
</div>
</div>

Bootstrap 5 (Update 2021)

Bootstrap 5 has still includes spacing utilities for padding. However, because of new RTL support "left" and "right" have been changed to "start" and "end". For example pl-2 is now ps-2.

• pl-* => ps-* (padding-left)
• pr-* => pe-* (padding-right)
• ml-* => ms-* (margin-left)
• mr-* => me-* (margin-right)

Additionally, Bootstrap 5 introduces new grid gutter classes that can be used to adjust the spacing between columns. The guttter is set on the row instead of each col-* inside the row. For example, use g-0 for no spacing between columns.

Bootstrap 5 column spacing demo

Bootstrap 4 (Update 2018)

Bootstrap 4 has spacing utilities that make adding (or substracting) the space (gutter) between columns easier. Extra CSS isn't necessary.

<div class="row">
<div class="text-center col-md-6">
<div class="mr-2">Widget 1</div>
</div>
<div class="text-center col-md-6">
<div class="ml-2">Widget 2</div>
</div>
</div>

You can adjust margins on the column contents using the margin utils such as ml-0 (margin-left:0), mr-0 (margin-right:0), mx-1 (.25rem left & right margins), etc...

Or, you can adjust padding on the columns (col-*) using the padding utils such as pl-0 (padding-left:0), pr-0 (padding-right:0), px-2 (.50rem left & right padding), etc...

Bootstrap 4 Column Spacing Demo

Notes

• Changing the left/right margin(s) on col-* will break the grid.
• Change the left/right margin(s) on the content of col-* works.
• Change the left/right padding on the col-* also works.

For those looking to control the space between a dynamic number of columns, try:

<div class="row no-gutters">
<div class="col">
<div class="inner">
<!-- content here -->
</div>
</div>
<div class="col">
<div class="inner">
<!-- content here -->
</div>
</div>
<!-- etc. -->
</div>

CSS:

.col:not(:last-child) .inner {
margin: 2px; // Or whatever you want your spacing to be
}

Just add 'justify-content-around' class. that would automatically add gap between 2 divs.

Documentation: https://getbootstrap.com/docs/4.1/layout/grid/#horizontal-alignment

Sample:

<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>

You may use the padding and margin shorthand Bootstrap 4 classes as follows:

For extra small devices i.e. xs

{property}{sides}-{size}

For other devices/viewports (small, medium, large and extra large)

{property}{sides}-{breakpoint}-{size}

Where:

property = m for margin and p for padding

Following are sides shorthand meanings:

l = defines the left-margin or left-padding
r = defines the right-margin or right-padding
t = defines the top-margin or top-padding
b = defines the bottom-margin or right-padding
x = For setting left and right padding and margins by the single call
y = For setting top and bottom margins
blank = margin and padding for all sides

The breakpoint = sm, md, lg, and xl.

Combining all the above, the left padding complete code can be (for example):

For left padding in extra small devices

pl-2

or for medium to extra large

pl-md-2

I had the same issue and worked it out by nesting a div inside bootstrap col and adding padding to it. Something like:

<div class="container">
<div class="row">
<div class="col-md-4">
<div class="custom-box">Your content with padding</div>
</div>
<div class="col-md-4">
<div class="custom-box">Your content with padding</div>
</div>
<div class="col-md-4">
<div class="custom-box">Your content with padding</div>
</div>
</div>
</div>

A solution for someone like me when cells got background color

HTML

<div class="row">
<div class="col-6 cssBox">
a<br />ba<br />ba<br />b
</div>
<div class="col-6 cssBox">
a<br />b
</div>
</div>

CSS

.cssBox {
background-color: red;
margin: 0 10px;
flex-basis: calc(50% - 20px);
}

I have just found a solution that works for me, although it doesnt actually create a space between the boxes so may not be exactly what you are looking for.

Doesn't actually create a space but gives the effect of space between cols. Only works if you have a bg-color obviously.