Bootstrap grid examples

Bootstrap grid system.

by Avinashullal

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<div class="container text-center">
     <h4>One Column</h4>

    <div class="row">
        <div class="col-md-12">.col-md-12</div>
    </div>
    <div class="row">
         <h4>Two Columns</h4>

        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
    <div class="row">
         <h4>Three Columns</h4>

        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
         <h4>Four Columns</h4>

        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-3">.col-md-3</div>
    </div>
    <div class="row">
         <h4>Five Columns</h4>

        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
    </div>
    <div class="row">
         <h4>Six Columns</h4>

        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
    </div>
    <hr />
    <div class="row">
         <h4>Nested columns</h4>

        <div class="col-md-8">.col-md-8
            <div class="row">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
            </div>
        </div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
         <h4>Mixed: mobile and desktop</h4>

        <div class="col-xs-12...

CSS

body {
    padding: 20px;
}
.container {
    padding-right: 15px;
    padding-left: 15px;
}
h4 {
    margin-bottom: 30px;
}
.row {
    margin-bottom: 20px;
}
.row .row {
    margin-top: 10px;
    margin-bottom: 0;
}
[class*="col-"] {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #eee;
    background-color: rgba(86, 61, 124, .15);
    border: 1px solid #ddd;
    border: 1px solid rgba(86, 61, 124, .2);
    font-size: 11px;
}
hr {
    margin-top: 40px;
    margin-bottom: 40px;
}