CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
fightstarr20
fightstarr20

Reputation: 12598

Twitter Bootstrap Grid with 1 Large column

I am having a go at Twitter Bootstrap 3 for the first time and seem to be getting stuck when it comes to the grid system.

I am ok when it comes to using rows but I am trying to achieve a simple layout like the below image..

enter image description here

I can't even work out how to begin! Does anybody have a link to a jsfiddle or similar I can have a look at to read up on?

Upvotes: 0

Views: 400

Answers (1)

j08691
j08691

Reputation: 207901

Use this structure:

<div class="container">
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
            </div>
        </div>
    </div>
</div>

Essentially you create two columns, and in the second column you are creating a new grid to hold your four cells. You can change the md in col-md-6 to break at the resolution you need.

jsFiddle example

Upvotes: 4

Related Questions