Remove spacing between cols

Question

I want to remove the space between multiple columns in the Bootstrap grid.

How can we overwrite Bootstrap's CSS to achieve this task or any other better solution with pure CSS?

main.html

<div class="row">
  <div class="col-md-2">
    // stuff here for this column
  </div>
  <div class="col-md-10">
    // stuff here for columns
  </div>
</div>

Bootstrap 3 introduced `row-no-gutters` in v3.4.0 https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters See also https://stackoverflow.com/questions/21254889/bootstrap-how-to-remove-the-gutter-between-columns (possible duplicate) — dyve, Mar 08 '19 at 13:49

Carol Skelly · Answer 1 · 2021-12-08T12:49:38.550

73

In Bootstrap 5, the no-gutters class has changed to g-0

In Bootstrap 4, the no-gutters class is included. No extra CSS is needed...

<div class="row no-gutters">
  <div class="col-md-2">
    // stuff here for this column
  </div>
  <div class="col-md-10">
    // stuff here for columns
  </div>
</div>

edited Dec 08 '21 at 12:49

answered Feb 24 '18 at 13:36

Carol Skelly

351,302
90
710
624

2

In Bootstrap 5, use ```
``` https://getbootstrap.com/docs/5.0/layout/gutters/#no-gutters
– Benjamin Freitag Nov 08 '21 at 15:29
did this affect the responsive view? @Zim – always-a-learner Dec 08 '21 at 05:59

score 66 · Accepted Answer · answered Oct 26 '16 at 16:04

66

add a class when you need to remove spaces use it

.padding-0{
    padding-right:0;
    padding-left:0;
}

in html write this class

<div class="row">
   <div class="col-md-2 padding-0">
       //stuff here for this column
   </div>
   <div class="col-md-10 padding-0">
       //stuff here for columns
   </div>
</div>

answered Oct 26 '16 at 16:04

Morteza Negahi

3,305
8
24
42

10

but the column will exceed row div – Eng Cy Jul 11 '17 at 11:50
1

Thank you sir. I used `px-0` in Bootstrap v5.0 and the space removed. Your answer helped me a lot. @Morteza – May 16 '21 at 14:56
How can remove the top and bottom space.? – Ramees V P Jun 03 '21 at 14:34

vozaldi · Answer 3 · 2022-01-24T16:41:48.573

38

In the Bootstrap 4 you can add class mx-* and px-*

<div class="row mx-0">
    <div class="col-md-6 px-0">
        <p>Your content</p>
    </div>
    <div class="col-md-6 px-0">
        <p>Your content</p>
    </div>
</div>

The classes of mx-* and px-* is in default bootstrap style, so you don't have to add it manually

mx-* stand for margin-right: * plus margin-left: *. While px-* stands for padding right and left.

There is also my-* m-* mt-* mb-* mr-* ml-* and py-* p-* pt-* pb-* pr-* pl-*.

Edit:

Bootstrap 5 used ps-* pe-* ms-* me-* and dropped pl-* pr-* ml-* mr-*. It uses "start" and "end" instead of "left" and "right".

edited Jan 24 '22 at 16:41

answered Feb 13 '18 at 08:03

vozaldi

1,014
9
18

Where I can find references abut this? – Nemus Aug 25 '19 at 10:07
1

Bootstrap docs under Spacing section https://getbootstrap.com/docs/4.0/utilities/spacing/ – vozaldi Aug 25 '19 at 10:11
1

Most helpful answer. – Nelson Katale Mar 03 '21 at 11:46
Bootstrap 5 has also ```
``` https://getbootstrap.com/docs/5.0/layout/gutters/#no-gutters
– Benjamin Freitag Nov 08 '21 at 15:30

score 13 · Answer 4 · edited May 23 '17 at 11:54

You can create a class no-gutter for your row and remove the margin/padding that's added by bootstrap, like suggested in this post:

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}
.row > div {
  background: lightgrey;
  border: 1px solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutter">
  <div class="col-md-2">
    1
  </div>
  <div class="col-md-10">
    2
  </div>
</div>

I've set a gray background and a border for demonstration purposes. Watch the result in fullscreen to see, that there is no space anymore between the columns. More information about the predefined margin and padding in Bootstrap can be found here.

This solution seems close to answering the question, but I think the author was most concerned about the "internal" space between columns and this removes padding everywhere. I would suggest a modification to your selector to pick columns except the first and last: .row.no-internal-gutter [class*='col-']:not(:first-child):not(:last-child). — Ryan B, Jul 23 '21 at 06:10

score 4 · Answer 5 · answered Mar 14 '22 at 07:58

4

As of BootStrap 5, here is how to remove gutter https://getbootstrap.com/docs/5.0/layout/gutters/

<div class="row g-0">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

answered Mar 14 '22 at 07:58

Mozes Ong

1,204
1
11
20

score 1 · Answer 6 · answered Oct 26 '16 at 16:06

1

I would add a class to the row and target the column children with a descendant wildcard selector:

HTML:

<div class="row nopadding">
    <div class="col-md-2">
        //stuff here for this column
    </div>
    <div class="col-md-10">
        //stuff here for columns
    </div>
</div>

CSS:

.nopadding > div[class^="col-"] {
    padding-right: 0;
    padding-left: 0;
}

answered Oct 26 '16 at 16:06

David Wilkinson

5,060
1
18
32

Still, the columns will go out of the row. Add an additional css : .nopadding{margin-left: 0px;margin-right: 0px;} to keep the columns inside the row. – sudip Mar 06 '18 at 16:33

score 1 · Answer 7 · answered Oct 26 '16 at 16:06

If you are using LESS you can use snippet and apply it to the row.

.no-gutter {
   [class*="col-"] {
       padding-left: 0 !important;
       padding-right: 0 !important;
   }
}

If normal CSS

.no-gutter > [class*="col-"]{
}

Like so:

<div class="row no-gutter">
  <div class="col-md-2">
   //stuff here for this column
  </div>
  <div class="col-md-10">
   //stuff here for columns
  </div>
</div>

score 1 · Answer 8 · edited Feb 08 '17 at 18:25

On the columns there is a 15px padding on either side, if you remove that they should sit together.

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-right: 0px;
    padding-left: 0px;
}

This snippet is from modifed code found in grid-framework.less.

score 1 · Answer 9 · answered Nov 02 '17 at 11:52

1

Simple add .no-gutter on row.

https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works

answered Nov 02 '17 at 11:52

Lütfü Can KAPLAN

11
3

score 0 · Answer 10 · answered Aug 01 '17 at 11:41

The solution by Anshuman actually works! It gets rid of the bootstrap column spaces when you set the padding to zero in the styles, i.e padding: 0;

<div class = "row">
  <div class = "col-sm-3" style= "padding:0;">
    //html code here..
  </div>
  <div class = "col-sm-3" style= "padding:0;">
    //html code here..
  </div>
</div>

score 0 · Answer 11 · answered Oct 04 '22 at 21:45

0

Bootstrap 5 replace no-gutters class has changed to g-0

answered Oct 04 '22 at 21:45

Abd Abughazaleh

4,615
3
44
53

Remove spacing between cols

11 Answers11

Linked

Related