2018-09-20 11:10:31 +02:00
<!doctype html>
2013-06-24 02:17:08 +02:00
< 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" >
2014-01-19 13:27:17 +01:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
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" >
2019-02-28 14:10:21 +01:00
< link rel = "canonical" href = "https://getbootstrap.com/docs/3.4/examples/grid/" >
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
2015-09-30 21:40:56 +02:00
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
< link href = "../../assets/css/ie10-viewport-bug-workaround.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-08-18 08:28:52 +02:00
2014-04-25 00:35:05 +02:00
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
2014-01-01 15:29:13 +01:00
<!-- [if lt IE 9]><script src="../../assets/js/ie8 - responsive - file - warning.js"></script><![endif] -->
2014-04-25 00:35:05 +02:00
< script src = "../../assets/js/ie-emulation-modes-warning.js" > < / script >
2013-10-18 03:39:03 +02:00
2014-10-23 08:11:03 +02:00
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
2013-08-18 08:28:52 +02:00
<!-- [if lt IE 9]>
2016-02-18 09:58:25 +01:00
< script src = "https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js" > < / script >
2014-04-21 18:12:43 +02:00
< script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js" > < / script >
2013-08-18 08:28:52 +02:00
<![endif]-->
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 >
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" >
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-09-09 22:56:10 +02:00
< div class = "col-xs-6" > .col-xs-6< / div >
< div class = "col-xs-6" > .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" >
2013-09-09 22:56:10 +02:00
< div class = "col-xs-12 col-sm-6 col-lg-8" > .col-xs-12 .col-sm-6 .col-lg-8< / div >
2016-07-29 18:17:06 +02:00
< div class = "col-sm-6 col-lg-4" > .col-sm-6 .col-lg-4< / div >
2013-06-24 02:17:08 +02:00
< / div >
< div class = "row" >
2013-09-09 22:56:10 +02:00
< div class = "col-xs-6 col-sm-4" > .col-xs-6 .col-sm-4< / div >
< div class = "col-xs-6 col-sm-4" > .col-xs-6 .col-sm-4< / div >
< div class = "col-xs-6 col-sm-4" > .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 >
2018-09-18 21:27:46 +02:00
< p > < a href = "../../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" >
2013-12-28 20:01:32 +01:00
< div class = "col-xs-6 col-sm-3" >
.col-xs-6 .col-sm-3
< br >
Resize your viewport or check it out on your phone for an example.
< / div >
2013-08-27 02:58:15 +02:00
< div class = "col-xs-6 col-sm-3" > .col-xs-6 .col-sm-3< / div >
<!-- Add the extra clearfix for only the required viewport -->
< div class = "clearfix visible-xs" > < / div >
< div class = "col-xs-6 col-sm-3" > .col-xs-6 .col-sm-3< / div >
< div class = "col-xs-6 col-sm-3" > .col-xs-6 .col-sm-3< / div >
< / div >
< hr >
< h3 > Offset, push, and pull resets< / h3 >
< p > Reset offsets, pushes, and pulls at specific breakpoints.< / p >
< div class = "row" >
< div class = "col-sm-5 col-md-6" > .col-sm-5 .col-md-6< / div >
< div class = "col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0" > .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0< / div >
< / div >
< div class = "row" >
< div class = "col-sm-6 col-md-5 col-lg-6" > .col-sm-6 .col-md-5 .col-lg-6< / div >
< div class = "col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0" > .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0< / div >
< / div >
2013-06-24 02:17:08 +02:00
< / div > <!-- /container -->
2013-08-17 21:32:11 +02:00
2014-07-28 02:01:34 +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 >
