Basic HTML set up for grids
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <title>Bootstrap 3 Grid Tutorial</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- MAKE SURE TO ADD YOUR STYLES LAST --> <style type="text/css"> </style> </head> <body> <!-- put your grids in here! --> </body> </html>
12 column (full width) grid
<div class="container"> <div class="row"> <div class="col-xs-12"> Full width </div> </div> </div><!-- /container-->
12, 6, and 4 column grid
<div class="container"> <div class="row"> <div class="col-xs-12"> Full width </div> </div> <div class="row"> <div class="col-xs-6"> six columns </div> <div class="col-xs-6"> six columns </div> </div> <div class="row"> <div class="col-xs-3"> 3 columns </div> <div class="col-xs-3"> 3 columns </div> <div class="col-xs-3"> 3 columns </div> <div class="col-xs-3"> 3 columns </div> </div> </div><!-- /container-->
3,3, and 6 columns / 8 and 4 columns
<div class="container"> <h1>3, 3 and 6 columns</h1> <div class="row"> <div class="col-xs-3"> 3 columns </div> <div class="col-xs-3"> 3 columns </div> <div class="col-xs-6"> 6 columns </div> </div> <h1>8 and 4 columns</h1> <div class="row"> <div class="col-xs-8"> 8 columns </div> <div class="col-xs-4"> 4 columns </div> </div> </div><!-- /container-->
Nested grids example
<div class="container"> <div class="row"> <div class="col-xs-8"> <div class="row"> <div class="col-xs-6">6 columns</div> <div class="col-xs-6">6 columns</div> </div> </div> <div class="col-xs-4"> 4 columns </div> </div> </div><!-- /container-->
Offset Grid examples
<div class="container"> <h1>Offset columns</h1> <div class="row"> <div class="col-xs-6"> 6 columns </div> <div class="col-xs-3 col-sm-offset-3"> 3 columns </div> </div> <div class="row"> <div class="col-xs-6 col-sm-offset-3"> 6 columns </div> </div> </div><!-- /container-->