CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
tkittich
tkittich

Reputation: 71

how to get the grids in bs3 to stack when screen is smaller than 480px?

According to the doc, extra small devices Phones (< 768px) grids are horizontal at all times, i.e., never get stacked. I am looking for a way to make the grids to become stacked when the screen is smaller than 480px.

Upvotes: 6

Views: 2986

Answers (3)

Dan
Dan

Reputation: 5986

If you just want a generic 'all cols must be full width on < 480px devices' you could do something like this to save putting additional classes in the mark-up:

[class^="col-"], [class*=" col-"] {
    display:block;
    float:none;
    width: 100%;
}

Upvotes: 0

Ibrahim Benzer
Ibrahim Benzer

Reputation: 498

Add "col-xxs" class to your columns:

@media (max-width: 480px) { 
   .col-xxs {
      display:block;
      float:none;
      width: 100%
   }
}

Upvotes: 18

Carol Skelly
Carol Skelly

Reputation: 362520

You can use the 'col-sm-*' class. This is the "small" grid breakpoint, but at less than 768 pixels it will stack..

<div class="container">
    <div class="row">
      <div class="col-sm-4">col-sm-4</div>
      <div class="col-sm-4">col-sm-4</div>
      <div class="col-sm-4">col-sm-4</div>
    </div>
</div>

Demo: http://bootply.com/75567

Upvotes: 0

Related Questions