git.roojs.org Git - roojs1/blob - less/bootstrap/grid.less

   1 //
   2 // Grid system
   3 // --------------------------------------------------
   4
   5
   6 // Container widths
   7 //
   8 // Set the container width, and override it for fixed navbars in media queries.
   9
  10 .container {
  11   .container-fixed();
  12
  13   @media (min-width: @screen-sm-min) {
  14     width: @container-sm;
  15   }
  16   @media (min-width: @screen-md-min) {
  17     width: @container-md;
  18   }
  19   @media (min-width: @screen-lg-min) {
  20     width: @container-lg;
  21   }
  22 }
  23
  24
  25 // Fluid container
  26 //
  27 // Utilizes the mixin meant for fixed width containers, but without any defined
  28 // width for fluid, full width layouts.
  29
  30 .container-fluid {
  31   .container-fixed();
  32 }
  33
  34
  35 // Row
  36 //
  37 // Rows contain and clear the floats of your columns.
  38
  39 .row {
  40   .make-row();
  41 }
  42
  43 .row-no-gutters {
  44   margin-right: 0;
  45   margin-left: 0;
  46
  47   [class*="col-"] {
  48     padding-left: 0;
  49     padding-right: 0;
  50   }
  51 }
  52
  53
  54 // Columns
  55 //
  56 // Common styles for small and large grid columns
  57
  58 .make-grid-columns();
  59
  60
  61 // Extra small grid
  62 //
  63 // Columns, offsets, pushes, and pulls for extra small devices like
  64 // smartphones.
  65
  66 .make-grid(xs);
  67
  68
  69 // Small grid
  70 //
  71 // Columns, offsets, pushes, and pulls for the small device range, from phones
  72 // to tablets.
  73
  74 @media (min-width: @screen-sm-min) {
  75   .make-grid(sm);
  76 }
  77
  78
  79 // Medium grid
  80 //
  81 // Columns, offsets, pushes, and pulls for the desktop device range.
  82
  83 @media (min-width: @screen-md-min) {
  84   .make-grid(md);
  85 }
  86
  87
  88 // Large grid
  89 //
  90 // Columns, offsets, pushes, and pulls for the large desktop device range.
  91
  92 @media (min-width: @screen-lg-min) {
  93   .make-grid(lg);
  94 }