src/scss/bootstrap-4.0.0-alpha.6/docs/examples/grid/index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   6     <meta name="description" content="">
   7     <meta name="author" content="">
   8     <link rel="icon" href="../../favicon.ico">
   9
  10     <title>Grid Template for Bootstrap</title>
  11
  12     <!-- Bootstrap core CSS -->
  13     <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
  14
  15     <!-- Custom styles for this template -->
  16     <link href="grid.css" rel="stylesheet">
  17   </head>
  18
  19   <body>
  20     <div class="container">
  21
  22       <h1>Bootstrap grid examples</h1>
  23       <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
  24
  25       <h3>Five grid tiers</h3>
  26       <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>
  27
  28       <div class="row">
  29         <div class="col-4">.col-4</div>
  30         <div class="col-4">.col-4</div>
  31         <div class="col-4">.col-4</div>
  32       </div>
  33
  34       <div class="row">
  35         <div class="col-sm-4">.col-sm-4</div>
  36         <div class="col-sm-4">.col-sm-4</div>
  37         <div class="col-sm-4">.col-sm-4</div>
  38       </div>
  39
  40       <div class="row">
  41         <div class="col-md-4">.col-md-4</div>
  42         <div class="col-md-4">.col-md-4</div>
  43         <div class="col-md-4">.col-md-4</div>
  44       </div>
  45
  46       <div class="row">
  47         <div class="col-lg-4">.col-lg-4</div>
  48         <div class="col-lg-4">.col-lg-4</div>
  49         <div class="col-lg-4">.col-lg-4</div>
  50       </div>
  51
  52       <div class="row">
  53         <div class="col-xl-4">.col-xl-4</div>
  54         <div class="col-xl-4">.col-xl-4</div>
  55         <div class="col-xl-4">.col-xl-4</div>
  56       </div>
  57
  58       <h3>Three equal columns</h3>
  59       <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>
  60       <div class="row">
  61         <div class="col-md-4">.col-md-4</div>
  62         <div class="col-md-4">.col-md-4</div>
  63         <div class="col-md-4">.col-md-4</div>
  64       </div>
  65
  66       <h3>Three unequal columns</h3>
  67       <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>
  68       <div class="row">
  69         <div class="col-md-3">.col-md-3</div>
  70         <div class="col-md-6">.col-md-6</div>
  71         <div class="col-md-3">.col-md-3</div>
  72       </div>
  73
  74       <h3>Two columns</h3>
  75       <p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
  76       <div class="row">
  77         <div class="col-md-8">.col-md-8</div>
  78         <div class="col-md-4">.col-md-4</div>
  79       </div>
  80
  81       <h3>Full width, single column</h3>
  82       <p class="text-warning">No grid classes are necessary for full-width elements.</p>
  83
  84       <hr>
  85
  86       <h3>Two columns with two nested columns</h3>
  87       <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>
  88       <p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
  89       <div class="row">
  90         <div class="col-md-8">
  91           .col-md-8
  92           <div class="row">
  93             <div class="col-md-6">.col-md-6</div>
  94             <div class="col-md-6">.col-md-6</div>
  95           </div>
  96         </div>
  97         <div class="col-md-4">.col-md-4</div>
  98       </div>
  99
 100       <hr>
 101
 102       <h3>Mixed: mobile and desktop</h3>
 103       <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>
 104       <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>
 105       <div class="row">
 106         <div class="col-12 col-md-8">.col-12 .col-md-8</div>
 107         <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 108       </div>
 109       <div class="row">
 110         <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 111         <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 112         <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 113       </div>
 114       <div class="row">
 115         <div class="col-6">.col-6</div>
 116         <div class="col-6">.col-6</div>
 117       </div>
 118
 119       <hr>
 120
 121       <h3>Mixed: mobile, tablet, and desktop</h3>
 122       <p></p>
 123       <div class="row">
 124         <div class="col-12 col-sm-6 col-lg-8">.col-12 .col-sm-6 .col-lg-8</div>
 125         <div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
 126       </div>
 127       <div class="row">
 128         <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
 129         <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
 130         <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
 131       </div>
 132
 133       <hr>
 134
 135       <h3>Column clearing</h3>
 136       <p><a href="../../layout/grid/#example-responsive-column-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
 137       <div class="row">
 138         <div class="col-6 col-sm-3">
 139           .col-6 .col-sm-3
 140           <br>
 141           Resize your viewport or check it out on your phone for an example.
 142         </div>
 143         <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
 144
 145         <!-- Add the extra clearfix for only the required viewport -->
 146         <div class="clearfix hidden-sm-up"></div>
 147
 148         <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
 149         <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
 150       </div>
 151
 152       <hr>
 153
 154       <h3>Offset, push, and pull resets</h3>
 155       <p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
 156       <div class="row">
 157         <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
 158         <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
 159       </div>
 160       <div class="row">
 161         <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
 162         <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
 163       </div>
 164
 165     </div> <!-- /container -->
 166
 167     <!-- Bootstrap core JavaScript
 168     ================================================== -->
 169     <!-- Placed at the end of the document so the pages load faster -->
 170     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 171     <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
 172   </body>
 173 </html>