Remove padding from columns in Bootstrap 3
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;
}
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.