git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/less/grid.less

   1 //
   2 // Grid system
   3 // --------------------------------------------------
   4
   5 // Set the container width, and override it for fixed navbars in media queries
   6 .container {
   7   .container-fixed();
   8
   9   @media (min-width: @screen-sm) {
  10     width: @container-sm;
  11   }
  12   @media (min-width: @screen-md) {
  13     width: @container-md;
  14   }
  15   @media (min-width: @screen-lg-min) {
  16     width: @container-lg;
  17   }
  18 }
  19
  20 // mobile first defaults
  21 .row {
  22   .make-row();
  23 }
  24
  25 // Common styles for small and large grid columns
  26 .make-grid-columns();
  27
  28
  29 // Extra small grid
  30 //
  31 // Columns, offsets, pushes, and pulls for extra small devices like
  32 // smartphones.
  33
  34 .make-grid-columns-float(xs);
  35 .make-grid(@grid-columns, xs, width);
  36 .make-grid(@grid-columns, xs, pull);
  37 .make-grid(@grid-columns, xs, push);
  38 .make-grid(@grid-columns, xs, offset);
  39
  40
  41 // Small grid
  42 //
  43 // Columns, offsets, pushes, and pulls for the small device range, from phones
  44 // to tablets.
  45
  46 @media (min-width: @screen-sm-min) {
  47   .make-grid-columns-float(sm);
  48   .make-grid(@grid-columns, sm, width);
  49   .make-grid(@grid-columns, sm, pull);
  50   .make-grid(@grid-columns, sm, push);
  51   .make-grid(@grid-columns, sm, offset);
  52 }
  53
  54
  55 // Medium grid
  56 //
  57 // Columns, offsets, pushes, and pulls for the desktop device range.
  58
  59 @media (min-width: @screen-md-min) {
  60   .make-grid-columns-float(md);
  61   .make-grid(@grid-columns, md, width);
  62   .make-grid(@grid-columns, md, pull);
  63   .make-grid(@grid-columns, md, push);
  64   .make-grid(@grid-columns, md, offset);
  65 }
  66
  67
  68 // Large grid
  69 //
  70 // Columns, offsets, pushes, and pulls for the large desktop device range.
  71
  72 @media (min-width: @screen-lg-min) {
  73   .make-grid-columns-float(lg);
  74   .make-grid(@grid-columns, lg, width);
  75   .make-grid(@grid-columns, lg, pull);
  76   .make-grid(@grid-columns, lg, push);
  77   .make-grid(@grid-columns, lg, offset);
  78 }
  79