Bootstrap/site/docs/4.1/examples/grid/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">

    <title>Grid Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="grid.css" rel="stylesheet">
  </head>

  <body class="py-4">
    <div class="container">

      <h1>Bootstrap grid examples</h1>
      <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
      <p>In these examples the <code>.themed-grid-col</code> class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.</p>

      <h2 class="mt-4">Five grid tiers</h2>
      <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 mb-3">
        <div class="col-4 themed-grid-col">.col-4</div>
        <div class="col-4 themed-grid-col">.col-4</div>
        <div class="col-4 themed-grid-col">.col-4</div>
      </div>

      <div class="row mb-3">
        <div class="col-sm-4 themed-grid-col">.col-sm-4</div>
        <div class="col-sm-4 themed-grid-col">.col-sm-4</div>
        <div class="col-sm-4 themed-grid-col">.col-sm-4</div>
      </div>

      <div class="row mb-3">
        <div class="col-md-4 themed-grid-col">.col-md-4</div>
        <div class="col-md-4 themed-grid-col">.col-md-4</div>
        <div class="col-md-4 themed-grid-col">.col-md-4</div>
      </div>

      <div class="row mb-3">
        <div class="col-lg-4 themed-grid-col">.col-lg-4</div>
        <div class="col-lg-4 themed-grid-col">.col-lg-4</div>
        <div class="col-lg-4 themed-grid-col">.col-lg-4</div>
      </div>

      <div class="row mb-3">
        <div class="col-xl-4 themed-grid-col">.col-xl-4</div>
        <div class="col-xl-4 themed-grid-col">.col-xl-4</div>
        <div class="col-xl-4 themed-grid-col">.col-xl-4</div>
      </div>

      <h2 class="mt-4">Three equal columns</h2>
      <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>
      <div class="row mb-3">
        <div class="col-md-4 themed-grid-col">.col-md-4</div>
        <div class="col-md-4 themed-grid-col">.col-md-4</div>
        <div class="col-md-4 themed-grid-col">.col-md-4</div>
      </div>

      <h2 class="mt-4">Three unequal columns</h2>
      <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>
      <div class="row mb-3">
        <div class="col-md-3 themed-grid-col">.col-md-3</div>
        <div class="col-md-6 themed-grid-col">.col-md-6</div>
        <div class="col-md-3 themed-grid-col">.col-md-3</div>
      </div>

      <h2 class="mt-4">Two columns</h2>
      <p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
      <div class="row mb-3">
        <div class="col-md-8 themed-grid-col">.col-md-8</div>
        <div class="col-md-4 themed-grid-col">.col-md-4</div>
      </div>

      <h2 class="mt-4">Full width, single column</h2>
      <p class="text-warning">
        No grid classes are necessary for full-width elements.
      </p>

      <hr class="my-4">

      <h2 class="mt-4">Two columns with two nested columns</h2>
      <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>
      <p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
      <div class="row mb-3">
        <div class="col-md-8 themed-grid-col">
          <div class="pb-3">
            .col-md-8
          </div>
          <div class="row">
            <div class="col-md-6 themed-grid-col">.col-md-6</div>
            <div class="col-md-6 themed-grid-col">.col-md-6</div>
          </div>
        </div>
        <div class="col-md-4 themed-grid-col">.col-md-4</div>
      </div>

      <hr class="my-4">

      <h2 class="mt-4">Mixed: mobile and desktop</h2>
      <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>
      <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>
      <div class="row mb-3">
        <div class="col-12 col-md-8 themed-grid-col">.col-12 .col-md-8</div>
        <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
      </div>
      <div class="row mb-3">
        <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
        <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
        <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
      </div>
      <div class="row mb-3">
        <div class="col-6 themed-grid-col">.col-6</div>
        <div class="col-6 themed-grid-col">.col-6</div>
      </div>

      <hr class="my-4">

      <h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>
      <div class="row mb-3">
        <div class="col-12 col-sm-6 col-lg-8 themed-grid-col">.col-12 .col-sm-6 .col-lg-8</div>
        <div class="col-6 col-lg-4 themed-grid-col">.col-6 .col-lg-4</div>
      </div>
      <div class="row mb-3">
        <div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
        <div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
        <div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
      </div>

    </div> <!-- /container -->
  </body>
</html>
Switch to lowercase `doctype`. (#24217) Having it uppercase doesn't offer anything and the lowercase version slightly improves gzip compression. 2017-10-03 19:34:59 +03:00			`<!doctype html>`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00			`<html lang="en">`
			`<head>`
			`<meta charset="utf-8">`
Add shrink-to-fit viewport directive Fixes potential problems with iOS9's new viewport behavior - see for instance https://forums.developer.apple.com/thread/13510 2015-10-06 12:35:39 +01:00			`<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00			`<meta name="description" content="">`
			`<meta name="author" content="">`
fix location of favicons so it loads when viewing the examples. This is the only one I found in the project, so I am assuming it is the right one to point to (#22895) 2017-07-16 08:19:20 -05:00			`<link rel="icon" href="../../../../favicon.ico">`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00
change file names to example names 2013-07-20 23:17:01 -07:00			`<title>Grid Template for Bootstrap</title>`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00
			`<!-- Bootstrap core CSS -->`
Reorganize docs for easier deploys With the current docs directory setup, I'm making too many mistakes and have to manually address path changes and directory moves on deploy. This makes for a frustrating experience developing locally and shipping releases. With this PR, we're basically back to the same setup from v3—duplicating the dist directory into our docs directory. Not the most ideal, but very straightforward for me as the release manager. 2018-06-21 07:31:38 +03:00			`<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00
			`<!-- Custom styles for this template -->`
add git ignore 2013-07-20 23:30:08 -07:00			`<link href="grid.css" rel="stylesheet">`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00			`</head>`

Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<body class="py-4">`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00			`<div class="container">`

Example pages: Remove usages of defunct .page-header class /fyi @mdo Note: The selector in dashboard.css that used .page-header was superfluous because the margin that it zeroed was already zero even without that declaration. [skip sauce] 2016-02-27 18:16:22 -08:00			`<h1>Bootstrap grid examples</h1>`
			`<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>`
Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<p>In these examples the <code>.themed-grid-col</code> class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.</p>`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00
Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<h2 class="mt-4">Five grid tiers</h2>`
tweak grid docs, add new tier 2014-12-04 21:02:04 -08: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>`

Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<div class="row mb-3">`
			`<div class="col-4 themed-grid-col">.col-4</div>`
			`<div class="col-4 themed-grid-col">.col-4</div>`
			`<div class="col-4 themed-grid-col">.col-4</div>`
Normalize examples and update where relevant. 2016-10-20 01:45:00 +11:00			`</div>`

Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<div class="row mb-3">`
			`<div class="col-sm-4 themed-grid-col">.col-sm-4</div>`
			`<div class="col-sm-4 themed-grid-col">.col-sm-4</div>`
			`<div class="col-sm-4 themed-grid-col">.col-sm-4</div>`
Normalize examples and update where relevant. 2016-10-20 01:45:00 +11:00			`</div>`

Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<div class="row mb-3">`
			`<div class="col-md-4 themed-grid-col">.col-md-4</div>`
			`<div class="col-md-4 themed-grid-col">.col-md-4</div>`
			`<div class="col-md-4 themed-grid-col">.col-md-4</div>`
Normalize examples and update where relevant. 2016-10-20 01:45:00 +11:00			`</div>`

Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<div class="row mb-3">`
			`<div class="col-lg-4 themed-grid-col">.col-lg-4</div>`
			`<div class="col-lg-4 themed-grid-col">.col-lg-4</div>`
			`<div class="col-lg-4 themed-grid-col">.col-lg-4</div>`
Normalize examples and update where relevant. 2016-10-20 01:45:00 +11:00			`</div>`

Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<div class="row mb-3">`
			`<div class="col-xl-4 themed-grid-col">.col-xl-4</div>`
			`<div class="col-xl-4 themed-grid-col">.col-xl-4</div>`
			`<div class="col-xl-4 themed-grid-col">.col-xl-4</div>`
Normalize examples and update where relevant. 2016-10-20 01:45:00 +11:00			`</div>`
tweak grid docs, add new tier 2014-12-04 21:02:04 -08:00
Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<h2 class="mt-4">Three equal columns</h2>`
hella examples fixing, mostly navbars and lots of work on grids example 2013-08-15 17:39:37 -07: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>`
Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<div class="row mb-3">`
			`<div class="col-md-4 themed-grid-col">.col-md-4</div>`
			`<div class="col-md-4 themed-grid-col">.col-md-4</div>`
			`<div class="col-md-4 themed-grid-col">.col-md-4</div>`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00			`</div>`

Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<h2 class="mt-4">Three unequal columns</h2>`
hella examples fixing, mostly navbars and lots of work on grids example 2013-08-15 17:39:37 -07: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>`
Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<div class="row mb-3">`
			`<div class="col-md-3 themed-grid-col">.col-md-3</div>`
			`<div class="col-md-6 themed-grid-col">.col-md-6</div>`
			`<div class="col-md-3 themed-grid-col">.col-md-3</div>`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00			`</div>`

Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<h2 class="mt-4">Two columns</h2>`
hella examples fixing, mostly navbars and lots of work on grids example 2013-08-15 17:39:37 -07:00			`<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>`
Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<div class="row mb-3">`
			`<div class="col-md-8 themed-grid-col">.col-md-8</div>`
			`<div class="col-md-4 themed-grid-col">.col-md-4</div>`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00			`</div>`

Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<h2 class="mt-4">Full width, single column</h2>`
			`<p class="text-warning">`
			`No grid classes are necessary for full-width elements.`
			`</p>`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00
Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<hr class="my-4">`
hella examples fixing, mostly navbars and lots of work on grids example 2013-08-15 17:39:37 -07:00
Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<h2 class="mt-4">Two columns with two nested columns</h2>`
Clarify nesting in grid example 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>`
hella examples fixing, mostly navbars and lots of work on grids example 2013-08-15 17:39:37 -07:00			`<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>`
Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<div class="row mb-3">`
			`<div class="col-md-8 themed-grid-col">`
			`<div class="pb-3">`
			`.col-md-8`
			`</div>`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00			`<div class="row">`
Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<div class="col-md-6 themed-grid-col">.col-md-6</div>`
			`<div class="col-md-6 themed-grid-col">.col-md-6</div>`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00			`</div>`
			`</div>`
Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<div class="col-md-4 themed-grid-col">.col-md-4</div>`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00			`</div>`

Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<hr class="my-4">`
hella examples fixing, mostly navbars and lots of work on grids example 2013-08-15 17:39:37 -07:00
Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<h2 class="mt-4">Mixed: mobile and desktop</h2>`
Update Grid example from v3 to v4; fixes #18818 2016-01-09 03:26:54 -08: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>`
hella examples fixing, mostly navbars and lots of work on grids example 2013-08-15 17:39:37 -07: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>`
Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<div class="row mb-3">`
			`<div class="col-12 col-md-8 themed-grid-col">.col-12 .col-md-8</div>`
			`<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00			`</div>`
Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<div class="row mb-3">`
			`<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>`
			`<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>`
			`<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00			`</div>`
Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<div class="row mb-3">`
			`<div class="col-6 themed-grid-col">.col-6</div>`
			`<div class="col-6 themed-grid-col">.col-6</div>`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00			`</div>`

Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<hr class="my-4">`
hella examples fixing, mostly navbars and lots of work on grids example 2013-08-15 17:39:37 -07:00
Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>`
			`<div class="row mb-3">`
			`<div class="col-12 col-sm-6 col-lg-8 themed-grid-col">.col-12 .col-sm-6 .col-lg-8</div>`
			`<div class="col-6 col-lg-4 themed-grid-col">.col-6 .col-lg-4</div>`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00			`</div>`
Improve Grid examples. (#26808) Removes the grid.css file of the grid example and makes use of utility classes 2018-10-21 09:52:13 +02:00			`<div class="row mb-3">`
			`<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>`
			`<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>`
			`<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>`
Update remaining templates to match starter template 2013-06-23 17:17:08 -07:00			`</div>`

			`</div> <!-- /container -->`
			`</body>`
			`</html>`