_grid.scss 1.27 KB
Newer Older
1
2
3
4
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

5
@if $enable-grid-classes {
6
  // Single container class with breakpoint max-widths
7
8
9
10
  .container {
    @include make-container();
    @include make-container-max-widths();
  }
11

12
  // 100% wide container at all breakpoints
13
14
15
  .container-fluid {
    @include make-container();
  }
16
17
18
19

  // Responsive containers that are 100% wide until a breakpoint
  @each $breakpoint, $container-max-width in $container-max-widths {
    .container-#{$breakpoint} {
20
      @extend .container-fluid;
21
22
23
24
25
26
27
28
    }

    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
      .container-#{$breakpoint} {
        max-width: $container-max-width;
      }
    }
  }
29
30
}

31

32
33
// Row
//
34
// Rows contain your columns.
35

36
37
38
39
@if $enable-grid-classes {
  .row {
    @include make-row();
  }
40
41
42
43
44
45
46

  // Remove the negative margin from default .row, then the horizontal padding
  // from all immediate children columns (to prevent runaway style inheritance).
  .no-gutters {
    margin-right: 0;
    margin-left: 0;

47
    > .col,
48
49
50
51
52
    > [class*="col-"] {
      padding-right: 0;
      padding-left: 0;
    }
  }
53
}
54

55
56
// Columns
//
57
// Common styles for small and large grid columns
58

59
60
61
@if $enable-grid-classes {
  @include make-grid-columns();
}