2013-06-24 02:17:08 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "description" content = "" >
< meta name = "author" content = "" >
2013-07-21 08:17:01 +02:00
< title > Grid Template for Bootstrap< / title >
2013-06-24 02:17:08 +02:00
<!-- Bootstrap core CSS -->
2013-08-16 02:39:37 +02:00
< link href = "../../dist/css/bootstrap.css" rel = "stylesheet" >
2013-06-24 02:17:08 +02:00
<!-- Custom styles for this template -->
2013-07-21 08:30:08 +02:00
< link href = "grid.css" rel = "stylesheet" >
2013-06-24 02:17:08 +02:00
< / head >
< body >
< div class = "container" >
2013-08-16 02:39:37 +02:00
< div class = "page-header" >
< h1 > Bootstrap grid examples< / h1 >
< p class = "lead" > Basic grid layouts to get you familiar with building within the Bootstrap grid system.< / p >
< / div >
2013-06-24 02:17:08 +02:00
2013-08-16 02:39:37 +02:00
< h3 > Three equal columns< / h3 >
< p > Get three equal-width columns < strong > starting at desktops and scaling to large desktops< / strong > . On mobile devices, tablets and below, the columns will automatically stack.< / p >
2013-06-24 02:17:08 +02:00
< div class = "row" >
2013-08-16 02:39:37 +02:00
< 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 >
2013-06-24 02:17:08 +02:00
< / div >
2013-08-16 02:39:37 +02:00
< h3 > Three unequal columns< / h3 >
< p > Get three columns < strong > starting at desktops and scaling to large desktops< / strong > of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.< / p >
2013-06-24 02:17:08 +02:00
< div class = "row" >
2013-08-16 02:39:37 +02:00
< div class = "col-md-3" > .col-md-3< / div >
< div class = "col-md-6" > .col-md-6< / div >
< div class = "col-md-3" > .col-md-3< / div >
2013-06-24 02:17:08 +02:00
< / div >
2013-08-16 02:39:37 +02:00
< h3 > Two columns< / h3 >
< p > Get two columns < strong > starting at desktops and scaling to large desktops< / strong > .< / p >
2013-06-24 02:17:08 +02:00
< div class = "row" >
2013-08-16 02:39:37 +02:00
< div class = "col-md-8" > .col-md-8< / div >
< div class = "col-md-4" > .col-md-4< / div >
2013-06-24 02:17:08 +02:00
< / div >
2013-08-16 02:39:37 +02:00
< h3 > Full width, single column< / h3 >
2013-06-24 02:17:08 +02:00
< p class = "text-warning" > No grid classes are necessary for full-width elements.< / p >
2013-08-16 02:39:37 +02:00
< hr >
< h3 > Two columns with two nested columns< / h3 >
< p > Per the documentation, nesting is easy—just put a row of columns within an existing row. This gives you two columns < strong > starting at desktops and scaling to large desktops< / strong > , with another two (equal widths) within the larger column.< / p >
< p > At mobile device sizes, tablets and down, these columns and their nested columns will stack.< / p >
2013-06-24 02:17:08 +02:00
< div class = "row" >
2013-08-16 02:39:37 +02:00
< div class = "col-md-8" >
.col-md-8
2013-06-24 02:17:08 +02:00
< div class = "row" >
2013-08-16 02:39:37 +02:00
< div class = "col-md-6" > .col-md-6< / div >
< div class = "col-md-6" > .col-md-6< / div >
2013-06-24 02:17:08 +02:00
< / div >
< / div >
2013-08-16 02:39:37 +02:00
< div class = "col-md-4" > .col-md-4< / div >
2013-06-24 02:17:08 +02:00
< / div >
2013-08-16 02:39:37 +02:00
< hr >
< h3 > Mixed: mobile and desktop< / h3 >
< p > The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.< / p >
< p > Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.< / p >
2013-06-24 02:17:08 +02:00
< div class = "row" >
2013-08-16 02:39:37 +02:00
< div class = "col-xs-12 col-md-8" > .col-xs-12 .col-md-8< / div >
< div class = "col-xs-6 col-md-4" > .col-xs-6 .col-md-4< / div >
2013-06-24 02:17:08 +02:00
< / div >
< div class = "row" >
2013-08-16 02:39:37 +02:00
< div class = "col-xs-6 col-md-4" > .col-xs-6 .col-md-4< / div >
< div class = "col-xs-6 col-md-4" > .col-xs-6 .col-md-4< / div >
< div class = "col-xs-6 col-md-4" > .col-xs-6 .col-md-4< / div >
2013-06-24 02:17:08 +02:00
< / div >
< div class = "row" >
2013-08-16 02:39:37 +02:00
< div class = "col-xs-6 col-md-6" > .col-xs-6 .col-md-6< / div >
< div class = "col-xs-6 col-md-6" > .col-xs-6 .col-md-6< / div >
2013-06-24 02:17:08 +02:00
< / div >
2013-08-16 02:39:37 +02:00
< hr >
< h3 > Mixed: mobile, tablet, and desktop< / h3 >
< p > < / p >
2013-06-24 02:17:08 +02:00
< div class = "row" >
2013-08-16 02:39:37 +02:00
< div class = "col-xs-12 col-sm-8 col-lg-8" > .col-xs-12 .col-lg-8< / div >
< div class = "col-xs-6 col-sm-4 col-lg-4" > .col-xs-6 .col-lg-4< / div >
2013-06-24 02:17:08 +02:00
< / div >
< div class = "row" >
2013-08-16 02:39:37 +02:00
< div class = "col-xs-6 col-sm-4 col-lg-4" > .col-xs-6 .col-sm-4 .col-lg-4< / div >
< div class = "col-xs-6 col-sm-4 col-lg-4" > .col-xs-6 .col-sm-4 .col-lg-4< / div >
< div class = "col-xs-6 col-sm-4 col-lg-4" > .col-xs-6 .col-sm-4 .col-lg-4< / div >
2013-06-24 02:17:08 +02:00
< / div >
< div class = "row" >
2013-08-16 02:39:37 +02:00
< div class = "col-xs-6 col-sm-6 col-lg-6" > .col-xs-6 .col-sm-6 .col-lg-6< / div >
< div class = "col-xs-6 col-sm-6 col-lg-6" > .col-xs-6 .col-sm-6 .col-lg-6< / div >
2013-06-24 02:17:08 +02:00
< / div >
< / div > <!-- /container -->
< / body >
< / html >
