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