]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
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> |