CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-design
Ilja
Ilja

Reputation: 46537

Achieving following layout with Twitter bootstrap

I am trying to achieve following layout with help of twitter bootstrap (12 columns):

Layout

At the moment I have this:

<div class="row">
    <div class="span6">1</div>
    <div class="span6">2</div>
    <div class="span6">3</div>
    <div class="span6">4</div>
    <!-- etc.. -->
</div>

I was assuming that it will work, but for some reason it doesn't (all layout is just messed up) Is there a fix that need's to be applied in order for this to work? Or is it not achievable with bootstrap?

Upvotes: 0

Views: 95

Answers (2)

Nisanth Sojan
Nisanth Sojan

Reputation: 1099

  <div class="row">
    <div class="span12">
        <div class="row">
            <div class="span6"></div>
            <div class="span6"></div>
        </div>
        <div class="row">
            <div class="span6"></div>
            <div class="span6"></div>
        </div>
    </div>
   </div>

if you want space between the rows you can add margin top or bottom for class "row"

Upvotes: 2

AlexanderBrevig
AlexanderBrevig

Reputation: 1987

Something like this:

<div class="row">
    <div class="span6">
        <div class="row">
            <div class="span6"></div>
        </div>
        <div class="row">
            <div class="span6"></div>
        </div>
    </div>
    <div class="span6">
        <div class="row">
            <div class="span6"></div>
        </div>
        <div class="row">
            <div class="span6"></div>
        </div>
    </div>
    <!-- etc.. -->
</div>

?

Upvotes: 1

Related Questions