Skip to content

Instantly share code, notes, and snippets.

@easydevtuts

easydevtuts/grid.html

Created March 29, 2014 06:58
Download ZIP

Revisions

  1. easydevtuts created this gist Mar 29, 2014.
    154 changes: 154 additions & 0 deletions grid.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,154 @@
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Bootstrap 3.0 Grid System</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <style>
    body{
    background-color: black;
    }
    .col-xs-12{
    height: 100px;
    background-color: blue;
    color: white;
    text-align: center;
    }
    .col-xs-6{
    height: 100px;
    background-color: yellow;
    color: black;
    text-align: center;
    border: 2px solid black;
    }
    .col-xs-4{
    height: 100px;
    background-color: green;
    color: white;
    text-align: center;
    border: 2px solid black;
    }
    .col-xs-8{
    height: 100px;
    background-color: red;
    color: black;
    text-align: center;
    border: 2px solid black;
    }
    .footer .col-sm-4{
    height: 100px;
    background-color: purple;
    color: white;
    text-align: center;
    border: 2px solid black;
    }
    </style>
    </head>
    <body>

    <!-- Grid Classes:
    .container: wrapper for all your rows
    .row: contains all your column classes
    .col-##-##: the sizes of the columns in your row (xs,sm,md,lg)
    Ordering Classes (only for md & lg screens):
    .col-##-push-##: Pushes your columns
    .col-##-pull-##: Pulls your columns
    Offset Class (only for md & lg screens):
    .col-##-offset-##: moves your columns depending what the column is offset by
    Responsive Utility Classes: They hide and show content on your screen depending on which you device style for.
    .visible-##: Your content will only be visible on that screen size.
    .hidden-##: Your content will only be hidden on that screen size.
    -->

    <div class="container">

    <div class="row">

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

    <h1 class="visible-xs">Extra small screens</h1>
    <h1 class="visible-sm">Small screens</h1>
    <h1 class="visible-md">Medium Screen</h1>
    <h1 class="visible-lg">Large screens</h1>

    </div>

    </div>

    <div class="row">

    <div class="col-xs-6 col-lg-4">
    .col-xs-6
    </div>
    <div class="col-xs-6 col-lg-8">
    .col-xs-8
    </div>

    </div>

    <div class="row hidden-xs">

    <div class="col-sm-6">

    <div class="row">

    <div class="col-xs-4">
    col-xs-4
    </div>
    <div class="col-xs-8">
    col-xs-8
    </div>

    </div>

    </div>

    <div class="col-sm-6">

    <div class="row">

    <div class="col-xs-4 col-md-push-8">
    col-xs-4
    </div>
    <div class="col-xs-8 col-md-pull-4">
    col-xs-8
    </div>

    </div>

    </div>

    </div>

    <div class="row footer">

    <div class="col-sm-4">
    col-sm-4
    </div>
    <div class="col-sm-4">
    col-sm-4
    </div>
    <div class="col-sm-4">
    col-sm-4
    </div>

    </div>

    <div class="row">
    <div class="col-md-4 col-md-offset-8 panel">
    Find easydevtuts on social media
    </div>
    </div>

    </div>

    </body>
    </html>