CODEWITHSUNDEEP
twitter-bootstrap-3
i7nvd
i7nvd

Reputation: 1318

How do I stack Bootstrap columns differently?

I'm a noob with Bootstrap, though it's immensely cool and helpful! I have a question.

I'm trying to make some buttons that go like this on a wide screen:

Button 1    Button 3
Button 2    Button 4

But this on a small screen:

Button 1
Button 2
Button 3
Button 4

Is it possible to stack them like that?

Upvotes: 1

Views: 48

Answers (2)

cilerler
cilerler

Reputation: 9450

This is the base that will help you to achieve what you want to do. You may need some tweaks based on your specific screen sizes. You may also find more details at http://getbootstrap.com/css/#grid-responsive-resets

<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <button type="button" class="btn btn-default">Button</button>
            <button type="button" class="btn btn-default">Button</button>
            <button type="button" class="btn btn-default">Button</button>
            <button type="button" class="btn btn-default">Button</button>
        </div>
    </div>
</div>

UPDATE

<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <div class="col-md-6">
                <button type="button" class="btn btn-default">Button 1</button>
                <button type="button" class="btn btn-default">Button 2</button>
            </div>
            <div class="col-md-6">
                <button type="button" class="btn btn-default">Button 3</button>
                <button type="button" class="btn btn-default">Button 4</button>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362780

Try this..

<div class="container">
   <div class="col-xs-2">
      <div class="row">
            <div class="col-sm-6">
                <button type="button" class="btn btn-default">Button</button>
            </div>
            <div class="col-sm-6">  
                <button type="button" class="btn btn-default">Button</button>
            </div>
            <div class="col-sm-6">  
                <button type="button" class="btn btn-default">Button</button>
            </div>
            <div class="col-sm-6">  
                <button type="button" class="btn btn-default">Button</button>
            </div>
      </div>
   </div>
</div>

http://bootply.com/106650

EDIT..

To change the stack order, you'll want to nest the cols like this..

<div class="container">
   <div class="col-xs-3">
     <div class="col-md-6">
       <button type="button" class="btn btn-default">Button 1</button>
       <button type="button" class="btn btn-default">Button 2</button>
     </div>
     <div class="col-md-6">  
       <button type="button" class="btn btn-default">Button 3</button>
       <button type="button" class="btn btn-default">Button 4</button>
     </div>
   </div>
</div>

I updated the demo: http://bootply.com/106650

Upvotes: 2

Related Questions