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 wi

Answer 1

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>

Answer 2

Simple add .no-gutter on row.

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

Answer 3

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.

Answer 4

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

Answer 5

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.

Answer 6

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>