CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
dav
dav

Reputation: 9267

Bootstrap 3 - different grid for a screen resolution of 480px or less

I have standard 4 column grid by bootstrap 3:

<div class="row">
    <div class="col-sm-3 col-xs-6">
        col1
    </div>
    <div class="col-sm-3 col-xs-6">
        col2
    </div>
    <div class="col-sm-3 col-xs-6">
        col3
    </div>
    <div class="col-sm-3 col-xs-6">
        col4
    </div>
</div>

On large screens it shows as 4 columns, at 767px width it becomes 2 columns. This all is fine. What I'm trying to achieve is to make it one column near 480px or less resolutions. Can this be done by bootstrap or I should right custom css ?

Thanks

Upvotes: 2

Views: 6796

Answers (1)

Gleb Kemarsky
Gleb Kemarsky

Reputation: 10408

Let's explore the bootstrap.css file. The .col-xs-6 class is different from the .col-xs-12 class by just one property:

.col-xs-12 { 
  width: 100%;
}
.col-xs-6 {
  width: 50%;
}

So it is enough to override the width property when the screen width is 480 pixels or less:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

/* The heart of the matter */
@media (max-width: 480px) {
  .col-xs-6 {
    width: 100% !important;
  }
}

/* Decorations */
.col-xs-6:nth-child(1) { background: #9cf; }
.col-xs-6:nth-child(2) { background: #c9f; }
.col-xs-6:nth-child(3) { background: #f9c; }
.col-xs-6:nth-child(4) { background: #9fc; }
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-xs-6">
      col1
    </div>
    <div class="col-sm-3 col-xs-6">
      col2
    </div>
    <div class="col-sm-3 col-xs-6">
      col3
    </div>
    <div class="col-sm-3 col-xs-6">
      col4
    </div>
  </div>
</div>

Upvotes: 7

Related Questions