CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kode_12
Kode_12

Reputation: 4798

How can I add gutters between Boostrap's grid columns?

I have seen quiet a few 'duplicates' to this question. The two most common answers are

  1. Creating a css class with margin/padding rules
  2. Add an additional nested column for each div (this is not recommended as bootstrap suggests columns should be a direct nest from the "row" class).

Here is my simple HTML tree structure:

      <div class="row">
        <div class="col-md-2">
        </div>
        <div class="col-md-4">
            <input type="text"/>
        </div>
        <div class="col-md-2">
            <input type="text"/>
        </div>
        <div class="col-md-4">
            <input type="text"/>
        </div>
       </div>

This results in the following layout: enter image description here

Question How can I have consistent spacing/gutters between each column of the bootstrap grid system?

Upvotes: 2

Views: 1031

Answers (2)

Dream_Cap
Dream_Cap

Reputation: 2302

In bootstrap 4, according to the documentation, there's a sass variable that can be modified. They don't make a reference to a way to do it in just CSS. The variable is called $grid-gutter-width. This is what the docs say:

Columns and gutters The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width allows breakpoint-specific widths that are divided evenly across padding-left and padding-right for the column gutters.

This is what the code looks like: 

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

So this gutter variable is split between padding-left and right of the columns. This variable I believe would have to be modified in where your bootstrap installation is in _variables.scss.

Upvotes: 1

Shashank Bhatt
Shashank Bhatt

Reputation: 857

Each Bootstrap grid column classes have default 15px padding on left and right side.If u wanna override this, you can have your own class and define your own padding,but make sure to put this class after bootstrap.css.

To make input full width of container add form-control class for each text based input.

Upvotes: 0

Related Questions