How to remove the gutter (spacing) between columns in Bootstrap? - html

How can I remove the 30px gutter between columns? But without setting margin-left:-30px?
<div class='container'>
<div class='row'>
<div class='col-lg-1'></div>
<div class='col-lg-1'></div>
<div class='col-lg-1'></div>
</div>
</div>

Update 2021
Bootstrap 5 the .no-gutters class has been replaced with .g-0. Use it on the .row where you want no spacing between columns.
Bootstrap 5 also has new gutter classes that are specifically designed to adjust the gutter for the entire row. The gutters classes can be used responsively for each breakpoint (ie: gx-sm-4)
use g-0 for no gutters
use g-(1-5) to adjust horizontal & vertical gutters via spacing units
use gy-* to adjust vertical gutters
use gx-* to adjust horizontal gutters
Bootstrap 4 now includes a .no-gutters class that you can just add to the .row.
<div class="row no-gutters">
<div class="col">x</div>
<div class="col">x</div>
<div class="col">x</div>
</div>
Bootstrap 4: http://codeply.com/go/OBW3RK1ErD
Bootstrap 3.4.0+ gutters are created using padding, but they added a .row-no-gutters class. See the documentation for Bootstrap 3.4 and look for 'Remove gutters'.
HTML you can use:
<div class="row row-no-gutters">
<div class="col">x</div>
<div class="col">x</div>
<div class="col">x</div>
</div>
Bootstrap 3+, <= 3.3.9 gutters are created using padding. You also must adjust the negative margin so that spacing around the outer columns is not affected.
.no-gutter {
margin-right: 0;
margin-left: 0;
}
.no-gutter > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
Just add the no-gutter class to the .row.
Demo: http://bootply.com/107458

A better way to remove padding on the columns would be to add a .no-pad class to your .row:
<div class="row no-pad">
...and then add this CSS.
.row.no-pad {
margin-right:0;
margin-left:0;
}
.row.no-pad > [class*='col-'] {
padding-right:0;
padding-left:0;
}
It's a bad idea to look for first- and last-child items as actually the .row is meant to take care of those offsets at the viewport's right and left. With the above method all .col-*s remain identically styled, which is also much simpler when considering responsiveness, especially stacking at mobile sizes (try my demo below md size).
The direct-descendant CSS selector > means that the .no-pad will only be applied to that .row's immediate child .cols, so you can have padding on subsequently nested column structures (or not) if you wish.
Also using the attribute selector [class*='col-'] means that each column needs no extra non-Bootstrap classes added.
Here is a demo: http://www.bootply.com/Ae3xTyAW5D

Instead of applying fixes that are difficult to maintain, I suggest generating your own customized version of Bootstrap from the Customizer where you can set the gutter to size you want (or remove it totally, by setting it to 0).

Bootstrap 3 introduced the .row-no-gutters class in v3.4.0, which works exactly as advertised.
To remove the gutters from a row and its columns, just add this class to the <div>.

Change button link style.
<... class="bth btn-link noMarginPaddingBorder" ...>
.noMarginPaddingBorder{
margin:0 !important;
padding:0 !important;
border: 0 !important;
}

Related

How to remove gaps around div with image?

one take col-md-4, second col-md-8, but the second with a picture is not 100% width, there are gaps on the left and right sides, could anyone please advise how to remove gaps and make image full size ? Thanks. Here is screenshot
.upperDiv{
height: 100px;
width: 100%;
background: red;
margin-top: 20px;
margin-bottom: 20px;
}
.fixed-content {
width: 100%;
height: 100px;
object-fit: cover;
}
<div class="container">
<div class="row upperDiv">
<div class="col-md-4" style="background: #005AA1;">
</div>
<div class="col-md-8">
<img src="assets/libled.jpg" class="fixed-content">
</div>
</div>
</div>
Bootstrap put that padding for you to better align your content, you can remove it by inserting p-0 (padding = 0px) class name as I remember
<div class="container">
<div class="row upperDiv">
<div class="col-md-4 p-0" style="background: #005AA1;">
</div>
<div class="col-md-8 p-0">
<img src="assets/libled.jpg" class="fixed-content">
</div>
</div>
</div>
Looking at your HTML, you are using bootstrap's grid system (hinted by the col-md-X classes). The gap you see in your example is caused by the padding applied to the cells of the grid system to create the gutter.
You have two possibilities:
You put the picture as a background instead, since padding is part of the element, the picture will cover this space too.
You remove the gutter.
1 is pretty self explanatory so I'll go straight to two. You can read about the .no-gutter helper class. It needs to be applied to a row and will effectively remove all gutters for the columns in it. But that means you'll loose the gutter on your left column too. You could also remove the padding with a custom class that sets padding-left:0 !important;padding-right:0 !important; This will effectively remove the gutter for the specified column element.
Whatever the option you choose, remember that cols are not meant to be used directly for the styling. They are here to help you create columns in which to put your visual elements. Although I pointed 3 different approaches to your problem, the only "pure" solution is to use the .no-gutter. Others might have weird visual impacts such as making the gutter effectively only half wide (since the left col participates in half the gutter too) and will not look right if there are other columns near it.

Why isn't my CSS working when I try to target a div tag with the class "row" and an id?

I'm new to bootstrap 4 and am using the class "row" in multiple places. I want to add a margin-left to just one of these div tags with the class row, so I added an id to the div tag.
<div id="menumargin" class="row">
when I use this CSS
.row{
margin-left: -15px !important;
}
it works but affects all instances of row obviously.
However this CSS I write to just target this instance:
#menumargin.row{
margin-left: -15px !important;
}
doesn't work. It's as if the code isn't written at all.
Please advise.
I hope this question makes sense. I'm also new to Stack Overflow.
Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutters on the .row.
The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.
<div class="container">
<div class="row no-gutters">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
I have an article about bootstrap here How to Responsive Design with Bootstrap?

Bootstrap row and column class will cancel each other?

<div>
<div class="row">
<div class="col-xs-12">
Is it true that 'row' and 'col-xs-12' will cancel each other?
If above answer is yes, why I can see we use row and col class in Bootstrap official website (https://v4-alpha.getbootstrap.com/layout/grid/)?
If above answer is yes, Why?
Any reference document I can read about?
Updates: 'Cancel' means they have opposite effect.
In a sense, yes, they cancel each other out, meaning that the padding added by the parent of a .row will be eliminated with the negative margins of .row.
Let's take a look at even one of the examples from the Bootstrap 4 documentation, with some additional CSS:
/* Warning! It is generally a bad idea to style the Bootstrap elements such as .col and .row, but this is done only for the purpose of demo. */
.col {
background-color: lightgray;
border: 1px solid darkgray;
}
.row {
background-color: lightblue;
}
.container {
background-color: lightgreen;
padding-left: 30px !important;
padding-right: 30px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
1 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
</div>
</div>
Let's consider why the effect of cancelling happens: By default, Bootstrap 4 is styling the container and column classes with a padding of 15px on each side (X axis), and the row class with a negative margin of 15px. The effect of negative margins is the opposite of padding, adding to the size of element instead of shrinking it.
Therefore, the effect of having 15px side-spacing from .container, minus 15px from .row, and finally 15px from the columns, will result in a neat way of spacing the elements centrally on the page. This effect cannot be seen in the first example, as the background styling is applied directly to the column. For observing this effect, we can add markup into the columns so that the column spacing can be observed:
/* Warning! It is generally a bad idea to style the Bootstrap elements such as .col and .row, but this is done only for the purpose of demo. */
.col {
background-color: lightgray;
border: 1px solid darkgray;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<div class="bg-info px-2">
<span>Gray color is</span>
</div>
</div>
<div class="col">
<div class="bg-warning px-2">
<span>the actual spacing.</span>
</div>
</div>
</div>
</div>
Without having that spacing on the columns will make the elements inside the columns stick to the edges of the page, which is not generally desirable. By omitting the negative margin on the .row, on the other hand, will potentially result into excessive spacing for the columns, so less content will fit in – this is also why it is very important to have proper markup for the Bootstrap Grid System, as otherwise its use will result in undesirable results.
Useful links for learning more:
Bootstrap 4 Grid System (the one you have even mentioned)
The Definitive Guide to Using Negative Margins (Smashing Magazine)
Padding (CSS-Tricks) – also look into box-sizing rule
So I have no idea in what sense do you mean "cancel" out. The only thing that cancels out is the row negative margin on the sides with the padding of the columns. This allows the spacing between the columns without having it on the outer sides.
To get a sense what the grid system provides there is a nice article about it even though it's a little bit old:
https://webdesign.tutsplus.com/articles/all-about-grid-systems--webdesign-14471
There are many other. Also on bootstrap.
No, it's not true, the col class is used inside a row class.
The row class defines the space that will be used together but the col class defines the spatial arrangement in that row.

Add gutter to bootstrap flexbox grid

I'm trying to add gutters to a Bootstrap 4 site. I'm also using enable-flexbox:true;
I'm trying to achieve a look like http://designmodo.com/bootstrap-4-flexbox/:
There are equal gutters on the bottom of each item, and to the right of each item.
My code is pretty simple:
<div class='row'>
<div class='col-md-6 block'>
</div>
</div>
and
.block {
background: black;
height: 200px;
}
However, this doesn't create gutters. All the blocks are connecting. I realize I can put block as a new div under .col-md-4, but that ruins flexbox responsiveness.
A simple method of changing bootstrap's default gutter size
http://arnique.net/web-design/58/a-quick-guide-to-changing-bootstraps-gutter-width/

How do I accomplish following design using bootstrap 3.2.0?

I need to design something the first one in the picture below, there should not be left or right padding.
What I really want to do is:
Two columns with background color. I've added two columns but bootstrap container and column classes adds padding and margins.
Content inside those columns must be in normal paddings and margins.
There must be no space / gutter between cols.
It must be follow bootstrap's breaking points.
You don't need to change anything in native Bootstrap to achieve this if you have two <div>s in the same <row>. Just move your left and right classes into the same line as col-xs-4 / col-xs-8. Also you shouldn't have a <section> as a parent of your <container>, you should move it be a child of container (though I removed it below, since it seems unecessary).
Example:
<div class="container"> //change this to container-fluid if you want full screen width
<div class="row">
<div class="col-xs-4 left">
</div>
<div class="col-xs-8 right">
</div>
</div>
</div>
JS Fiddle Demo
Create a nopadding class like this one:
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
If you add that class to your column divs there will be no padding on them.