Responsive rows with Twitter Bootstrap

Question

I have two rows of three columns that I have set up with Twitter Bootstrap like so:

<div class="row">
    <div class="col-md-4">
     Some Stuff
    </div>
    <div class="col-md-4">
     Some more stuff
    </div>
    <div class="col-md-4">
     Even more stuff
    </div>
</div>
<div class="row">
    <div class="col-md-4">
     Some Stuff
    </div>
    <div class="col-md-4">
     Some more stuff
    </div>
    <div class="col-md-4">
     Even more stuff
    </div>
</div>

This works fine for a certain pixel width (two rows of three nice columns), but when I reduce the screen size, it has 2 in one row, and then 1 on another row (for 1 row). And then when an iPhone screen size they are each in their own row, but they are off center.

How do I make it so that these rows are responsive so that, when the screen size is reduced, 2 columns are displayed as 50% of the container width? And then when the screen is reduced to a phone device width, each column takes up 100% of the container width.

What happens to the third column when the screen size is reduced? — Satej S
– Satej S, Commented Feb 26, 2016 at 6:06
bootstrap works on a grid system for more info getbootstrap.com/examples/grid — S M
– S M, Commented Feb 26, 2016 at 6:19

Jagdish Parmar · Accepted Answer · 2016-02-26 06:14:46Z

5

See Example:

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
  <div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
  <div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
  <div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
  <div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
  <div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
</div>

answered Feb 26, 2016 at 6:14

Jagdish Parmar

5995 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GS Bala · Accepted Answer · 2016-02-26 10:02:12Z

2

Please try this,

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
  <div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
  <div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
  <div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
  <div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
  <div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
</div>

answered Feb 26, 2016 at 10:02

GS Bala

4002 silver badges11 bronze badges

Comments

RKS · Accepted Answer · 2016-02-26 06:59:17Z

0

use phone size css instead of desktop so it will remain same on all screen sizes.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-xs-4">
     Some Stuff
    </div>
    <div class="col-xs-4">
     Some more stuff
    </div>
    <div class="col-xs-4">
     Even more stuff
    </div>
</div>
<div class="row">
    <div class="col-xs-4">
     Some Stuff
    </div>
    <div class="col-xs-4">
     Some more stuff
    </div>
    <div class="col-xs-4">
     Even more stuff
    </div>
</div>

answered Feb 26, 2016 at 6:59

RKS

1681 gold badge2 silver badges8 bronze badges

Collectives™ on Stack Overflow

Responsive rows with Twitter Bootstrap

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related