Menu
">" 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>`
574
The column of a list can be split into rows using the grid system of BootStrap. The 'row' and 'col' classes of BootStrap enables splitting any area into rows and columns.
Click in a cell, or select multiple cells that you want to split. Under Table Tools, on the Layout tab, in the Merge group, click Split Cells. Enter the number of columns or rows that you want to split the selected cells into.
To move columns to the right, use the . col-*-offset-* class in Bootstrap.
This will help you. LINK
I added background-color so you could see the divs.
87
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
