Problem:
Remove padding/margin to the right and left of col-md-* in Bootstrap 3.
HTML code:
OntoExplorer.
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.
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.
OntoExplorer.
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; } 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:
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.
回答3:
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; } }
回答4:
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.
回答5:
simply Add "no-padding" which is inbuilt class in bootstrap
回答6:
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.
回答7:
[class*="col-"] padding: 0 margin: 0
回答8:
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; } }
回答9:
Hereafter only available at Bootstrap4
note: .p-0 and .m-0 already added bootstrap.css
回答10:
OntoExplorer.
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.
回答11:
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.
回答12:
Wrap your columns in a .row and add to that div a class called "no-gutter"
OntoExplorer.
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; }
回答13:
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; }
回答14:
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
回答15:
回答16:
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
回答17:
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; }
回答18:
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:
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; }
回答19:
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
回答20:
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.)
回答21:
Bootstrap has the class .no-gutters that you can add to the row element.
[YOUR CONTENT HERE]
Reference: http://getbootstrap.com/docs/4.0/layout/grid/#grid-options
