CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
samb90
samb90

Reputation: 1073

Make row gutter spacing the same as column spacing

On bootstrap i'm trying to make a 3x3 grid.

I want the spacing between the rows to be the same as the spacing between the columns.

What is the best way to achieve this?

Upvotes: 0

Views: 81

Answers (3)

Season
Season

Reputation: 4366

I would use the border property to not confuse the grid system provided by Bootstrap.

HTML

<div class="container">
  <div class="row">
    <div class="col-xs-4">1</div>
    <div class="col-xs-4">2</div>
    <div class="col-xs-4">3</div>
  </div>
  <div class="row">
    <div class="col-xs-4">1</div>
    <div class="col-xs-4">2</div>
    <div class="col-xs-4">3</div>
  </div>
  <div class="row">
    <div class="col-xs-4">1</div>
    <div class="col-xs-4">2</div>
    <div class="col-xs-4">3</div>
  </div>
</div>

CSS

.container {
  background-color: yellow;
}
.row:nth-child(2) {
  border-top: 5px solid red;
  border-bottom: 5px solid red;
}
.col-xs-4:nth-child(2) {
  border-left: 5px solid red;
  border-right: 5px solid red;
}

It produces such preview.

Upvotes: 1

isherwood
isherwood

Reputation: 61083

I prefer to not mess with core layout styles because it can have undesirable effects on other components. Instead, put margin on the content:

.row > div > div { /* column children */
    margin-bottom: 15px;
}

Upvotes: 1

ste-fu
ste-fu

Reputation: 7454

According to the Bootstrap Docs a Column has a gutter width of 30px, 15px either side.

you could define a css class

.row-gutter
{
    margin-top: 15px;
    margin-bottom: 15px;
}

And then add it as an extra class to your row

<div class="row row-gutter">

Upvotes: 3

Related Questions