Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 6.91 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">
Zlatan Vasović's avatar
Improve <meta> tags    
Zlatan Vasović committed
6 
    <meta name="viewport" content="width=device-width, initial-scale=1">
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">
saiwang's avatar
add IE's Conditional comments for respondjs and html5shiv    
saiwang committed
19
Chris Rebert's avatar
add IE10 viewport bug workaround to examples    
Chris Rebert committed
20
21 
    <!-- 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
22
23
24
25
26 
  </head>

  <body>
    <div class="container">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
27
28
29
30 
      <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
31
Mark Otto's avatar
tweak grid docs, add new tier    
Mark Otto committed
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64 
      <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">
  <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>
</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>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
65
66 
      <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
67 
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
68
69
70 
        <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
71
72 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
73
74 
      <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
75 
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
76
77
78 
        <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
79
80 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
81
82 
      <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
83 
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
84
85 
        <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
86
87 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
88 
      <h3>Full width, single column</h3>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
89
90 
      <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
91
92
93 
      <hr>

      <h3>Two columns with two nested columns</h3>
Julian Thilo's avatar
Clarify nesting in grid example    
Julian Thilo committed
94 
      <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
95 
      <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
96 
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
97
98 
        <div class="col-md-8">
          .col-md-8
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
99 
          <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
100
101 
            <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
102
103 
          </div>
        </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
104 
        <div class="col-md-4">.col-md-4</div>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
105
106 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
107
108
109
110
111 
      <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>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
112 
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
113
114 
        <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
115
116 
      </div>
      <div class="row">
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
117
118
119 
        <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
120
121 
      </div>
      <div class="row">
Mark Otto's avatar
fixes #9985: update grid classes in grid example    
Mark Otto committed
122
123 
        <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
124
125 
      </div>
Mark Otto's avatar
hella examples fixing, mostly navbars and lots of work on grids example    
Mark Otto committed
126
127
128
129 
      <hr>

      <h3>Mixed: mobile, tablet, and desktop</h3>
      <p></p>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
130 
      <div class="row">
Mark Otto's avatar
fixes #9985: update grid classes in grid example    
Mark Otto committed
131
132 
        <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
133
134 
      </div>
      <div class="row">
Mark Otto's avatar
fixes #9985: update grid classes in grid example    
Mark Otto committed
135
136
137 
        <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
138
139 
      </div>
Mark Otto's avatar
Improve upon #9937: Link and put reset column stuff to action in the grid example    
Mark Otto committed
140
141
142 
      <hr>

      <h3>Column clearing</h3>
Mark Otto's avatar
drop the title    
Mark Otto committed
143 
      <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
144 
      <div class="row">
tomByrer's avatar
fixed .clearfix example, + doc link    
tomByrer committed
145
146
147
148
149 
        <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>
Mark Otto's avatar
Improve upon #9937: Link and put reset column stuff to action in the grid example    
Mark Otto committed
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172 
        <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>
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
173
174 
    </div> <!-- /container -->
Mark Otto's avatar
add respond.js to all examples (fixes #9731)    
Mark Otto committed
175
176
177
178 

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
Nicole's avatar
Update remaining templates to match starter template  
Nicole committed
179
180 
  </body>
</html>