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
  10 // Mobile-first defaults
  11 .row {
  12   .make-row();
  13 }
  14
  15 // Common styles for small and large grid columns
  16 .col-1,
  17 .col-2,
  18 .col-3,
  19 .col-4,
  20 .col-5,
  21 .col-6,
  22 .col-7,
  23 .col-8,
  24 .col-9,
  25 .col-10,
  26 .col-11,
  27 .col-12,
  28 .col-sm-1,
  29 .col-sm-2,
  30 .col-sm-3,
  31 .col-sm-4,
  32 .col-sm-5,
  33 .col-sm-6,
  34 .col-sm-7,
  35 .col-sm-8,
  36 .col-sm-9,
  37 .col-sm-10,
  38 .col-sm-11,
  39 .col-sm-12,
  40 .col-lg-1,
  41 .col-lg-2,
  42 .col-lg-3,
  43 .col-lg-4,
  44 .col-lg-5,
  45 .col-lg-6,
  46 .col-lg-7,
  47 .col-lg-8,
  48 .col-lg-9,
  49 .col-lg-10,
  50 .col-lg-11,
  51 .col-lg-12 {
  52   position: relative;
  53   // Prevent columns from collapsing when empty
  54   min-height: 1px;
  55   // Inner gutter via padding
  56   padding-left:  (@grid-gutter-width / 2);
  57   padding-right: (@grid-gutter-width / 2);
  58 }
  59
  60
  61
  62 //
  63 // Container and grid column sizing
  64 //
  65
  66 // Tiny device columns (smartphones)
  67 .col-1,
  68 .col-2,
  69 .col-3,
  70 .col-4,
  71 .col-5,
  72 .col-6,
  73 .col-7,
  74 .col-8,
  75 .col-9,
  76 .col-10,
  77 .col-11,
  78 .col-12 {
  79   float: left;
  80 }
  81 .col-1  { width: percentage((1 / @grid-columns)); }
  82 .col-2  { width: percentage((2 / @grid-columns)); }
  83 .col-3  { width: percentage((3 / @grid-columns)); }
  84 .col-4  { width: percentage((4 / @grid-columns)); }
  85 .col-5  { width: percentage((5 / @grid-columns)); }
  86 .col-6  { width: percentage((6 / @grid-columns)); }
  87 .col-7  { width: percentage((7 / @grid-columns)); }
  88 .col-8  { width: percentage((8 / @grid-columns)); }
  89 .col-9  { width: percentage((9 / @grid-columns)); }
  90 .col-10 { width: percentage((10/ @grid-columns)); }
  91 .col-11 { width: percentage((11/ @grid-columns)); }
  92 .col-12 { width: 100%; }
  93
  94 // Small device columns (phones to tablets)
  95 @media (min-width: @screen-tablet) {
  96   .container {
  97     max-width: @container-tablet;
  98   }
  99
 100   .col-sm-1,
 101   .col-sm-2,
 102   .col-sm-3,
 103   .col-sm-4,
 104   .col-sm-5,
 105   .col-sm-6,
 106   .col-sm-7,
 107   .col-sm-8,
 108   .col-sm-9,
 109   .col-sm-10,
 110   .col-sm-11,
 111   .col-sm-12 {
 112     float: left;
 113   }
 114   .col-sm-1  { width: percentage((1 / @grid-columns)); }
 115   .col-sm-2  { width: percentage((2 / @grid-columns)); }
 116   .col-sm-3  { width: percentage((3 / @grid-columns)); }
 117   .col-sm-4  { width: percentage((4 / @grid-columns)); }
 118   .col-sm-5  { width: percentage((5 / @grid-columns)); }
 119   .col-sm-6  { width: percentage((6 / @grid-columns)); }
 120   .col-sm-7  { width: percentage((7 / @grid-columns)); }
 121   .col-sm-8  { width: percentage((8 / @grid-columns)); }
 122   .col-sm-9  { width: percentage((9 / @grid-columns)); }
 123   .col-sm-10 { width: percentage((10/ @grid-columns)); }
 124   .col-sm-11 { width: percentage((11/ @grid-columns)); }
 125   .col-sm-12 { width: 100%; }
 126
 127   // Push and pull columns for source order changes
 128   .col-push-1  { left: percentage((1 / @grid-columns)); }
 129   .col-push-2  { left: percentage((2 / @grid-columns)); }
 130   .col-push-3  { left: percentage((3 / @grid-columns)); }
 131   .col-push-4  { left: percentage((4 / @grid-columns)); }
 132   .col-push-5  { left: percentage((5 / @grid-columns)); }
 133   .col-push-6  { left: percentage((6 / @grid-columns)); }
 134   .col-push-7  { left: percentage((7 / @grid-columns)); }
 135   .col-push-8  { left: percentage((8 / @grid-columns)); }
 136   .col-push-9  { left: percentage((9 / @grid-columns)); }
 137   .col-push-10 { left: percentage((10/ @grid-columns)); }
 138   .col-push-11 { left: percentage((11/ @grid-columns)); }
 139
 140   .col-pull-1  { right: percentage((1 / @grid-columns)); }
 141   .col-pull-2  { right: percentage((2 / @grid-columns)); }
 142   .col-pull-3  { right: percentage((3 / @grid-columns)); }
 143   .col-pull-4  { right: percentage((4 / @grid-columns)); }
 144   .col-pull-5  { right: percentage((5 / @grid-columns)); }
 145   .col-pull-6  { right: percentage((6 / @grid-columns)); }
 146   .col-pull-7  { right: percentage((7 / @grid-columns)); }
 147   .col-pull-8  { right: percentage((8 / @grid-columns)); }
 148   .col-pull-9  { right: percentage((9 / @grid-columns)); }
 149   .col-pull-10 { right: percentage((10/ @grid-columns)); }
 150   .col-pull-11 { right: percentage((11/ @grid-columns)); }
 151 }
 152
 153 // Medium and large device columns (desktop and up)
 154 @media (min-width: @screen-desktop) {
 155   .container {
 156     max-width: @container-desktop;
 157   }
 158   .col-lg-1,
 159   .col-lg-2,
 160   .col-lg-3,
 161   .col-lg-4,
 162   .col-lg-5,
 163   .col-lg-6,
 164   .col-lg-7,
 165   .col-lg-8,
 166   .col-lg-9,
 167   .col-lg-10,
 168   .col-lg-11,
 169   .col-lg-12 {
 170     float: left;
 171   }
 172   .col-lg-1  { width: percentage((1 / @grid-columns)); }
 173   .col-lg-2  { width: percentage((2 / @grid-columns)); }
 174   .col-lg-3  { width: percentage((3 / @grid-columns)); }
 175   .col-lg-4  { width: percentage((4 / @grid-columns)); }
 176   .col-lg-5  { width: percentage((5 / @grid-columns)); }
 177   .col-lg-6  { width: percentage((6 / @grid-columns)); }
 178   .col-lg-7  { width: percentage((7 / @grid-columns)); }
 179   .col-lg-8  { width: percentage((8 / @grid-columns)); }
 180   .col-lg-9  { width: percentage((9 / @grid-columns)); }
 181   .col-lg-10 { width: percentage((10/ @grid-columns)); }
 182   .col-lg-11 { width: percentage((11/ @grid-columns)); }
 183   .col-lg-12 { width: 100%; }
 184
 185   // Offsets
 186   .col-offset-1  { margin-left: percentage((1 / @grid-columns)); }
 187   .col-offset-2  { margin-left: percentage((2 / @grid-columns)); }
 188   .col-offset-3  { margin-left: percentage((3 / @grid-columns)); }
 189   .col-offset-4  { margin-left: percentage((4 / @grid-columns)); }
 190   .col-offset-5  { margin-left: percentage((5 / @grid-columns)); }
 191   .col-offset-6  { margin-left: percentage((6 / @grid-columns)); }
 192   .col-offset-7  { margin-left: percentage((7 / @grid-columns)); }
 193   .col-offset-8  { margin-left: percentage((8 / @grid-columns)); }
 194   .col-offset-9  { margin-left: percentage((9 / @grid-columns)); }
 195   .col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
 196   .col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
 197 }
 198
 199 // Large desktops and up
 200 @media (min-width: @screen-large-desktop) {
 201   .container {
 202     max-width: @container-large-desktop;
 203   }
 204 }