CODEWITHSUNDEEP
twitter-bootstrap
Mousam
Mousam

Reputation: 225

How to design rowspan using bootstrap div?

How to design Grid system with bootstrap?

In large and medium display it will show 2 columns and 3 rows. First column will have 1 cell and second columns will have 3 cells.

In small and extra small display it will show only 1 column and 4 rows. Each cell will stack one after another in a single column. First column/cell from large or medium display should come first here.

Upvotes: 11

Views: 41162

Answers (3)

StrangeLove
StrangeLove

Reputation: 231

Jake745 answer is right somehow but miss out the "row" div for the nested column. You can't have a column without a row so it is good to maintain that structure. Also, you don't need to repeat the column if you required all screen size to be spread to 12 or whatever size. ie, if you required mobile to take up 12 column while tablet onwards take up 6 columns, you just need to put "col-xs-12 col-sm-6" and anything above sm will always take up 6 columns automatically.

This way, you will reduce your code and not put in unnecessary codes. Hope this help. 

   <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6">
                First Column, First Cell
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6">
            <div class="row">
               <div class="col-xs-12">
                Second Column, First Cell
               </div>
               <div class="col-xs-12">
                Second Column, Second Cell
               </div>
               <div class="col-xs-12">
                Second Column, Third Cell
               </div>
           </div>
        </div>
    </div>

Upvotes: 5

Suganth G
Suganth G

Reputation: 5156

Try this:

DEMO

       <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    First Column, First Cell
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    Second Column, First Cell
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    Second Column, Second Cell
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    Second Column, Third Cell
                </div>
            </div>
        </div>

Upvotes: 16

kelgwiin
kelgwiin

Reputation: 817

you can nest the "rows"

<div class = "row">
    <!-- first column-->
    <div class = "col-lg-12">
    ...your code here   
    </div>

    <!-- second column-->
    <div class = "col-lg-12">
        <div class = "row">
            <div class = "col-lg-6">
            .. your code cell 1
            </div>

            <div class = "col-lg-6">
            .. your code cell 2
            </div>
        </div>
    </div>
</div>

Upvotes: 2

Related Questions