2013-06-24 02:17:08 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2013-09-24 18:43:16 +02:00
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
2015-10-06 13:35:39 +02:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
2015-01-23 20:34:52 +01:00
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
2013-06-24 02:17:08 +02:00
< meta name = "description" content = "" >
< meta name = "author" content = "" >
2014-03-25 08:30:04 +01:00
< link rel = "icon" href = "../../favicon.ico" >
2013-06-24 02:17:08 +02:00
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 -->
2014-01-01 15:29:13 +01:00
< link href = "../../dist/css/bootstrap.min.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
2014-12-05 06:02:04 +01:00
< h3 > Five grid tiers< / h3 >
< p > There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.< / p >
< div class = "row" >
2016-02-06 09:47:33 +01:00
< div class = "col col-xs-4" > .col .col-xs-4< / div >
< div class = "col col-xs-4" > .col .col-xs-4< / div >
< div class = "col col-xs-4" > .col .col-xs-4< / div >
2014-12-05 06:02:04 +01:00
< / div >
< div class = "row" >
2016-02-06 09:47:33 +01:00
< div class = "col col-sm-4" > .col .col-sm-4< / div >
< div class = "col col-sm-4" > .col .col-sm-4< / div >
< div class = "col col-sm-4" > .col .col-sm-4< / div >
2014-12-05 06:02:04 +01:00
< / div >
< div class = "row" >
2016-02-06 09:47:33 +01:00
< div class = "col col-md-4" > .col .col-md-4< / div >
< div class = "col col-md-4" > .col .col-md-4< / div >
< div class = "col col-md-4" > .col .col-md-4< / div >
2014-12-05 06:02:04 +01:00
< / div >
< div class = "row" >
2016-02-06 09:47:33 +01:00
< div class = "col col-lg-4" > .col .col-lg-4< / div >
< div class = "col col-lg-4" > .col .col-lg-4< / div >
< div class = "col col-lg-4" > .col .col-lg-4< / div >
2014-12-05 06:02:04 +01:00
< / div >
< div class = "row" >
2016-02-06 09:47:33 +01:00
< div class = "col col-xl-4" > .col .col-xl-4< / div >
< div class = "col col-xl-4" > .col .col-xl-4< / div >
< div class = "col col-xl-4" > .col .col-xl-4< / div >
2014-12-05 06:02:04 +01:00
< / div >
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" >
2016-02-06 09:47:33 +01:00
< div class = "col col-md-4" > .col .col-md-4< / div >
< div class = "col col-md-4" > .col .col-md-4< / div >
< div class = "col col-md-4" > .col .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" >
2016-02-06 09:47:33 +01:00
< div class = "col col-md-3" > .col .col-md-3< / div >
< div class = "col col-md-6" > .col .col-md-6< / div >
< div class = "col col-md-3" > .col .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" >
2016-02-06 09:47:33 +01:00
< div class = "col col-md-8" > .col .col-md-8< / div >
< div class = "col col-md-4" > .col .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 >
2014-01-25 01:58:54 +01:00
< p > Per the documentation, nesting is easy—just put a row of columns within an existing column. 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 >
2013-08-16 02:39:37 +02:00
< 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" >
2016-02-06 09:47:33 +01:00
< div class = "col col-md-8" >
2013-08-16 02:39:37 +02:00
.col-md-8
2013-06-24 02:17:08 +02:00
< div class = "row" >
2016-02-06 09:47:33 +01:00
< div class = "col col-md-6" > .col .col-md-6< / div >
< div class = "col col-md-6" > .col .col-md-6< / div >
2013-06-24 02:17:08 +02:00
< / div >
< / div >
2016-02-06 09:47:33 +01:00
< div class = "col col-md-4" > .col .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 >
2016-01-09 12:26:54 +01:00
< p > The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.< / p >
2013-08-16 02:39:37 +02:00
< 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" >
2016-02-06 09:47:33 +01:00
< div class = "col col-xs-12 col-md-8" > .col .col-xs-12 .col-md-8< / div >
< div class = "col col-xs-6 col-md-4" > .col .col-xs-6 .col-md-4< / div >
2013-06-24 02:17:08 +02:00
< / div >
< div class = "row" >
2016-02-06 09:47:33 +01:00
< div class = "col col-xs-6 col-md-4" > .col .col-xs-6 .col-md-4< / div >
< div class = "col col-xs-6 col-md-4" > .col .col-xs-6 .col-md-4< / div >
< div class = "col col-xs-6 col-md-4" > .col .col-xs-6 .col-md-4< / div >
2013-06-24 02:17:08 +02:00
< / div >
< div class = "row" >
2016-02-06 09:47:33 +01:00
< div class = "col col-xs-6" > .col .col-xs-6< / div >
< div class = "col col-xs-6" > .col .col-xs-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" >
2016-02-06 09:47:33 +01:00
< div class = "col col-xs-12 col-sm-6 col-lg-8" > .col .col-xs-12 .col-sm-6 .col-lg-8< / div >
< div class = "col col-xs-6 col-lg-4" > .col .col-xs-6 .col-lg-4< / div >
2013-06-24 02:17:08 +02:00
< / div >
< div class = "row" >
2016-02-06 09:47:33 +01:00
< div class = "col col-xs-6 col-sm-4" > .col .col-xs-6 .col-sm-4< / div >
< div class = "col col-xs-6 col-sm-4" > .col .col-xs-6 .col-sm-4< / div >
< div class = "col col-xs-6 col-sm-4" > .col .col-xs-6 .col-sm-4< / div >
2013-06-24 02:17:08 +02:00
< / div >
2013-08-27 02:58:15 +02:00
< hr >
< h3 > Column clearing< / h3 >
2013-12-29 03:47:32 +01:00
< p > < a href = "http://getbootstrap.com/css/#grid-responsive-resets" > Clear floats< / a > at specific breakpoints to prevent awkward wrapping with uneven content.< / p >
2013-08-27 02:58:15 +02:00
< div class = "row" >
2016-02-06 09:47:33 +01:00
< div class = "col col-xs-6 col-sm-3" >
2013-12-28 20:01:32 +01:00
.col-xs-6 .col-sm-3
< br >
Resize your viewport or check it out on your phone for an example.
< / div >
2016-02-06 09:47:33 +01:00
< div class = "col col-xs-6 col-sm-3" > .col .col-xs-6 .col-sm-3< / div >
2013-08-27 02:58:15 +02:00
<!-- Add the extra clearfix for only the required viewport -->
2015-08-24 23:42:21 +02:00
< div class = "clearfix hidden-sm-up" > < / div >
2013-08-27 02:58:15 +02:00
2016-02-06 09:47:33 +01:00
< div class = "col col-xs-6 col-sm-3" > .col .col-xs-6 .col-sm-3< / div >
< div class = "col col-xs-6 col-sm-3" > .col .col-xs-6 .col-sm-3< / div >
2013-08-27 02:58:15 +02:00
< / div >
< hr >
< h3 > Offset, push, and pull resets< / h3 >
< p > Reset offsets, pushes, and pulls at specific breakpoints.< / p >
< div class = "row" >
2016-02-06 09:47:33 +01:00
< div class = "col col-sm-5 col-md-6" > .col .col-sm-5 .col-md-6< / div >
< div class = "col col-sm-5 offset-sm-2 col-md-6 offset-md-0" > .col .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0< / div >
2013-08-27 02:58:15 +02:00
< / div >
< div class = "row" >
2016-02-06 09:47:33 +01:00
< div class = "col col-sm-6 col-md-5 col-lg-6" > .col .col-sm-6 .col-md-5 .col-lg-6< / div >
< div class = "col col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0" > .col .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0< / div >
2013-08-27 02:58:15 +02:00
< / div >
2013-06-24 02:17:08 +02:00
< / div > <!-- /container -->
2013-08-17 21:32:11 +02:00
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
2015-09-06 11:16:01 +02:00
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
< script src = "../../assets/js/ie10-viewport-bug-workaround.js" > < / script >
2013-06-24 02:17:08 +02:00
< / body >
< / html >
