CODEWITHSUNDEEP
htmltwitter-bootstrapgrid
None None
None None

Reputation: 195

Efficient code for grid design

Recently I have been introduced to bootstrap and RWD. I have understood the whole idea but I cannot seem to master the grid system. I created a div container to make a fixed design. I want to use grids but I have lots of spaces in the webpage. Meaning it is something like this:

Header

about 10 lines of free space

Content / Content / Content

about 5 lines of free space

Content

How do I design my webpage like that using grids? I guess what I am asking is not how, but what is the efficient way to do it. I do not want my code to be messy. Thanks.

Upvotes: 0

Views: 114

Answers (1)

Nader Alexan
Nader Alexan

Reputation: 2222

<div class='container'>
    <div class='row'>
        <div class='span12'>HEADER</div>
    </div>

    <div class='row'>
        <div class='span4'>CONTENT</div>
        <div class='span4'>CONTENT</div> 
        <div class='span4'>CONTENT</div>
    </div>

    <div class='row'>
        <div class='span12'>CONTENT</div>
    </div>    
</div>

As for the lines of free space, add margins as needed

Upvotes: 1

Related Questions