Creating a layout using bootstrap

Question

I need to create a layout using bootstrap 3. My layout should have something similar to this -

enter image description here

Here, I can create red column but others have some confusing.

This is my code so far -

<div class="container">
  <div class="row">
     <section class="col-sm-5">

     </section>
     <section class="col-sm-7">

     </section>
 </div> <!-- /.row -->
</div> <!-- /.container -->

Can anybody tell me how I create other columns using bootstrap?

DavidG · Accepted Answer · 2014-06-21 02:44:03Z

You can nest elements. Think of the second column (the blue and green) as a single page.

Inside the second column (your col-sm-7) create 2 rows. The first one contains a col-sm-12 which becomes your blue box and the second row has two col-sm-6 elements for each of the green boxes.

<div class="container">
    <div class="row">
        <div class="col-sm-5">
            RED
        </div>

        <div class="col-sm-7">
            <div class="row">
                <div class="col-sm-12">
                    BLUE
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6">
                    LEFT-GREEN
                </div>
                <div class="col-sm-6">
                    RIGHT-GREEN
                </div>
            </div>
        </div>

    </div>
</div>

And here is it running in bootply: http://www.bootply.com/um1CasObEK

Ricardo Nuñez · Accepted Answer · 2014-06-21 02:53:13Z

2

The HTML

<div class="container">
    <div class="row">
        <div class="col-md-4">
            1
        </div>
        <div class="col-md-8">
            <div class="row blue">
                2
            </div>
            <div class="row">
                <div class="col-md-6">
                3
                </div>
                <div class="col-md-6">
                4
                </div>
            </div>
        </div>
    </div>
</div>

Some sample css to make it look like your example:

div { background: #EEE; margin: 0px; min-height: 200px; }
.blue { background: #2800FD; border: 5px solid #fff;}
.col-md-6, .col-md-4 {border: 5px solid #fff;  }
.col-md-6 { min-height: 200px; background: #0AA025;}
.col-md-4 { min-height: 400px;  background: #FF0101;}

answered Jun 21, 2014 at 2:53

Ricardo Nuñez

9891 gold badge13 silver badges17 bronze badges

2 Comments

DavidG Over a year ago

It's preferred to give an explanation when you paste code. Other than that, this is correct so I'll give you a +1

Ricardo Nuñez Over a year ago

Thank you for the feedback. I gave +1 to your code, good idea to add the colors like that.

Collectives™ on Stack Overflow

Creating a layout using bootstrap

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related