resources/scss/bootstrap/_grid.scss

   1 //
   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 }