blob: b15ca27bb546898d56f9f13a8c600c593b7f824e [file] [log] [blame]
Matteo Scandolo2500e392016-03-25 17:20:27 -07001//
2// Grid system
3// --------------------------------------------------
4
5
6// Container widths
7//
8// Set the container width, and override it for fixed navbars in media queries.
9
10.container {
11 @include container-fixed;
12
13 @media (min-width: $screen-sm-min) {
14 width: $container-sm;
15 }
16 @media (min-width: $screen-md-min) {
17 width: $container-md;
18 }
19 @media (min-width: $screen-lg-min) {
20 width: $container-lg;
21 }
22}
23
24
25// Fluid container
26//
27// Utilizes the mixin meant for fixed width containers, but without any defined
28// width for fluid, full width layouts.
29
30.container-fluid {
31 @include container-fixed;
32}
33
34
35// Row
36//
37// Rows contain and clear the floats of your columns.
38
39.row {
40 @include make-row;
41}
42
43
44// Columns
45//
46// Common styles for small and large grid columns
47
48@include make-grid-columns;
49
50
51// Extra small grid
52//
53// Columns, offsets, pushes, and pulls for extra small devices like
54// smartphones.
55
56@include make-grid(xs);
57
58
59// Small grid
60//
61// Columns, offsets, pushes, and pulls for the small device range, from phones
62// to tablets.
63
64@media (min-width: $screen-sm-min) {
65 @include make-grid(sm);
66}
67
68
69// Medium grid
70//
71// Columns, offsets, pushes, and pulls for the desktop device range.
72
73@media (min-width: $screen-md-min) {
74 @include make-grid(md);
75}
76
77
78// Large grid
79//
80// Columns, offsets, pushes, and pulls for the large desktop device range.
81
82@media (min-width: $screen-lg-min) {
83 @include make-grid(lg);
84}