2017-10-03 18:34:59 +02:00
<!doctype html>
2013-06-24 02:17:08 +02:00
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2015-10-06 13:35:39 +02:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
2013-06-24 02:17:08 +02:00
< meta name = "description" content = "" >
< meta name = "author" content = "" >
2017-07-16 15:19:20 +02: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 -->
2017-05-29 20:55:36 +02: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" >
2016-02-28 03:16:22 +01:00
< h1 > Bootstrap grid examples< / h1 >
< p class = "lead" > Basic grid layouts to get you familiar with building within the Bootstrap grid system.< / p >
2013-06-24 02:17:08 +02:00
2018-05-01 16:34:47 +02:00
< h2 > Five grid tiers< / h2 >
2014-12-05 06:02:04 +01:00
< 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 >
2016-10-19 16:45:00 +02:00
< div class = "row" >
2016-11-04 17:54:34 +01:00
< div class = "col-4" > .col-4< / div >
< div class = "col-4" > .col-4< / div >
< div class = "col-4" > .col-4< / div >
2016-10-19 16:45:00 +02:00
< / div >
< div class = "row" >
< 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-4< / div >
< div class = "col-md-4" > .col-md-4< / div >
< div class = "col-md-4" > .col-md-4< / div >
< / div >
< div class = "row" >
< div class = "col-lg-4" > .col-lg-4< / div >
< div class = "col-lg-4" > .col-lg-4< / div >
< div class = "col-lg-4" > .col-lg-4< / div >
< / div >
< div class = "row" >
< div class = "col-xl-4" > .col-xl-4< / div >
< div class = "col-xl-4" > .col-xl-4< / div >
< div class = "col-xl-4" > .col-xl-4< / div >
< / div >
2014-12-05 06:02:04 +01:00
2018-05-01 16:34:47 +02:00
< h2 > Three equal columns< / h2 >
2013-08-16 02:39:37 +02:00
< 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 19:51:59 +01: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 >
2018-05-01 16:34:47 +02:00
< h2 > Three unequal columns< / h2 >
2013-08-16 02:39:37 +02:00
< 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 19:51:59 +01: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 >
2018-05-01 16:34:47 +02:00
< h2 > Two columns< / h2 >
2013-08-16 02:39:37 +02:00
< 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 19:51:59 +01: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 >
2018-05-01 16:34:47 +02:00
< h2 > Full width, single column< / h2 >
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 >
2018-05-01 16:34:47 +02:00
< h2 > Two columns with two nested columns< / h2 >
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 19:51:59 +01:00
< div class = "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 19:51:59 +01: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 >
2016-02-06 19:51:59 +01: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 >
2018-05-01 16:34:47 +02:00
< h2 > Mixed: mobile and desktop< / h2 >
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-11-04 17:54:34 +01:00
< div class = "col-12 col-md-8" > .col-12 .col-md-8< / div >
< div class = "col-6 col-md-4" > .col-6 .col-md-4< / div >
2013-06-24 02:17:08 +02:00
< / div >
< div class = "row" >
2016-11-04 17:54:34 +01:00
< div class = "col-6 col-md-4" > .col-6 .col-md-4< / div >
< div class = "col-6 col-md-4" > .col-6 .col-md-4< / div >
< div class = "col-6 col-md-4" > .col-6 .col-md-4< / div >
2013-06-24 02:17:08 +02:00
< / div >
< div class = "row" >
2016-11-04 17:54:34 +01:00
< div class = "col-6" > .col-6< / div >
< div class = "col-6" > .col-6< / div >
2013-06-24 02:17:08 +02:00
< / div >
2013-08-16 02:39:37 +02:00
< hr >
2018-05-01 16:34:47 +02:00
< h2 > Mixed: mobile, tablet, and desktop< / h2 >
2013-08-16 02:39:37 +02:00
< p > < / p >
2013-06-24 02:17:08 +02:00
< div class = "row" >
2016-11-04 17:54:34 +01:00
< div class = "col-12 col-sm-6 col-lg-8" > .col-12 .col-sm-6 .col-lg-8< / div >
< div class = "col-6 col-lg-4" > .col-6 .col-lg-4< / div >
2013-06-24 02:17:08 +02:00
< / div >
< div class = "row" >
2016-11-04 17:54:34 +01:00
< div class = "col-6 col-sm-4" > .col-6 .col-sm-4< / div >
< div class = "col-6 col-sm-4" > .col-6 .col-sm-4< / div >
< div class = "col-6 col-sm-4" > .col-6 .col-sm-4< / div >
2013-06-24 02:17:08 +02:00
< / div >
< / div > <!-- /container -->
< / body >
< / html >
