CODEWITHSUNDEEP
twitter-bootstrap
cao
cao

Reputation: 51

Bootstrap grid column one split into two row, column two adjacent to it

">"        col1             col2      
">"   |--------------|---------------|
">"   |   text1      |               | 
">"   |--------------|  navigation   | 
">"   |    text2     |               |
">"   |--------------|---------------|

I need to create grid like the diagram above to hold texts and navigational menu. so far I try different variation using row and span. the idea is col1 split into two and col2 should be next to it. the column on left split in two, column right same height but adjacent to column one.

    `<div class="row">  
            <div class="span6"> 
                <div class="row">
                    <div class="col-sm-6" style="background-color:blue;">AAAA</div>
               </div>       
              <div class="row">
                   <div class="col-sm-6" style="background-color:red;">BBBB</div>
              </div>    
            </div>  

            <div class="span6">

              <div class="row">
                   <div class="col-sm-12" style="background-color:yellow;">row2</div>
              </div>

            </div>  
        </div>`

Upvotes: 5

Views: 28985

Answers (2)

Mohammed Abrar Ahmed
Mohammed Abrar Ahmed

Reputation: 2490

This should help

<div class="col-md-12">
<div class="col-md-6">
  <div class="row-fluid">
    <div class="span2">Text 1</div>
    <div class="span2">Text 2</div>
 </div>
</div>
<div class="col-md-6">
   Navigation
</div>
</div>

Upvotes: 1

jofftiquez
jofftiquez

Reputation: 7708

This will help you. LINK

I added background-color so you could see the divs.

Upvotes: 6

Related Questions