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;
}
Padding on a Bootstrap 3 col seems impossible to remove
I'm not sure what you want to achieve, but for me, if you make a very little change at page https://koed.dk/da-dk/page/stack like below, then effect is great:
.row.wrapping,
.row.wrapping .row {
margin-left: -5px;
margin-right: -5px;
}
.wrapping [class^=col-] {
padding-left: 5px;
padding-right: 5px;
}
A way to make Bootstrap col-xx no padding between the columns
There should be no problems, but i would not declare the 0 padding on the entire col-X, instead i would create a custom no-padding class, and apply the 0 padding to that class.
<style>
.no-padding{
padding-left: 0px;
padding-right: 0px;
}
</style>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-4 no-padding">a</div>
<div class="col-xs-4 no-padding">b</div>
<div class="col-xs-4 no-padding">c</div>
</div>
</div>
Its a good idea to not modify the style of boostrap core elements, because it might be confusing to other people working on the same code.
Removing padding gutter from grid columns in Bootstrap 4 / Bootstrap 5
Bootstrap5:
Comes with gutter utilities
- all viewports
g-0
..g-5
- responsive viewports
g-sm-0
..g-lg-5
- horizontal/vertical
gy-0
..gx-5
Example with zero-gutter width:
<div class="container">
<div class="row g-0">
<div class="col-6">
<div class="p-3 border bg-light">...</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">...</div>
</div>
</div>
</div>
Bootstrap4:
Comes with .no-gutters
out of the box.
source: https://github.com/twbs/bootstrap/pull/21211/files
Bootstrap3:
Requires custom CSS.
Stylesheet:
.row.no-gutters {
margin-right: 0;
margin-left: 0;
& > [class^="col-"],
& > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
}
Then to use:
<div class="row no-gutters">
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
</div>
It will:
- Remove margin from the row
- Remove padding from all columns directly beneath the row
Remove padding in Bootstrap Col without letting the image enlarge
Well, here's a solution I came up with...
Add the pl-md-0
class to the column for the teaser 2 image. (that removes the left padding for medium screens)
Then put the contents of the first column (that includes the teaser 1 image) into a new row-column pair.
Then add the pl-md-0
class to the inner column for the teaser 1 image.
I believe this is the effect you were going for. (I didn't touch the right paddings because I thought it wasn't necessary but you certainly could remove both the left and right paddings with the px-md-0
class.)
Here's the code:
.bg-box-light { background-color: #eee; /* TBD ! */ }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="container mt-3"> <div class="row">
<!-- Teaser 1 --> <div class="col-12 col-md-4" id="teaser_Umzug"> <div class="row"> <div class="col pl-md-0"> <div class="teaser-img teaser-stick"> <img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Umzug" class="img-fluid z-1 mr-1" />
<div class="teaser-overlay pt-2 pl-4 z-2"> <div class="teaser-txt"> <h2 class="mb-3"></h2> <p class="mb-4"> <span class="bold clearfix">Settelen –</span> ist Ihr Partner<br/>für <a href="#">regionalen</a> und <a href="#">nationalen</a> Umzug. </p> <button type="button" class="teaser">Mehr erfahren</button> </div> </div>
</div> </div>
</div>
</div>
<!-- Teaser 2 --> <div class="col-12 col-md-8" id="teaser_AutoService"> <div class="row">
<!-- Teaser 2 Img --> <div class="col-12 col-md-6 pl-md-0 bg-box-light"> <div class="ml-0 mr-0"><img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Auto und Service" class="img-fluid" /></div> </div>
<!-- Teaser 2 Text --> <div class="col-12 col-md-6 bg-box-light"> <div class="teaser-txt pt-4 pl-4"> <p class="mb-4"> <span class="bold clearfix">XY Company –</span> Ihr starker Partner in Sachen <a href="#">Auto</a> und <a href="#">Service</a>. </p> <button type="button" class="teaser">Services</button> </div> </div>
</div>
</div>
</div></div>
Related Topics
Make Nested Div Stretch to 100% of Remaining Container Div Height
How to Apply a CSS Style on Html5 Datalist Options
Prevent Content from Expanding Grid Items
Why Aren't My Grid-Template-Areas With Ascii Art Not Working
Text in a Flex Container Doesn't Wrap in Ie11
How to Style a Select Tag'S Option Element
Are Eot, Ttf, and Svg Still Necessary in the Font-Face Declaration
Css Transition Effect Makes Image Blurry/Moves Image 1Px, in Chrome
Difference Between a Pseudo-Class and a Pseudo-Element in Css
Laravel - Barryvdh Pdf - How Include External CSS File into HTML View
Show Child Div Within Hidden Parent Div
How Are the Points in CSS Specificity Calculated
Stretch and Scale a CSS Image in the Background - With CSS Only
How to Show Only Corner Borders
Css to Select/Style First Word
Add Bootstrap Glyphicon to Input Box
Column Order Manipulation Using Col-Lg-Push and Col-Lg-Pull in Twitter Bootstrap 3