Bootstrap: add margin/padding space between columns

Question

I'm trying to put some extra margin/padding space between columns on my Bootstrap grid layout. I've tried this but I don't like the result. Here is my code:

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

I want to add margin: 10px and padding:10px. Some people suggest to change their classes to col-md-5 with pull-left and pull-right, but the gap between them will be too large.

score 103 · Answer 1 · answered Apr 10 '14 at 13:32

103

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

answered Apr 10 '14 at 13:32

Jon Harding

4,928
13
51
96

1

Great! Nowadays if you use bootstrap > 3, Class "classWithPad" can be just "mb-3", "mt-md-4" etc without extra css – fat_mike Sep 21 '17 at 01:55

Carol Skelly · Accepted Answer · 2021-07-01T13:44:39.100

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.

It's not made clear what `mx` means nor what the `mr-2` is on the div in the `col` div and not a property of the col itself like `
` — Bernd Wechner, Feb 21 '23 at 12:30
@BerndWechner the answer doesn't need to explain x refers to x-axis (horizontal) margins, because the OP didn't specifically ask that. And as far as "*nor what the mr-2 is on the div in the col div and not a property of the col itself*" read the part that says "**Changing the left/right margin(s) on col-* will break the grid**" which is a much broader Bootstrap grid concept that is again not relevant for answering the OP's question. — Carol Skelly, Feb 28 '23 at 13:23

score 21 · Answer 3 · answered May 27 '16 at 13:11

21

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.

answered May 27 '16 at 13:11

krishna kinnera

1,543
12
10

Yea... but it just feels so dirty.... Why not just make your own class as suggested instead of bodging the bootstrap system. – Piotr Kula Mar 01 '17 at 12:42
2

bootstrap documentation suggests that a column should be a direct child of a row. – Elham Kohestani Sep 04 '17 at 08:35
Works fine but in this, there is no way to adjust that gap. – Imran Ahmad Nov 06 '18 at 18:38
3

Honestly prefer this answer since it does not require any custom css. After all, that is why you use frameworks. Thank you – Craig Wayne May 14 '19 at 12:08
2

this isn't a great answer at all. you should NOT nest columns in the grid. – Paidenwaffle Aug 09 '19 at 20:19

score 12 · Answer 4 · answered Nov 16 '18 at 14:54

12

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>

answered Nov 16 '18 at 14:54

Madhukar Hiriadka

269
3
9

1

Awesome. Simple solution. Thanks for sharing – Ranjit Kumar Jul 20 '19 at 14:59
1

This is the answer. Remove the above ones. – JMKelley May 28 '20 at 12:15
Tested with `Bootstrap v5.x` and works great. – Codingwiz Jul 27 '23 at 17:54

karimeh · Answer 5 · 2018-12-20T16:00:11.923

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

score 1 · Answer 6 · answered Apr 06 '16 at 03:38

1

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>

answered Apr 06 '16 at 03:38

omar faruque

19
4

2

How is your answer different from the previous one? By centering content of the column? – Alex Ljamin Jan 27 '17 at 04:45

score 1 · Answer 7 · answered May 29 '16 at 14:58

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>

score 1 · Answer 8 · answered Jul 12 '17 at 21:08

1

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

answered Jul 12 '17 at 21:08

Emmanuel Osimosu

5,625
2
38
39

2

In Bootstrap 4 you can use the built-in class `.justify-content-between` in place of `.widgets` here. – Cᴏʀʏ Mar 20 '18 at 21:43

Chris Haines · Answer 9 · 2018-09-18T16:32:03.397

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
}

score 1 · Answer 10 · answered Jul 26 '19 at 07:45

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

score 0 · Answer 11 · answered Oct 26 '17 at 12:39

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

score 0 · Answer 12 · answered Mar 14 '19 at 07:44

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>

score 0 · Answer 13 · edited Feb 21 '22 at 15:37

0

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.

border border-white

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

Screenshot Border White

edited Feb 21 '22 at 15:37

Suhaib Janjua

3,538
16
59
73

answered Feb 15 '22 at 11:55

mrpeebs

1

score -3 · Answer 14 · edited Nov 27 '17 at 09:08

-3

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>

edited Nov 27 '17 at 09:08

Felix

6,885
1
29
54

answered Nov 27 '17 at 08:48

naha.sunny

1
1

score -14 · Answer 15 · edited May 03 '15 at 13:29

-14

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.

edited May 03 '15 at 13:29

Michael Jaros

4,586
1
22
39

answered May 03 '15 at 13:10

phenomenon

61
8

8

You're adding a white border, not margin. – bodruk May 03 '15 at 13:11
1

I guess you have to truly understand what box model really is. – phenomenon Oct 03 '15 at 04:08

Bootstrap: add margin/padding space between columns

15 Answers15

Linked

Related