CODEWITHSUNDEEP
csstwitter-bootstrap
StackOverflowNewbie
StackOverflowNewbie

Reputation: 40633

Twitter Bootstrap: nested rows?

Twiter Bootstrap Question: Given the image below, how do I mark up the 3 red containers so that they are fluid and responsive? Can I define a container/row inside a span*? Not sure how to tackle such a layout.

enter image description here

Upvotes: 8

Views: 12699

Answers (3)

mila_frerichs
mila_frerichs

Reputation: 94

Sure you can nest rows inside other spans as deep as you like.

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span9">
            <div class="span4"></div>
            <div class="span4"></div>
            <div class="span4"></div>
        </div>
        <div class="span3"></div>
    </div>
</div>

that should work for your 3 containers inside the 9 row.

Upvotes: 7

Rakesh Tembhurne
Rakesh Tembhurne

Reputation: 862

You can nest row inside row, but then you have to make sure that markup is correct.

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span9">
            <div class="row-fluid">
                <div class="span4">...</div>
                <div class="span4">...</div>
                <div class="span4">...</div>
            </div>
        </div>
        <div class="span3">...</div>
    </div>
</div>

Follow the link to view working example with this. Try moving vertical bar between HTML and Result view, and you will see responsive layout working then and there. Three Responsive columns with Twitter Bootstrap

Upvotes: 5

Jonathan Vanasco
Jonathan Vanasco

Reputation: 15680

Have you tried this nesting order :

  • container-fluid
  • row-fluid
  • span9
  • row-fluid
  • span3 span3 span3

Upvotes: 0

Related Questions