The default Bootstrap grid system utilizes 12 columns with each span having 30px gutter as below. Gutters are the white space between columns. Gutter width seems to be between 20px - 30px. Let's assume it's 30px here.
I want to remove the gutter space for a specific div, so that there will be no gutter space in the row. Each span will be next to each other with no gutter.
The problem is if I remove the margin 30px (gutter) it leaves 360px (12 * 30px) at the end of the row.
Given that I want to remove gutter space for a specific div only. Let's assume that it's for divs which are in the main_content div.
div#main_content div{
/*
no gutter for the divs in main_content
*/
}
How can I remove the gutter for a specific div without loosing Bootstrap responsiveness and not leaving space at the end of the row?
This question is related to
css
twitter-bootstrap
bootstrap-4
The answer is
Simplest way to remove padding and margin is with simple css.
<div class="header" style="margin:0px;padding:0px;">
.....
.....
.....
</div>
The total width is calculated with the width of the elements plus the width of the margin space. If you want to remove the margin space, that's fine, but to avoid that gap you mentioned, you also need to increase the width of the columns.
In this case, you need to increase the width of a single column by its removed margin space, which would be 30px.
So let's say your columns width is 50PX normally with 30PX margin space. Remove the margin space and make the width 80PX.
Okay If you want to change the gutter inside one row, but want those (first and last) inner divs to align with the grid surrounding the .no-gutter row, you could copy-paste-merge most answers into the following snippet:
.row.no-gutter [class*='col-']:first-child:not(:only-child) {
padding-right: 0;
}
.row.no-gutter [class*='col-']:last-child:not(:only-child) {
padding-left: 0;
}
.row.no-gutter [class*='col-']:not(:first-child):not(:last-child):not(:only-child) {
padding-right: 0;
padding-left: 0;
}
If you like to have a smaller gutter instead of completly none, just change the 0's to what you like... (eg: 5px to get 10px gutter).
Update : link for TWBS 3 getbootstrap.com/customize/#grid-system
Twitter Bootstrap offers a customize form to download all or some components with custom configuration.
You can use this form to download a grid without gutters, and it will be responsive - you only need the grid component and the responsive ones concerning the width.
If you know a little about LESS, then you can include the generated CSS in a selector of your choice.
/* LESS */
.some-thing {
/* The custom grid
...
*/
}
If not, you should add this selector in front of each rule (not that much anyway).
If you know LESS and use the LESS scripts to manage your styles, you might want to use directly the Grid mixins v2 (github)
Since no one has mentioned this, to add to the no-gutter answer above which works, if you want custom spaced gutters, all you have to do is specify the value in px for the margin left and right properties, and padding left and right properties like so;
.row.no-gutter {
margin-left: 4px;
margin-right: 4px;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right: 4px;
padding-left: 4px;
}
Interesting...
Removing the gutter in Twitter Bootstrap's Default grid, that is, 940px wide. And that the default grid has a 940px wide container and has the bootstrap-responsive.css in it's stylesheet.
If I got your question right, this is how I did it...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stackoverflow Question</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/bootstrap-responsive.css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<![endif]-->
<style type="text/css">
#main_content [class*="span"] {
margin-left: 0;
width: 25%;
}
@media (min-width: 768px) and (max-width: 979px) {
#main_content [class*="span"] {
margin-left: 0;
width: 25%;
}
}
@media (max-width: 767px) {
#main_content [class*="span"] {
margin-left: 0;
width: 100%;
}
}
@media (max-width: 480px) {
#main_content [class*="span"] {
margin-left: 0;
width: 100%;
}
}
<!-- For Visual Aid Only -->
.bg1 {
background-color: #C2C2C2;
}
.bg2 {
background-color: #D2D2D2;
}
</style>
<body>
<div id="wrap">
<div class="container">
<div class="row-fluid">
<div class="span1 text-center bg1">01</div>
<div class="span1 text-center bg2">02</div>
<div class="span1 text-center bg1">03</div>
<div class="span1 text-center bg2">04</div>
<div class="span1 text-center bg1">05</div>
<div class="span1 text-center bg2">06</div>
<div class="span1 text-center bg1">07</div>
<div class="span1 text-center bg2">08</div>
<div class="span1 text-center bg1">09</div>
<div class="span1 text-center bg2">10</div>
<div class="span1 text-center bg1">11</div>
<div class="span1 text-center bg2">12</div>
</div>
<div id="main_content">
<div class="row-fluid">
<div class="span3 text-center bg1">1</div>
<div class="span3 text-center bg2">2</div>
<div class="span3 text-center bg1">3</div>
<div class="span3 text-center bg2">4</div>
</div>
</div>
</div><!--/container-->
</div>
</body>
</html>
And the result is..
The 4 div span with no gutter will remain spanned for Small tablet landscape (800x600). Anything size smaller than that will collapse the 4 divs and it will be stacked vertically. Of course you will have to tweak it to fit your needs.
Update 2018
For Bootstrap 3, it's much easier. Bootstrap 3 now uses padding instead of margins to create the "gutter".
.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;
}
Then just add no-gutter to any rows where spacing is to be removed:
<div class="row no-gutter">
<div class="col-lg-1"><div>1</div></div>
<div class="col-lg-1"><div>1</div></div>
<div class="col-lg-1"><div>1</div></div>
</div>
Demo: http://bootply.com/107708
Bootstrap 4 (no extra CSS needed)
Bootstrap 4 includes a no-gutters class that can be applied to the entire row:
http://www.codeply.com/go/pVsGQZVVtG
<div class="row no-gutters">
<div class="col">..</div>
<div class="col">..</div>
<div class="col">..</div>
</div>
There are also new spacing utils that enable control of padding/margins. So this can be used to change the padding (gutter) for a single column (ie: <div class="col-3 pl-0"></div>) sets padding-left:0; on the column, or use px-0 to remove both the left and right padding (x-axis).
Example 4 columns of span3. For other span widths use new width = old width + gutter size. Use media queries to make it responsive.
css:
<style type="text/css">
@media (min-width: 1200px)
{
.nogutter .span3
{
margin-left: 0px; width:300px;
}
}
@media (min-width: 980px) and (max-width: 1199px)
{
.nogutter .span3
{
margin-left: 0px; width:240px;
}
}
@media (min-width: 768px) and (max-width: 979px)
{
.nogutter .span3
{
margin-left: 0px; width:186px;
}
}
</style>
html:
<div class="container">
<div class="row">
<div class="span3" style="background-color:red;">...</div>
<div class="span3" style="background-color:red;">...</div>
<div class="span3" style="background-color:red;">...</div>
<div class="span3" style="background-color:red;">...</div>
</div>
<br>
<div class="row nogutter">
<div class="span3" style="background-color:red;">...</div>
<div class="span3" style="background-color:red;">...</div>
<div class="span3" style="background-color:red;">...</div>
<div class="span3" style="background-color:red;">...</div>
</div>
</div>
update: or split a span12 div in 100/numberofcolumns % width parts floating left:
<div class="row">
<div class="span12">
<div style="background-color:green;width:25%;float:left;">...</div>
<div style="background-color:yellow;width:25%;float:left;">...</div>
<div style="background-color:red;width:25%;float:left;">...</div>
<div style="background-color:blue;width:25%;float:left;">...</div>
</div>
</div>
For both solutions see: http://bootply.com/61557
To add to Skelly's Bootstrap 3 no-gutter answer above (https://stackoverflow.com/a/21282059/662883)
Add the following to prevent gutters on a row containing only one column (useful when using column-wrapping: http://getbootstrap.com/css/#grid-example-wrapping):
.row.no-gutter [class*='col-']:only-child,
.row.no-gutter [class*='col-']:only-child
{
padding-right: 0;
padding-left: 0;
}
Source: Stackoverflow.com