Monday, January 12, 2015

Code to create responsive Grid with Bootstrap

Grid system consist of rows and columns. Each row consist of single line and each column consist of 12 columns. If you try to add more columns than 12 column in single row, the column after 12th column will automatically go to new row.
<!-- grid -->
<div class="container">
    <div class="row">
        <div class="col-md-4"> <!--col-md-4 can be change as per your need -->
            <h2>First Heading</h2>

            <p>Some test goes here....Some test goes here....Some test goes here....Some test goes here....
        </div>
        <div class="col-md-4">
            <h2>Second Heading</h2>
            <p>Some test goes here....Some test goes here....Some test goes here....Some test goes here....
        </div>
        <div class="col-md-4">
            <h2>Third Heading</h2>
            <p>Some test goes here....Some test goes here....Some test goes here....Some test goes here....
        </div>
    </div>
</div>
DEMO:
fig: Grid with Bootstrap

No comments:

Post a Comment