Remove padding from columns in Bootstrap 3

Question

Problem:

Remove padding/margin to the right and left of col-md-* in Bootstrap 3.

HTML code:

<div class="col-md-12">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>

            <div class="widget-content" id="">
                <div id='jqxWidget'>
                    <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                    <div style="clear:both;" id="listBoxB"></div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>

            <div class="widget-content">
                <div id="map_canvas" style="height: 362px;"></div>
            </div>
        </div>
    </div>

</div>

Desired output:

Currently this code adds padding/margin to the right and left of the two columns. I am wondering what it is I am missing in order to remove this extra space on the sides?

Notice:

If I remove "col-md-4" then both columns expand to 100% but I want them to be next to each other.

@Théophile thank you for that. `pl-0 pr-0` didn't work for me on Bootstrap 5. — Lucio Mollinedo, Jul 07 '23 at 01:38

MackieeE · Accepted Answer · 2014-09-14T15:11:00.097

500

You'd normally use .row to wrap two columns, not .col-md-12 - that's a column encasing another column. Afterall, .row doesn't have the extra margins and padding that a col-md-12 would bring and also discounts the space that a column would introduce with negative left & right margins.

<div class="container">
    <div class="row">
        <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

        <div class="col-md-4 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Dimensions</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>

        <div class="col-md-8 nopadding">
            <div class="widget">
                <div class="widget-header">
                    <h3>Results</h3>
                </div>
                <div class="widget-content">
                </div>
            </div>
        </div>
    </div>
</div>

if you really wanted to remove the padding/margins, add a class to filter out the margins/paddings for each child column.

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

edited Sep 14 '14 at 15:11

answered Oct 24 '13 at 10:32

MackieeE

11,751
4
39
56

Is adding .without-padding to the container class even necessary? I'd say adding .nopadding to the .col-md-8 div with the CSS code you provided is sufficient. – Charles Ingalls Oct 24 '13 at 10:49
63

I usually create 3 extra classes in my custom CSS namely, `.padding-0` that sets the left and right padding (only) to 0; `.padding-sm` that sets padding to 2px and `.padding-md` that sets the padding to 5px. The usual padding is 15px (unless customized), so these extra classes are sufficient. – MichaelJTaylor May 16 '14 at 16:00
by the way [.row](https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L1416) moved it's new line – ozanmuyes Sep 14 '14 at 14:23
6

The usual padding is customized in variables.less @grid-gutter-width: 30px; – Vladislav Lezhnev Oct 10 '14 at 10:25
6

is there any predefined bootstrap to remove padding or creating a class is only solution – Gaurav Aggarwal Dec 23 '15 at 06:20
For me adding the class `no-gutter` removed the padding, margin from the cells – Souvik Ghosh Sep 06 '17 at 10:50
Old, but thought I'd at that this also wipes out your offsets it seems. – dmgig Sep 18 '17 at 16:06
1

@GauravAggarwal Yes, as of Bootstrap 3.4.0, there is. See [my answer](https://stackoverflow.com/a/53776151/1128737). – Smi Mar 02 '19 at 20:36

martinedwards · Answer 2 · 2020-10-13T09:18:27.883

224

Bootstrap 4 has added .no-gutters class.

Bootstrap 3.4 has added .row-no-gutters class

Bootstrap 3: I always add this style to my Bootstrap LESS / SASS:

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

Then in the HTML you can write:

<div class="row row-no-padding">

If you want to only target the child columns you can use the child selector (Thanks John Wu).

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

You may also want to remove padding only for certain device sizes (SASS example):

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  .row-sm-no-padding {
    [class*="col-"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

You can remove the max-width part of the media query if you want it to support small devices upwards.

edited Oct 13 '20 at 09:18

answered May 19 '14 at 15:46

martinedwards

5,577
1
33
35

how to add this in SASS? – Harsha M V Jun 25 '14 at 17:16
10

This is plain CSS apart from the nesting (which is also in SASS), so it should work the same. – martinedwards Jul 15 '14 at 08:28
Works perfectly in a responsive environment. – Karl Stulik Nov 13 '15 at 06:41
4

I suggest using direct child selector to improve performance. Use `& >[class*="col-"]` instead. – John Wu Mar 03 '16 at 06:26
That's a nice idea. Then you can be more specific about which rows you don't want padding on, which will stop automatically include all descendants. My solution was just to cover the OP's case where he has columns nested in columns. – martinedwards Mar 07 '16 at 08:51
3

@JohnWu that also prevents nested rows from inheriting the style, which caused me a bit of trouble. thanks! – Troy Carlson Apr 28 '16 at 19:05
2

You really should use `[class^="col-"], [class*=" col-"] {...}` instead so you don't accidentally target classes named `foocol-` for example. This will target elements that have that class name at the *start* or have it as a secondary class as well without targeting where the string is found as part of another class name. – Brett Jun 15 '16 at 13:04
1

Holy smokes! I just spent hours battling with what I thought was an iOS viewport bug because my iPhone 6 would sometimes (but inconsistently) autozoom in on my webpage. After removing the col padding, I think the autozoom works appropriately! Thanks! – Ryan Mar 08 '17 at 03:46
how to add/remove padding only for sm and md screens and not on xs and lg screens ? Please suggest.. – Shiv Mar 20 '17 at 09:40
Hi @Shivam, I've added an example above for removing padding for small devices only in SASS. You can adapt this to different sizes for your needs. – martinedwards Mar 30 '17 at 08:10
Thanks @martinedwards. – Shiv Mar 31 '17 at 07:01

score 46 · Answer 3 · answered Aug 10 '14 at 21:41

46

Reducing just the padding on the columns won't make the trick, as you will extend the width of the page, making it uneven with the rest of your page, say navbar. You need to equally reduce the negative margin on the row. Taking @martinedwards' LESS example:

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

answered Aug 10 '14 at 21:41

phoeb

461
4
2

This is only a problem when your row isn't in a container or another column. The negative margins just offset the padding from those elements – coagmano Nov 10 '15 at 00:59
I needed `!important` for both of the margins to make this work – Philip Bijker Mar 02 '17 at 08:32

score 32 · Answer 4 · edited Apr 07 '21 at 06:13

32

Hereafter only available at Bootstrap 4

<div class="p-0 m-0">
</div>

note: .p-0 and .m-0 already added bootstrap.css

edited Apr 07 '21 at 06:13

crmpicco

16,605
26
134
210

answered Jan 15 '17 at 14:28

Ali Bektash

572
5
15

score 22 · Answer 5 · answered Jul 31 '14 at 06:36

22

Specifically for SASS mixin:

@mixin no-padding($side) {
    @if $side == 'all' {
        .no-padding {
            padding: 0 !important;
        }
    } @else {
        .no-padding-#{$side} {
            padding-#{$side}: 0 !important;
        }
    }
}

@include no-padding("left");
@include no-padding("right");
@include no-padding("top");
@include no-padding("bottom");
@include no-padding("all");

Then in HTML, you can use

.no-padding-left
.no-padding-right
.no-padding-bottom
.no-padding-top
.no-padding - to remove padding from all sides

Sure, you can @include only those declarations, which you need.

answered Jul 31 '14 at 06:36

Vitaliy Silin

231
2
7

Im trying to use this mixin (thanks for that) in this situation and the padding it´s not working. `.banners-home { @include make-row(); .banner-comprar,.banner-pq{ @include no-padding("all"); @include make-xs-column(6); @include make-sm-column(6); @include make-md-column(6); @include make-lg-column(6); } .banner-simulador{ @include no-padding("all"); @include make-xs-column(12); @include make-sm-column(12); @include make-md-column(12); @include make-lg-column(12); } }` – codajoao Mar 18 '15 at 13:36
I figure out what's wrong. I need create another mixin for this solution works. Btw, thanks for the SASS mixin :) – codajoao Mar 18 '15 at 13:49
I just create this `@mixin nopadding{ padding:0!important; }` in my `_mixin.scss` and then add `@include nopadding;` to the code above. :) – codajoao Mar 18 '15 at 14:49

bhargav · Answer 6 · 2019-01-16T12:54:12.457

18

simply Add "no-padding" which is inbuilt class in bootstrap 3

edited Jan 16 '19 at 12:54

answered Aug 19 '16 at 11:57

bhargav

236
2
5

Works for me when adding to a column. This should be used when using nested columns to avoid multiple padding. – NicolasBernier Oct 14 '16 at 14:11
4

Also, one can add `no-gutter` class to the parent `.row`. – ArtBIT Oct 15 '16 at 16:58
3

@ArtBIT I think you need to code `no-gutters` as per https://v4-alpha.getbootstrap.com/layout/grid/#no-gutters. It's not inbuilt. – Caltor Aug 16 '17 at 13:45

score 12 · Answer 7 · answered Apr 05 '18 at 09:10

12

Bootstrap 4 has a native class to do this : add the class .no-gutters to the parent .row

answered Apr 05 '18 at 09:10

Guillaume Gautier

532
4
6

score 10 · Answer 8 · answered Aug 06 '14 at 19:18

Another solution, feasible only if you compile bootstrap from its LESS sources, is to redefine the variable which sets the padding for the columns.

You will find the variable in the variables.less file: it's called @grid-gutter-width.

It's described like this in the sources:

//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;

Set this to 0, compile bootstrap.less, and include the resulting bootstrap.css. You are done. It can be an alternative to defining an additional rule, if you are already using bootstrap sources like I am.

score 9 · Answer 9 · edited Mar 08 '19 at 18:32

9

Bootstrap 4 has the class .no-gutters that you can add to the row element.

<div class="container-fluid">
    <div class="row no-gutters">
        <div class="col-md-12">
            [YOUR CONTENT HERE]
        </div>
    </div>
</div>

Reference: http://getbootstrap.com/docs/4.0/layout/grid/#grid-options

edited Mar 08 '19 at 18:32

Smi

13,850
9
56
64

answered Nov 20 '17 at 02:09

Kelly Baker

109
1
3

score 8 · Answer 10 · answered Dec 14 '18 at 08:43

Bootstrap 3, since version 3.4.0, has an official way of removing the padding: the class row-no-gutters.

Example from the documentation:

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

score 5 · Answer 11 · answered Jun 14 '14 at 18:52

5

[class*="col-"]
  padding: 0
  margin: 0

answered Jun 14 '14 at 18:52

Sharpless512

3,062
5
35
60

score 4 · Answer 12 · edited May 23 '17 at 12:26

None of the above solutions worked perfectly for me. Following this answer I was able to create something that works for me. Here I am also using a media query to limit this to small screens only.

@media (max-width: @screen-sm) {
    [class*="col-"] {
      padding-left: 0;
      padding-right: 0;
    }
    .row {
      margin-left: 0;
      margin-right: 0;
    }
    .container-fluid {
      margin: 0;
      padding: 0;
    }
}

score 4 · Answer 13 · edited Jan 17 '19 at 01:38

4

Remove spacing from b/w columns using bootstrap 3.7.7 or less.

.no-gutter is a custom class that you can add to your row DIVs

.no-gutter > [class*='col-'] {
        padding-right:0;
        padding-left:0;
    }

edited Jan 17 '19 at 01:38

Volomike

23,743
21
113
209

answered Jul 31 '18 at 22:51

Billu

2,733
26
47

This worked and didn't require LESS or SASS. I did notice that I had to add the container class to my row, however, as well as apply this extra styling: `margin:0 auto;`. – Volomike Jan 17 '19 at 01:36
Devs will need to realize with this that once this is done, they need to create a DIV inside the column and apply margin to that in order to create their own gutter sizes. – Volomike Jan 17 '19 at 01:37

score 2 · Answer 14 · answered Jul 08 '15 at 21:56

<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>

<div class="col-md-4">
    <div class="widget row">
        <div class="widget-header">
            <h3>Dimensions</h3>
        </div>

        <div class="widget-content" id="">
            <div id='jqxWidget'>
                <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
                <div style="clear:both;" id="listBoxB"></div>

            </div>
        </div>
    </div>
</div>

<div class="col-md-8">
    <div class="widget row">
        <div class="widget-header">
            <h3>Results</h3>
        </div>

        <div class="widget-content">
            <div id="map_canvas" style="height: 362px;"></div>
        </div>
    </div>
</div>

You can add a class of row to the div inside the col-md-4 and the row's -15px margin will balance out the gutter from the columns. Good explanation here about gutters and rows in Bootstrap 3.

score 2 · Answer 15 · edited Dec 15 '15 at 08:11

2

I guess it's easier to just use

margin:-30px;

to override the original value set by bootstrap.

I've tried

margin: 0px -30px 0px -30px;

and it worked for me.

edited Dec 15 '15 at 08:11

Top Questions

1,862
4
26
38

answered Dec 15 '15 at 07:14

Basheer

21
3

score 2 · Answer 16 · answered Aug 23 '16 at 06:39

Wrap your columns in a .row and add to that div a class called "no-gutter"

<div class="container">
  <div class="row no-gutter">
    <h2>OntoExplorer<span style="color:#b92429">.</span></h2>

    <div class="col-md-4">
        <div class="widget">
            <div class="widget-header">
                <h3>Dimensions</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="widget">
            <div class="widget-header">
                <h3>Results</h3>
            </div>
            <div class="widget-content">
            </div>
        </div>
    </div>
</div>

Then paste below contents to your CSS file

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

haryx8 · Answer 17 · 2016-12-26T14:50:06.240

Remove/customize Bootstrap Gutter with css reference: http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/

/* remove */
.gutter-0.row {
  margin-right: -0px;
  margin-left: -0px;
}
.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] {
  padding-right: 0px;
  padding-left: 0px;
}

/* customize */
.gutter-6.row {
  margin-right: -3px;
  margin-left: -3px;
}
.gutter-6 > [class^="col-"], .gutter-6 > [class^=" col-"] {
  padding-right: 3px;
  padding-left: 3px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row gutter-6">
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-3 col-md-3">
    <div class="thumbnail">
      <img width="100%" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTcxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE3MSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTU5MzRlYTgxN2QgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMHB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNTkzNGVhODE3ZCI+PHJlY3Qgd2lkdGg9IjE3MSIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI2MSIgeT0iOTQuNSI+MTcxeDE4MDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" alt="">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>more</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

score 0 · Answer 18 · edited Oct 24 '13 at 10:27

0

You can create a new class for removing margin and can apply to the element where you want to remove extra margin:

.margL0 { margin-left:0 !important }

!important : it will help you to remove the default margin or overwrite the current margin value

and apply to that div from in which you want to remove the margin from left side

edited Oct 24 '13 at 10:27

Fabio Antunes

22,251
15
81
96

answered Oct 24 '13 at 10:13

Udit Bansal

41
3

score 0 · Answer 19 · answered Nov 30 '15 at 06:47

0

<style>
.col-md-12{
 padding-left:0px !important;
padding-right:0px !important;
}
.col-md-8{
padding-left:0px !important;
padding-right:0px !important;
}
.col-md-4{
padding-left:0px !important;
padding-right:0px !important;
}
</style>

answered Nov 30 '15 at 06:47

Sreelakshmi

31
3

Could you please provide an explanation with your answer. – PKirby Nov 30 '15 at 06:53
provide these codes before or after tag so that this will override those class properties in that page – Sreelakshmi Nov 30 '15 at 06:58

score 0 · Answer 20 · answered Dec 13 '15 at 12:16

0

You can create Less Mixins using bootstrap for manage margins and paddings of your columns like,

http://mohandere.work/less-mixins-for-margin-and-padding-with-bootstrap-3/

Usage:

xs-padding-lr-15px//left right both
xs-padding-l-15px 
xs-padding-r-15px

Similarly for setting margin/padding zero you can use,

xs-padding-lr-0px
xs-padding-l-0px
xs-padding-r-0px

answered Dec 13 '15 at 12:16

Mohan Dere

4,497
1
25
21

It seems that essantial informations are on then linked page. This is not the way of SO. Put essential information in your answer! – jogo Dec 13 '15 at 12:39
Or people could just use the accepted answer with 159 upvotes and no downvotes, that's been here for two years. Or one of the several other answers with over ten upvotes. You'll have to try harder to earn a place on this page against that competition. – Tom Zych Dec 13 '15 at 14:30

score 0 · Answer 21 · edited May 23 '17 at 12:26

Building up on Vitaliy Silin's answer. Covering not only cases where we do not want padding at all, but also cases where we have standard size paddings.

See the live conversion of this code to CSS on sassmeister.com

@mixin padding($side, $size) {
    $padding-size : 0;
    @if $size == 'xs' { $padding-size : 5px; }
    @else if $size == 's' { $padding-size : 10px; }
    @else if $size == 'm' { $padding-size : 15px; }
    @else if $size == 'l' { $padding-size : 20px; }

    @if $side == 'all' {
        .padding--#{$size} {
            padding: $padding-size !important;
        }
    } @else {
        .padding-#{$side}--#{$size} {
            padding-#{$side}: $padding-size !important;
        }
    }
}

$sides-list: all top right bottom left;
$sizes-list: none xs s m l;
@each $current-side in $sides-list {
  @each $current-size in $sizes-list {
    @include padding($current-side,$current-size);
  }
}

This then outputs:

.padding--none {
  padding: 0 !important;
}

.padding--xs {
  padding: 5px !important;
}

.padding--s {
  padding: 10px !important;
}

.padding--m {
  padding: 15px !important;
}

.padding--l {
  padding: 20px !important;
}

.padding-top--none {
  padding-top: 0 !important;
}

.padding-top--xs {
  padding-top: 5px !important;
}

.padding-top--s {
  padding-top: 10px !important;
}

.padding-top--m {
  padding-top: 15px !important;
}

.padding-top--l {
  padding-top: 20px !important;
}

.padding-right--none {
  padding-right: 0 !important;
}

.padding-right--xs {
  padding-right: 5px !important;
}

.padding-right--s {
  padding-right: 10px !important;
}

.padding-right--m {
  padding-right: 15px !important;
}

.padding-right--l {
  padding-right: 20px !important;
}

.padding-bottom--none {
  padding-bottom: 0 !important;
}

.padding-bottom--xs {
  padding-bottom: 5px !important;
}

.padding-bottom--s {
  padding-bottom: 10px !important;
}

.padding-bottom--m {
  padding-bottom: 15px !important;
}

.padding-bottom--l {
  padding-bottom: 20px !important;
}

.padding-left--none {
  padding-left: 0 !important;
}

.padding-left--xs {
  padding-left: 5px !important;
}

.padding-left--s {
  padding-left: 10px !important;
}

.padding-left--m {
  padding-left: 15px !important;
}

.padding-left--l {
  padding-left: 20px !important;
}

score 0 · Answer 22 · answered Jul 26 '16 at 15:24

Sometimes you might lose the padding that you want for the columns. They end up sticking to each other. To prevent that, you could update the class as follows:

<div class="col-md-3 NoPaddingForChildren">
        <div class="col-md-6">
                    <label>Id</label>
                    <input ng-model="ID" class="form-control">
        </div>
        <div class="col-md-6">
                    <label>Value</label>
                    <input ng-model="Val" class="form-control">
        </div>
</div>

and corresponding class:

.NoPaddingForChildren > div:not(:first-child):not(:last-child) {
    padding-left: 0;
    padding-right: 0;
}

.NoPaddingForChildren > div:first-child {
    padding-left: 0;
}

.NoPaddingForChildren > div:last-child {    
    padding-right: 0;
}

score 0 · Answer 23 · answered Dec 26 '16 at 15:03

0

If you download bootstrap with the SASS files you will be able to edit the config file where there are a setting for the margin of the columns and then save it, in that way the SASS calculates the new width of the columns

answered Dec 26 '16 at 15:03

TheCrazyProfessor

919
1
15
31

score 0 · Answer 24 · edited Aug 01 '17 at 12:39

0

You can customize your Bootstrap Grid system and define your custom responsive grid.

change your default values for the following gutter width from @grid-gutter-width = 30px to @grid-gutter-width = 0px

(Gutter width is padding between columns. It gets divided in half for the left and right.)

edited Aug 01 '17 at 12:39

DhruvJoshi

17,041
6
41
60

answered Jul 25 '17 at 13:55

Rafiqul Islam

931
11
14

Eryk Wróbel · Answer 25 · 2020-01-14T10:52:47.150

I still prefer to have control over every padding in every screen size so this css might be usefull to You guys :)

.nopadding-lg {
    padding-left: 0!important;
    padding-right: 0!important;
}
.nopadding-left-lg {padding-left: 0!important;}
.nopadding-right-lg {padding-right: 0!important;}

@media (max-width: 576px) {
    .nopadding-xs {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-xs {padding-left: 0!important;}
    .nopadding-right-xs {padding-right: 0!important;}
}

@media (max-width: 768px) {
    .nopadding-sm {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-sm {padding-left: 0!important;}
    .nopadding-right-sm {padding-right: 0!important;}
}
@media (max-width: 992px) {
    .nopadding-md {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .nopadding-left-md {padding-left: 0!important;}
    .nopadding-right-md {padding-right: 0!important;}
}

score -4 · Answer 26 · answered May 24 '19 at 10:12

-4

you can use fork

https://github.com/srghma/bootstrap-rubygem-without-gutter/commit/8e42c16dcc2f132af3489c2275dd7460b524d437

gem "bootstrap", github: "srghma/bootstrap-rubygem-without-gutter"

answered May 24 '19 at 10:12

srghma

4,770
2
38
54

There must be a way to solve it in a simpler way, yo. – dawn Sep 24 '20 at 00:49

Remove padding from columns in Bootstrap 3

26 Answers26

Linked

Related