CODEWITHSUNDEEP
csstwitter-bootstrap
nsilva
nsilva

Reputation: 5612

Bootstrap Grid System on mobiles?

See the following JSFIDDLE

<div class="row">

  <div class="col-md-3 col-xs-6">
    <div style="background: blue;">
      test &amp; test &amp;
    </div>
  </div>

  <div class="col-md-3 col-xs-6">
    <div style="background: yellow;">
      test &amp; test &amp;
    </div>
  </div>

  <div class="col-md-3 col-xs-6">
    <div style="background: red;">
      test &amp; test &amp;
    </div>
  </div>

  <div class="col-md-3 col-xs-6">
    <div style="background: green;">
      test &amp; test &amp;
    </div>
  </div>

</div>

When you shrink the browser, isn't it supposed to add a margin (top & bottom) when you shrink the window?

Am I missing something or does this have to be added in media queries?

Upvotes: 2

Views: 50

Answers (1)

Pepelius
Pepelius

Reputation: 1609

Columns do not have a margin by default on Bootstrap grid system. Rows however do, but in order to add some margin to the bottom you will have to do by adding some simple CSS:

.row > .col-md-3 {
   margin-bottom: 10px;
}

Or if you don't want this to be a common rule, just add some custom class or id to specify this a bit more.

You can easily see the CSS rules being used on the columns by using your browser's inspector tool. Columns do not have margin, but padding (left and right, not vertically). You can insert the common CSS rule above to a Media Query if you feel it is better that way, kind of depends on your project.

Applying it on Media Query:

@media (max-width: 991px)
{
   .row > .col-md-3 {
      margin-bottom: 10px;
   }
}

Which ever suites you the best.

Upvotes: 2

Related Questions