1 | // Container widths
|
---|
2 | //
|
---|
3 | // Set the container width, and override it for fixed navbars in media queries.
|
---|
4 |
|
---|
5 | @if $enable-grid-classes {
|
---|
6 | // Single container class with breakpoint max-widths
|
---|
7 | .container {
|
---|
8 | @include make-container();
|
---|
9 | @include make-container-max-widths();
|
---|
10 | }
|
---|
11 |
|
---|
12 | // 100% wide container at all breakpoints
|
---|
13 | .container-fluid {
|
---|
14 | @include make-container();
|
---|
15 | }
|
---|
16 |
|
---|
17 | // Responsive containers that are 100% wide until a breakpoint
|
---|
18 | @each $breakpoint, $container-max-width in $container-max-widths {
|
---|
19 | .container-#{$breakpoint} {
|
---|
20 | @extend .container-fluid;
|
---|
21 | }
|
---|
22 |
|
---|
23 | @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
|
---|
24 | %responsive-container-#{$breakpoint} {
|
---|
25 | max-width: $container-max-width;
|
---|
26 | }
|
---|
27 |
|
---|
28 | @each $name, $width in $grid-breakpoints {
|
---|
29 | @if ($container-max-width > $width or $breakpoint == $name) {
|
---|
30 | .container#{breakpoint-infix($name, $grid-breakpoints)} {
|
---|
31 | @extend %responsive-container-#{$breakpoint};
|
---|
32 | }
|
---|
33 | }
|
---|
34 | }
|
---|
35 | }
|
---|
36 | }
|
---|
37 | }
|
---|
38 |
|
---|
39 |
|
---|
40 | // Row
|
---|
41 | //
|
---|
42 | // Rows contain your columns.
|
---|
43 |
|
---|
44 | @if $enable-grid-classes {
|
---|
45 | .row {
|
---|
46 | @include make-row();
|
---|
47 | }
|
---|
48 |
|
---|
49 | // Remove the negative margin from default .row, then the horizontal padding
|
---|
50 | // from all immediate children columns (to prevent runaway style inheritance).
|
---|
51 | .no-gutters {
|
---|
52 | margin-right: 0;
|
---|
53 | margin-left: 0;
|
---|
54 |
|
---|
55 | > .col,
|
---|
56 | > [class*="col-"] {
|
---|
57 | padding-right: 0;
|
---|
58 | padding-left: 0;
|
---|
59 | }
|
---|
60 | }
|
---|
61 | }
|
---|
62 |
|
---|
63 | // Columns
|
---|
64 | //
|
---|
65 | // Common styles for small and large grid columns
|
---|
66 |
|
---|
67 | @if $enable-grid-classes {
|
---|
68 | @include make-grid-columns();
|
---|
69 | }
|
---|