dav dav - 4 months ago 33
CSS Question

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

Answer

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>

Comments