3 // --------------------------------------------------
6 // Set the container width, and override it for fixed navbars in media queries
11 // mobile first defaults
16 // Common styles for small and large grid columns
66 // Prevent columns from collapsing when empty
68 // Inner gutter via padding
69 padding-left: (@grid-gutter-width / 2);
70 padding-right: (@grid-gutter-width / 2);
76 // Grid classes for extra small devices like smartphones. No offset, push, or
77 // pull classes are present here due to the size of the target.
79 // Note that `.col-xs-12` doesn't get floated on purpose—there's no need since
95 .col-xs-1 { width: percentage((1 / @grid-columns)); }
96 .col-xs-2 { width: percentage((2 / @grid-columns)); }
97 .col-xs-3 { width: percentage((3 / @grid-columns)); }
98 .col-xs-4 { width: percentage((4 / @grid-columns)); }
99 .col-xs-5 { width: percentage((5 / @grid-columns)); }
100 .col-xs-6 { width: percentage((6 / @grid-columns)); }
101 .col-xs-7 { width: percentage((7 / @grid-columns)); }
102 .col-xs-8 { width: percentage((8 / @grid-columns)); }
103 .col-xs-9 { width: percentage((9 / @grid-columns)); }
104 .col-xs-10 { width: percentage((10/ @grid-columns)); }
105 .col-xs-11 { width: percentage((11/ @grid-columns)); }
106 .col-xs-12 { width: 100%; }
111 // Columns, offsets, pushes, and pulls for the small device range, from phones
114 // Note that `.col-sm-12` doesn't get floated on purpose—there's no need since
117 @media (min-width: @screen-tablet) {
119 max-width: @container-tablet;
135 .col-sm-1 { width: percentage((1 / @grid-columns)); }
136 .col-sm-2 { width: percentage((2 / @grid-columns)); }
137 .col-sm-3 { width: percentage((3 / @grid-columns)); }
138 .col-sm-4 { width: percentage((4 / @grid-columns)); }
139 .col-sm-5 { width: percentage((5 / @grid-columns)); }
140 .col-sm-6 { width: percentage((6 / @grid-columns)); }
141 .col-sm-7 { width: percentage((7 / @grid-columns)); }
142 .col-sm-8 { width: percentage((8 / @grid-columns)); }
143 .col-sm-9 { width: percentage((9 / @grid-columns)); }
144 .col-sm-10 { width: percentage((10/ @grid-columns)); }
145 .col-sm-11 { width: percentage((11/ @grid-columns)); }
146 .col-sm-12 { width: 100%; }
148 // Push and pull columns for source order changes
149 .col-sm-push-1 { left: percentage((1 / @grid-columns)); }
150 .col-sm-push-2 { left: percentage((2 / @grid-columns)); }
151 .col-sm-push-3 { left: percentage((3 / @grid-columns)); }
152 .col-sm-push-4 { left: percentage((4 / @grid-columns)); }
153 .col-sm-push-5 { left: percentage((5 / @grid-columns)); }
154 .col-sm-push-6 { left: percentage((6 / @grid-columns)); }
155 .col-sm-push-7 { left: percentage((7 / @grid-columns)); }
156 .col-sm-push-8 { left: percentage((8 / @grid-columns)); }
157 .col-sm-push-9 { left: percentage((9 / @grid-columns)); }
158 .col-sm-push-10 { left: percentage((10/ @grid-columns)); }
159 .col-sm-push-11 { left: percentage((11/ @grid-columns)); }
161 .col-sm-pull-1 { right: percentage((1 / @grid-columns)); }
162 .col-sm-pull-2 { right: percentage((2 / @grid-columns)); }
163 .col-sm-pull-3 { right: percentage((3 / @grid-columns)); }
164 .col-sm-pull-4 { right: percentage((4 / @grid-columns)); }
165 .col-sm-pull-5 { right: percentage((5 / @grid-columns)); }
166 .col-sm-pull-6 { right: percentage((6 / @grid-columns)); }
167 .col-sm-pull-7 { right: percentage((7 / @grid-columns)); }
168 .col-sm-pull-8 { right: percentage((8 / @grid-columns)); }
169 .col-sm-pull-9 { right: percentage((9 / @grid-columns)); }
170 .col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
171 .col-sm-pull-11 { right: percentage((11/ @grid-columns)); }
174 .col-sm-offset-1 { margin-left: percentage((1 / @grid-columns)); }
175 .col-sm-offset-2 { margin-left: percentage((2 / @grid-columns)); }
176 .col-sm-offset-3 { margin-left: percentage((3 / @grid-columns)); }
177 .col-sm-offset-4 { margin-left: percentage((4 / @grid-columns)); }
178 .col-sm-offset-5 { margin-left: percentage((5 / @grid-columns)); }
179 .col-sm-offset-6 { margin-left: percentage((6 / @grid-columns)); }
180 .col-sm-offset-7 { margin-left: percentage((7 / @grid-columns)); }
181 .col-sm-offset-8 { margin-left: percentage((8 / @grid-columns)); }
182 .col-sm-offset-9 { margin-left: percentage((9 / @grid-columns)); }
183 .col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
184 .col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
190 // Columns, offsets, pushes, and pulls for the desktop device range.
192 // Note that `.col-md-12` doesn't get floated on purpose—there's no need since
195 @media (min-width: @screen-desktop) {
197 max-width: @container-desktop;
212 .col-md-1 { width: percentage((1 / @grid-columns)); }
213 .col-md-2 { width: percentage((2 / @grid-columns)); }
214 .col-md-3 { width: percentage((3 / @grid-columns)); }
215 .col-md-4 { width: percentage((4 / @grid-columns)); }
216 .col-md-5 { width: percentage((5 / @grid-columns)); }
217 .col-md-6 { width: percentage((6 / @grid-columns)); }
218 .col-md-7 { width: percentage((7 / @grid-columns)); }
219 .col-md-8 { width: percentage((8 / @grid-columns)); }
220 .col-md-9 { width: percentage((9 / @grid-columns)); }
221 .col-md-10 { width: percentage((10/ @grid-columns)); }
222 .col-md-11 { width: percentage((11/ @grid-columns)); }
223 .col-md-12 { width: 100%; }
225 // Push and pull columns for source order changes
226 .col-md-push-0 { left: auto; }
227 .col-md-push-1 { left: percentage((1 / @grid-columns)); }
228 .col-md-push-2 { left: percentage((2 / @grid-columns)); }
229 .col-md-push-3 { left: percentage((3 / @grid-columns)); }
230 .col-md-push-4 { left: percentage((4 / @grid-columns)); }
231 .col-md-push-5 { left: percentage((5 / @grid-columns)); }
232 .col-md-push-6 { left: percentage((6 / @grid-columns)); }
233 .col-md-push-7 { left: percentage((7 / @grid-columns)); }
234 .col-md-push-8 { left: percentage((8 / @grid-columns)); }
235 .col-md-push-9 { left: percentage((9 / @grid-columns)); }
236 .col-md-push-10 { left: percentage((10/ @grid-columns)); }
237 .col-md-push-11 { left: percentage((11/ @grid-columns)); }
239 .col-md-pull-0 { right: auto; }
240 .col-md-pull-1 { right: percentage((1 / @grid-columns)); }
241 .col-md-pull-2 { right: percentage((2 / @grid-columns)); }
242 .col-md-pull-3 { right: percentage((3 / @grid-columns)); }
243 .col-md-pull-4 { right: percentage((4 / @grid-columns)); }
244 .col-md-pull-5 { right: percentage((5 / @grid-columns)); }
245 .col-md-pull-6 { right: percentage((6 / @grid-columns)); }
246 .col-md-pull-7 { right: percentage((7 / @grid-columns)); }
247 .col-md-pull-8 { right: percentage((8 / @grid-columns)); }
248 .col-md-pull-9 { right: percentage((9 / @grid-columns)); }
249 .col-md-pull-10 { right: percentage((10/ @grid-columns)); }
250 .col-md-pull-11 { right: percentage((11/ @grid-columns)); }
253 .col-md-offset-0 { margin-left: 0; }
254 .col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); }
255 .col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); }
256 .col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); }
257 .col-md-offset-4 { margin-left: percentage((4 / @grid-columns)); }
258 .col-md-offset-5 { margin-left: percentage((5 / @grid-columns)); }
259 .col-md-offset-6 { margin-left: percentage((6 / @grid-columns)); }
260 .col-md-offset-7 { margin-left: percentage((7 / @grid-columns)); }
261 .col-md-offset-8 { margin-left: percentage((8 / @grid-columns)); }
262 .col-md-offset-9 { margin-left: percentage((9 / @grid-columns)); }
263 .col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
264 .col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
270 // Columns, offsets, pushes, and pulls for the large desktop device range.
272 // Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
275 @media (min-width: @screen-lg-desktop) {
277 max-width: @container-lg-desktop;
293 .col-lg-1 { width: percentage((1 / @grid-columns)); }
294 .col-lg-2 { width: percentage((2 / @grid-columns)); }
295 .col-lg-3 { width: percentage((3 / @grid-columns)); }
296 .col-lg-4 { width: percentage((4 / @grid-columns)); }
297 .col-lg-5 { width: percentage((5 / @grid-columns)); }
298 .col-lg-6 { width: percentage((6 / @grid-columns)); }
299 .col-lg-7 { width: percentage((7 / @grid-columns)); }
300 .col-lg-8 { width: percentage((8 / @grid-columns)); }
301 .col-lg-9 { width: percentage((9 / @grid-columns)); }
302 .col-lg-10 { width: percentage((10/ @grid-columns)); }
303 .col-lg-11 { width: percentage((11/ @grid-columns)); }
304 .col-lg-12 { width: 100%; }
306 // Push and pull columns for source order changes
307 .col-lg-push-0 { left: auto; }
308 .col-lg-push-1 { left: percentage((1 / @grid-columns)); }
309 .col-lg-push-2 { left: percentage((2 / @grid-columns)); }
310 .col-lg-push-3 { left: percentage((3 / @grid-columns)); }
311 .col-lg-push-4 { left: percentage((4 / @grid-columns)); }
312 .col-lg-push-5 { left: percentage((5 / @grid-columns)); }
313 .col-lg-push-6 { left: percentage((6 / @grid-columns)); }
314 .col-lg-push-7 { left: percentage((7 / @grid-columns)); }
315 .col-lg-push-8 { left: percentage((8 / @grid-columns)); }
316 .col-lg-push-9 { left: percentage((9 / @grid-columns)); }
317 .col-lg-push-10 { left: percentage((10/ @grid-columns)); }
318 .col-lg-push-11 { left: percentage((11/ @grid-columns)); }
320 .col-lg-pull-0 { right: auto; }
321 .col-lg-pull-1 { right: percentage((1 / @grid-columns)); }
322 .col-lg-pull-2 { right: percentage((2 / @grid-columns)); }
323 .col-lg-pull-3 { right: percentage((3 / @grid-columns)); }
324 .col-lg-pull-4 { right: percentage((4 / @grid-columns)); }
325 .col-lg-pull-5 { right: percentage((5 / @grid-columns)); }
326 .col-lg-pull-6 { right: percentage((6 / @grid-columns)); }
327 .col-lg-pull-7 { right: percentage((7 / @grid-columns)); }
328 .col-lg-pull-8 { right: percentage((8 / @grid-columns)); }
329 .col-lg-pull-9 { right: percentage((9 / @grid-columns)); }
330 .col-lg-pull-10 { right: percentage((10/ @grid-columns)); }
331 .col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
334 .col-lg-offset-0 { margin-left: 0; }
335 .col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); }
336 .col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); }
337 .col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); }
338 .col-lg-offset-4 { margin-left: percentage((4 / @grid-columns)); }
339 .col-lg-offset-5 { margin-left: percentage((5 / @grid-columns)); }
340 .col-lg-offset-6 { margin-left: percentage((6 / @grid-columns)); }
341 .col-lg-offset-7 { margin-left: percentage((7 / @grid-columns)); }
342 .col-lg-offset-8 { margin-left: percentage((8 / @grid-columns)); }
343 .col-lg-offset-9 { margin-left: percentage((9 / @grid-columns)); }
344 .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
345 .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }