Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 6.93 KB
Newer Older
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
1
2
3
4 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
Julian Thilo's avatar
Disable IE Compatibility Mode in docs, examples    
Julian Thilo committed
5 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
Patrick H. Lauke's avatar
Add shrink-to-fit viewport directive    
Patrick H. Lauke committed
6 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Kevin Kirsche's avatar
Fix issue #15601 — Position of X-UA-Compatible    
Kevin Kirsche committed
7 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
8
9 
    <meta name="description" content="">
    <meta name="author" content="">
XhmikosR's avatar
Move apple-touch-icon-precomposed.png and favicon.ico in docs root.    
XhmikosR committed
10 
    <link rel="icon" href="../../favicon.ico">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
11
Nicole's avatar
change file names to example names    
Nicole committed
12 
    <title>Grid Template for Bootstrap</title>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
13
14 

    <!-- Bootstrap core CSS -->
wangsai's avatar
fix assets links in all examples    
wangsai committed
15 
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
16
17 

    <!-- Custom styles for this template -->
Nicole's avatar
add git ignore    
Nicole committed
18 
    <link href="grid.css" rel="stylesheet">
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
19
20
21
22
23 
  </head>

  <body>
    <div class="container">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
24
25
26
27 
      <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>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
28
Mark Otto's avatar
tweak grid docs, add new tier    
Mark Otto committed
29
30
31
32 
      <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">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
33
34
35 
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-xs-4">.col-xs-4</div>
Mark Otto's avatar
tweak grid docs, add new tier    
Mark Otto committed
36
37
38 
</div>

<div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
39
40
41 
  <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>
Mark Otto's avatar
tweak grid docs, add new tier    
Mark Otto committed
42
43
44 
</div>

<div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
45
46
47 
  <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>
Mark Otto's avatar
tweak grid docs, add new tier    
Mark Otto committed
48
49
50 
</div>

<div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
51
52
53 
  <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>
Mark Otto's avatar
tweak grid docs, add new tier    
Mark Otto committed
54
55
56 
</div>

<div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
57
58
59 
  <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>
Mark Otto's avatar
tweak grid docs, add new tier    
Mark Otto committed
60
61 
</div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
62
63 
      <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>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
64 
      <div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
65
66
67 
        <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>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
68
69 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
70
71 
      <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>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
72 
      <div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
73
74
75 
        <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>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
76
77 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
78
79 
      <h3>Two columns</h3>
      <p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
80 
      <div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
81
82 
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
83
84 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
85 
      <h3>Full width, single column</h3>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
86
87 
      <p class="text-warning">No grid classes are necessary for full-width elements.</p>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
88
89
90 
      <hr>

      <h3>Two columns with two nested columns</h3>
Julian Thilo's avatar
Clarify nesting in grid example    
Julian Thilo committed
91 
      <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>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
92 
      <p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
93 
      <div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
94 
        <div class="col-md-8">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
95 
          .col-md-8
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
96 
          <div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
97
98 
            <div class="col-md-6">.col-md-6</div>
            <div class="col-md-6">.col-md-6</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
99
100 
          </div>
        </div>
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
101 
        <div class="col-md-4">.col-md-4</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
102
103 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
104
105
106 
      <hr>

      <h3>Mixed: mobile and desktop</h3>
Chris Rebert's avatar
Update Grid example from v3 to v4; fixes #18818    
Chris Rebert committed
107 
      <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>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
108 
      <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>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
109 
      <div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
110
111 
        <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>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
112
113 
      </div>
      <div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
114
115
116 
        <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>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
117
118 
      </div>
      <div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
119
120 
        <div class="col-xs-6">.col-xs-6</div>
        <div class="col-xs-6">.col-xs-6</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
121
122 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
123
124
125
126 
      <hr>

      <h3>Mixed: mobile, tablet, and desktop</h3>
      <p></p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
127 
      <div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
128
129 
        <div class="col-xs-12 col-sm-6 col-lg-8">.col-xs-12 .col-sm-6 .col-lg-8</div>
        <div class="col-xs-6 col-lg-4">.col-xs-6 .col-lg-4</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
130
131 
      </div>
      <div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
132
133
134 
        <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>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
135
136 
      </div>
Mark Otto's avatar
Improve upon #9937: Link and put reset column stuff to action in the grid example    
Mark Otto committed
137
138
139 
      <hr>

      <h3>Column clearing</h3>
Mark Otto's avatar
drop the title    
Mark Otto committed
140 
      <p><a href="http://getbootstrap.com/css/#grid-responsive-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
Mark Otto's avatar
Improve upon #9937: Link and put reset column stuff to action in the grid example    
Mark Otto committed
141 
      <div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
142 
        <div class="col-xs-6 col-sm-3">
tomByrer's avatar
fixed .clearfix example, + doc link    
tomByrer committed
143
144
145
146 
          .col-xs-6 .col-sm-3
          <br>
          Resize your viewport or check it out on your phone for an example.
        </div>
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
147 
        <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
Mark Otto's avatar
Improve upon #9937: Link and put reset column stuff to action in the grid example    
Mark Otto committed
148
149 

        <!-- Add the extra clearfix for only the required viewport -->
Chris Rebert's avatar
Replace remaining instances of defunct .visible* classes in docs    
Chris Rebert committed
150 
        <div class="clearfix hidden-sm-up"></div>
Mark Otto's avatar
Improve upon #9937: Link and put reset column stuff to action in the grid example    
Mark Otto committed
151
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
152
153 
        <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>
Mark Otto's avatar
Improve upon #9937: Link and put reset column stuff to action in the grid example    
Mark Otto committed
154
155
156
157
158
159
160 
      </div>

      <hr>

      <h3>Offset, push, and pull resets</h3>
      <p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
      <div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
161
162 
        <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
        <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
Mark Otto's avatar
Improve upon #9937: Link and put reset column stuff to action in the grid example    
Mark Otto committed
163
164 
      </div>
      <div class="row">
Mark Otto's avatar
flip things around again, no more base class, try out some new stuff to keep...    
Mark Otto committed
165
166 
        <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 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
Mark Otto's avatar
Improve upon #9937: Link and put reset column stuff to action in the grid example    
Mark Otto committed
167
168
169 
      </div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
170
171 
    </div> <!-- /container -->
Mark Otto's avatar
add respond.js to all examples (fixes #9731)    
Mark Otto committed
172
173
174
175 

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
XhmikosR's avatar
Clean up inclusion of IE-specific JS files.    
XhmikosR committed
176
177 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
178
179 
  </body>
</html>