I am trying to create a 2 column grid, with literally a 50% with no margins or padding.
How do I achieve this with Bootstrap 3 I tried this but end up with negative margins at tablet/desktop break points:
HTML
<div class="container">
<div class="row">
<div class="col-sm-6 offset-0">Col 1</div>
<div class="col-sm-6 offset-0">Col 2</div>
</div>
</diV>
CSS
.container {
background: green;
overflow: hidden;
}
.row > * {
background: blue;
color: #fff;
}
.row :first-child {
background: red;
}
.offset-0 {
padding-left: 0;
padding-right: 0;
}
DEMO - http://jsfiddle.net/pjBzY/
This question is related to
css
twitter-bootstrap
twitter-bootstrap-3
I am sure there must be a way of doing this without writing my own CSS, its crazy I have to overwrite the margin and padding, all I wanted was a 2 column grid.
.row-offset-0 {
margin-left: 0;
margin-right: 0;
}
.row-offset-0 > * {
padding-left: 0;
padding-right: 0;
}
Another option would be to create your own special CSS class for whenever you want to apply the "gutterless" columns..
HTML
<div class="container">
<div class="row no-gutter">
<div class="col-6 col-sm-6 col-lg-6">Col 1</div>
<div class="col-6 col-sm-6 col-lg-6">Col 2</div>
</div>
</div>
CSS
.no-gutter [class*="-6"] {
padding-left:0;
}
Demo: http://bootply.com/73960
You'd need to override the negative margins from the .row
in large screens either directly or with a custom class
@media (min-width: 768px){
.row {
margin-right: 0;
margin-left: 0;
}
}
Generalizing on martinedwards and others' ideas, you can glue a bunch of columns together (not just a pair) by adjusting padding of even and odd column children. Adding this definition of a class, .no-gutter
, and placing it on your .row
element
.row.no-gutter > [class*='col-']:nth-child(2n+1) {
padding-right: 0;
}
.row.no-gutter > [class*='col-']:nth-child(2n) {
padding-left: 0;
}
Or in SCSS:
.no-gutter {
> [class*='col-'] {
&:nth-child(2n+1) {
padding-right: 0;
}
&:nth-child(2n) {
padding-left: 0;
}
}
}
Simple you can use bellow class.
.nopadmar {_x000D_
padding: 0 !important;_x000D_
margin: 0 !important;_x000D_
}
_x000D_
<div class="container-fluid">_x000D_
<div class="row">_x000D_
<div class="col-md-6 nopadmar">Your Content<div>_x000D_
<div class="col-md-6 nopadmar">Your Content<div>_x000D_
</div>_x000D_
</div>
_x000D_
Use "clearfix" instead of "row". It does the exact same except it doesn't have a negative margin. Step through the "row" usage and you'll see that's the only difference.
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">
The more powerful (and 100% fluid) Bootstrap 3 grid now comes in 3 sizes. Tiny (for smartphones .col-), Small (for tablets .col-sm-) and Large (for laptops/desktops .col-lg-*). The 3 grid sizes enable you to control grid behavior on different devices (desktop, tablet, smartphone, etc..).
Unlike 2.x, Bootstrap 3 does not provide a fixed (pixel-based) grid. While a fixed-width layout can still be acheived using a simple custom wrapper, there is now only one percentage-based (fluid) grid. The .container and .row classes are now fluid by default, so don't use .row-fluid or .container-fluid anymore in your 3.x markup.
Source: Stackoverflow.com