CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
The Hawk
The Hawk

Reputation: 1568

Bootstrap Double Gutters

When you create side by side div's with Bootstrap you have a gutter on both sides so in between you have double the space. How do you avoid this?

<div class="col-lg-9">content here</div>
<div class="col-lg-3">content here</div>

This will give you a 15px gutter on the left and right, but a 30px space between the two divs. How do you make it a 15px space?

Upvotes: 1

Views: 1136

Answers (3)

renatodamas
renatodamas

Reputation: 19565

If you do not care about perfectly proportional sized columns, this can be a solution:

<div class="row">
    <div class="col-lg-9">content here</div>
    <div class="col-lg-3 pl-0">content here</div>
</div>

Adding the class pl-0 basically removes the 15px left padding from the second column allowing only a 15px gap between first and second column.

Upvotes: 0

Quentin
Quentin

Reputation: 944020

Bootstrap expects you to put your columns inside rows (inside containers).

<div class="row">
  <div class="col-lg-9">content here</div>
  <div class="col-lg-3">content here</div>
</div>

The row has negative margins on the edges to eliminate the gutter on the sides of the outermost columns entirely.

It is designed this way to ensure that everything lines up, even if you nest column sets:

<div class="row">
  <div class="col-lg-9">
    <div class="row">
      <div class="col-lg-6">Content</div>
      <div class="col-lg-6">Content</div>
    </div>
  </div>
  <div class="col-lg-3">content here</div>
</div>

If you want to change the spacing between columns, Bootstrap expects you to do it by modifying the $spacing SASS variable.

Upvotes: 1

Bhuwan
Bhuwan

Reputation: 16855

You can reduce the padding of column as 7.5px, but also you have to increase the margin of row to -7.5px otherwise you will see the scroll.

Note: Try to use your parent class before .col-* otherwise it will affect to all other places where you have used the column classes

.parent .col-xs-9,
.parent .col-xs-3 {
  padding: 0 7.5px;
}

.parent .row {
  margin: 0 -7.5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="parent">
  <div class="row">
    <div class="col-xs-9">content here</div>
    <div class="col-xs-3">content here</div>
  </div>
</div>

I hope this will help you.

Upvotes: 0

Related Questions