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
  44 // Columns
  45 //
  46 // Common styles for small and large grid columns
  47
  48 .make-grid-columns();
  49
  50
  51 // Extra small grid
  52 //
  53 // Columns, offsets, pushes, and pulls for extra small devices like
  54 // smartphones.
  55
  56 .make-grid(xs);
  57
  58
  59 // Small grid
  60 //
  61 // Columns, offsets, pushes, and pulls for the small device range, from phones
  62 // to tablets.
  63
  64 @media (min-width: @screen-sm-min) {
  65   .make-grid(sm);
  66 }
  67
  68
  69 // Medium grid
  70 //
  71 // Columns, offsets, pushes, and pulls for the desktop device range.
  72
  73 @media (min-width: @screen-md-min) {
  74   .make-grid(md);
  75 }
  76
  77
  78 // Large grid
  79 //
  80 // Columns, offsets, pushes, and pulls for the large desktop device range.
  81
  82 @media (min-width: @screen-lg-min) {
  83   .make-grid(lg);
  84 }