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

   1 //
   2 // Grid system
   3 // --------------------------------------------------
   4
   5
   6 // Set the container width, and override it for fixed navbars in media queries
   7 .container {
   8   .container-fixed();
   9 }
  10
  11 // Mobile-first defaults
  12 .row {
  13   .make-row();
  14 }
  15
  16 // Common styles for small and large grid columns
  17 .col-xs-1,
  18 .col-xs-2,
  19 .col-xs-3,
  20 .col-xs-4,
  21 .col-xs-5,
  22 .col-xs-6,
  23 .col-xs-7,
  24 .col-xs-8,
  25 .col-xs-9,
  26 .col-xs-10,
  27 .col-xs-11,
  28 .col-xs-12,
  29 .col-sm-1,
  30 .col-sm-2,
  31 .col-sm-3,
  32 .col-sm-4,
  33 .col-sm-5,
  34 .col-sm-6,
  35 .col-sm-7,
  36 .col-sm-8,
  37 .col-sm-9,
  38 .col-sm-10,
  39 .col-sm-11,
  40 .col-sm-12,
  41 .col-md-1,
  42 .col-md-2,
  43 .col-md-3,
  44 .col-md-4,
  45 .col-md-5,
  46 .col-md-6,
  47 .col-md-7,
  48 .col-md-8,
  49 .col-md-9,
  50 .col-md-10,
  51 .col-md-11,
  52 .col-md-12,
  53 .col-lg-1,
  54 .col-lg-2,
  55 .col-lg-3,
  56 .col-lg-4,
  57 .col-lg-5,
  58 .col-lg-6,
  59 .col-lg-7,
  60 .col-lg-8,
  61 .col-lg-9,
  62 .col-lg-10,
  63 .col-lg-11,
  64 .col-lg-12 {
  65   position: relative;
  66   // Prevent columns from collapsing when empty
  67   min-height: 1px;
  68   // Inner gutter via padding
  69   padding-left:  (@grid-gutter-width / 2);
  70   padding-right: (@grid-gutter-width / 2);
  71 }
  72
  73
  74 // Extra small grid
  75 //
  76 // Grid classes for extra small devices like smartphones. No offset, push, or
  77 // pull classes are present here due to the size of the target.
  78 //
  79 // Note that `.col-xs-12` doesn't get floated on purpose—there's no need since
  80 // it's full-width.
  81
  82 .col-xs-1,
  83 .col-xs-2,
  84 .col-xs-3,
  85 .col-xs-4,
  86 .col-xs-5,
  87 .col-xs-6,
  88 .col-xs-7,
  89 .col-xs-8,
  90 .col-xs-9,
  91 .col-xs-10,
  92 .col-xs-11 {
  93   float: left;
  94 }
  95 .col-xs-1  { width: percentage((1 / @grid-columns)); }
  96 .col-xs-2  { width: percentage((2 / @grid-columns)); }
  97 .col-xs-3  { width: percentage((3 / @grid-columns)); }
  98 .col-xs-4  { width: percentage((4 / @grid-columns)); }
  99 .col-xs-5  { width: percentage((5 / @grid-columns)); }
 100 .col-xs-6  { width: percentage((6 / @grid-columns)); }
 101 .col-xs-7  { width: percentage((7 / @grid-columns)); }
 102 .col-xs-8  { width: percentage((8 / @grid-columns)); }
 103 .col-xs-9  { width: percentage((9 / @grid-columns)); }
 104 .col-xs-10 { width: percentage((10/ @grid-columns)); }
 105 .col-xs-11 { width: percentage((11/ @grid-columns)); }
 106 .col-xs-12 { width: 100%; }
 107
 108
 109 // Small grid
 110 //
 111 // Columns, offsets, pushes, and pulls for the small device range, from phones
 112 // to tablets.
 113 //
 114 // Note that `.col-sm-12` doesn't get floated on purpose—there's no need since
 115 // it's full-width.
 116
 117 @media (min-width: @screen-tablet) {
 118   .container {
 119     max-width: @container-tablet;
 120   }
 121
 122   .col-sm-1,
 123   .col-sm-2,
 124   .col-sm-3,
 125   .col-sm-4,
 126   .col-sm-5,
 127   .col-sm-6,
 128   .col-sm-7,
 129   .col-sm-8,
 130   .col-sm-9,
 131   .col-sm-10,
 132   .col-sm-11 {
 133     float: left;
 134   }
 135   .col-sm-1  { width: percentage((1 / @grid-columns)); }
 136   .col-sm-2  { width: percentage((2 / @grid-columns)); }
 137   .col-sm-3  { width: percentage((3 / @grid-columns)); }
 138   .col-sm-4  { width: percentage((4 / @grid-columns)); }
 139   .col-sm-5  { width: percentage((5 / @grid-columns)); }
 140   .col-sm-6  { width: percentage((6 / @grid-columns)); }
 141   .col-sm-7  { width: percentage((7 / @grid-columns)); }
 142   .col-sm-8  { width: percentage((8 / @grid-columns)); }
 143   .col-sm-9  { width: percentage((9 / @grid-columns)); }
 144   .col-sm-10 { width: percentage((10/ @grid-columns)); }
 145   .col-sm-11 { width: percentage((11/ @grid-columns)); }
 146   .col-sm-12 { width: 100%; }
 147
 148   // Push and pull columns for source order changes
 149   .col-sm-push-1  { left: percentage((1 / @grid-columns)); }
 150   .col-sm-push-2  { left: percentage((2 / @grid-columns)); }
 151   .col-sm-push-3  { left: percentage((3 / @grid-columns)); }
 152   .col-sm-push-4  { left: percentage((4 / @grid-columns)); }
 153   .col-sm-push-5  { left: percentage((5 / @grid-columns)); }
 154   .col-sm-push-6  { left: percentage((6 / @grid-columns)); }
 155   .col-sm-push-7  { left: percentage((7 / @grid-columns)); }
 156   .col-sm-push-8  { left: percentage((8 / @grid-columns)); }
 157   .col-sm-push-9  { left: percentage((9 / @grid-columns)); }
 158   .col-sm-push-10 { left: percentage((10/ @grid-columns)); }
 159   .col-sm-push-11 { left: percentage((11/ @grid-columns)); }
 160
 161   .col-sm-pull-1  { right: percentage((1 / @grid-columns)); }
 162   .col-sm-pull-2  { right: percentage((2 / @grid-columns)); }
 163   .col-sm-pull-3  { right: percentage((3 / @grid-columns)); }
 164   .col-sm-pull-4  { right: percentage((4 / @grid-columns)); }
 165   .col-sm-pull-5  { right: percentage((5 / @grid-columns)); }
 166   .col-sm-pull-6  { right: percentage((6 / @grid-columns)); }
 167   .col-sm-pull-7  { right: percentage((7 / @grid-columns)); }
 168   .col-sm-pull-8  { right: percentage((8 / @grid-columns)); }
 169   .col-sm-pull-9  { right: percentage((9 / @grid-columns)); }
 170   .col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
 171   .col-sm-pull-11 { right: percentage((11/ @grid-columns)); }
 172
 173   // Offsets
 174   .col-sm-offset-1  { margin-left: percentage((1 / @grid-columns)); }
 175   .col-sm-offset-2  { margin-left: percentage((2 / @grid-columns)); }
 176   .col-sm-offset-3  { margin-left: percentage((3 / @grid-columns)); }
 177   .col-sm-offset-4  { margin-left: percentage((4 / @grid-columns)); }
 178   .col-sm-offset-5  { margin-left: percentage((5 / @grid-columns)); }
 179   .col-sm-offset-6  { margin-left: percentage((6 / @grid-columns)); }
 180   .col-sm-offset-7  { margin-left: percentage((7 / @grid-columns)); }
 181   .col-sm-offset-8  { margin-left: percentage((8 / @grid-columns)); }
 182   .col-sm-offset-9  { margin-left: percentage((9 / @grid-columns)); }
 183   .col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
 184   .col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
 185 }
 186
 187
 188 // Medium grid
 189 //
 190 // Columns, offsets, pushes, and pulls for the desktop device range.
 191 //
 192 // Note that `.col-md-12` doesn't get floated on purpose—there's no need since
 193 // it's full-width.
 194
 195 @media (min-width: @screen-desktop) {
 196   .container {
 197     max-width: @container-desktop;
 198   }
 199   .col-md-1,
 200   .col-md-2,
 201   .col-md-3,
 202   .col-md-4,
 203   .col-md-5,
 204   .col-md-6,
 205   .col-md-7,
 206   .col-md-8,
 207   .col-md-9,
 208   .col-md-10,
 209   .col-md-11 {
 210     float: left;
 211   }
 212   .col-md-1  { width: percentage((1 / @grid-columns)); }
 213   .col-md-2  { width: percentage((2 / @grid-columns)); }
 214   .col-md-3  { width: percentage((3 / @grid-columns)); }
 215   .col-md-4  { width: percentage((4 / @grid-columns)); }
 216   .col-md-5  { width: percentage((5 / @grid-columns)); }
 217   .col-md-6  { width: percentage((6 / @grid-columns)); }
 218   .col-md-7  { width: percentage((7 / @grid-columns)); }
 219   .col-md-8  { width: percentage((8 / @grid-columns)); }
 220   .col-md-9  { width: percentage((9 / @grid-columns)); }
 221   .col-md-10 { width: percentage((10/ @grid-columns)); }
 222   .col-md-11 { width: percentage((11/ @grid-columns)); }
 223   .col-md-12 { width: 100%; }
 224
 225   // Push and pull columns for source order changes
 226   .col-md-push-0  { left: auto; }
 227   .col-md-push-1  { left: percentage((1 / @grid-columns)); }
 228   .col-md-push-2  { left: percentage((2 / @grid-columns)); }
 229   .col-md-push-3  { left: percentage((3 / @grid-columns)); }
 230   .col-md-push-4  { left: percentage((4 / @grid-columns)); }
 231   .col-md-push-5  { left: percentage((5 / @grid-columns)); }
 232   .col-md-push-6  { left: percentage((6 / @grid-columns)); }
 233   .col-md-push-7  { left: percentage((7 / @grid-columns)); }
 234   .col-md-push-8  { left: percentage((8 / @grid-columns)); }
 235   .col-md-push-9  { left: percentage((9 / @grid-columns)); }
 236   .col-md-push-10 { left: percentage((10/ @grid-columns)); }
 237   .col-md-push-11 { left: percentage((11/ @grid-columns)); }
 238
 239   .col-md-pull-0  { right: auto; }
 240   .col-md-pull-1  { right: percentage((1 / @grid-columns)); }
 241   .col-md-pull-2  { right: percentage((2 / @grid-columns)); }
 242   .col-md-pull-3  { right: percentage((3 / @grid-columns)); }
 243   .col-md-pull-4  { right: percentage((4 / @grid-columns)); }
 244   .col-md-pull-5  { right: percentage((5 / @grid-columns)); }
 245   .col-md-pull-6  { right: percentage((6 / @grid-columns)); }
 246   .col-md-pull-7  { right: percentage((7 / @grid-columns)); }
 247   .col-md-pull-8  { right: percentage((8 / @grid-columns)); }
 248   .col-md-pull-9  { right: percentage((9 / @grid-columns)); }
 249   .col-md-pull-10 { right: percentage((10/ @grid-columns)); }
 250   .col-md-pull-11 { right: percentage((11/ @grid-columns)); }
 251
 252   // Offsets
 253   .col-md-offset-0  { margin-left: 0; }
 254   .col-md-offset-1  { margin-left: percentage((1 / @grid-columns)); }
 255   .col-md-offset-2  { margin-left: percentage((2 / @grid-columns)); }
 256   .col-md-offset-3  { margin-left: percentage((3 / @grid-columns)); }
 257   .col-md-offset-4  { margin-left: percentage((4 / @grid-columns)); }
 258   .col-md-offset-5  { margin-left: percentage((5 / @grid-columns)); }
 259   .col-md-offset-6  { margin-left: percentage((6 / @grid-columns)); }
 260   .col-md-offset-7  { margin-left: percentage((7 / @grid-columns)); }
 261   .col-md-offset-8  { margin-left: percentage((8 / @grid-columns)); }
 262   .col-md-offset-9  { margin-left: percentage((9 / @grid-columns)); }
 263   .col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
 264   .col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
 265 }
 266
 267
 268 // Large grid
 269 //
 270 // Columns, offsets, pushes, and pulls for the large desktop device range.
 271 //
 272 // Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
 273 // it's full-width.
 274
 275 @media (min-width: @screen-large-desktop) {
 276   .container {
 277     max-width: @container-large-desktop;
 278   }
 279
 280   .col-lg-1,
 281   .col-lg-2,
 282   .col-lg-3,
 283   .col-lg-4,
 284   .col-lg-5,
 285   .col-lg-6,
 286   .col-lg-7,
 287   .col-lg-8,
 288   .col-lg-9,
 289   .col-lg-10,
 290   .col-lg-11 {
 291     float: left;
 292   }
 293   .col-lg-1  { width: percentage((1 / @grid-columns)); }
 294   .col-lg-2  { width: percentage((2 / @grid-columns)); }
 295   .col-lg-3  { width: percentage((3 / @grid-columns)); }
 296   .col-lg-4  { width: percentage((4 / @grid-columns)); }
 297   .col-lg-5  { width: percentage((5 / @grid-columns)); }
 298   .col-lg-6  { width: percentage((6 / @grid-columns)); }
 299   .col-lg-7  { width: percentage((7 / @grid-columns)); }
 300   .col-lg-8  { width: percentage((8 / @grid-columns)); }
 301   .col-lg-9  { width: percentage((9 / @grid-columns)); }
 302   .col-lg-10 { width: percentage((10/ @grid-columns)); }
 303   .col-lg-11 { width: percentage((11/ @grid-columns)); }
 304   .col-lg-12 { width: 100%; }
 305
 306   // Push and pull columns for source order changes
 307   .col-lg-push-0  { left: auto; }
 308   .col-lg-push-1  { left: percentage((1 / @grid-columns)); }
 309   .col-lg-push-2  { left: percentage((2 / @grid-columns)); }
 310   .col-lg-push-3  { left: percentage((3 / @grid-columns)); }
 311   .col-lg-push-4  { left: percentage((4 / @grid-columns)); }
 312   .col-lg-push-5  { left: percentage((5 / @grid-columns)); }
 313   .col-lg-push-6  { left: percentage((6 / @grid-columns)); }
 314   .col-lg-push-7  { left: percentage((7 / @grid-columns)); }
 315   .col-lg-push-8  { left: percentage((8 / @grid-columns)); }
 316   .col-lg-push-9  { left: percentage((9 / @grid-columns)); }
 317   .col-lg-push-10 { left: percentage((10/ @grid-columns)); }
 318   .col-lg-push-11 { left: percentage((11/ @grid-columns)); }
 319
 320   .col-lg-pull-0  { right: auto; }
 321   .col-lg-pull-1  { right: percentage((1 / @grid-columns)); }
 322   .col-lg-pull-2  { right: percentage((2 / @grid-columns)); }
 323   .col-lg-pull-3  { right: percentage((3 / @grid-columns)); }
 324   .col-lg-pull-4  { right: percentage((4 / @grid-columns)); }
 325   .col-lg-pull-5  { right: percentage((5 / @grid-columns)); }
 326   .col-lg-pull-6  { right: percentage((6 / @grid-columns)); }
 327   .col-lg-pull-7  { right: percentage((7 / @grid-columns)); }
 328   .col-lg-pull-8  { right: percentage((8 / @grid-columns)); }
 329   .col-lg-pull-9  { right: percentage((9 / @grid-columns)); }
 330   .col-lg-pull-10 { right: percentage((10/ @grid-columns)); }
 331   .col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
 332
 333   // Offsets
 334   .col-lg-offset-0  { margin-left: 0; }
 335   .col-lg-offset-1  { margin-left: percentage((1 / @grid-columns)); }
 336   .col-lg-offset-2  { margin-left: percentage((2 / @grid-columns)); }
 337   .col-lg-offset-3  { margin-left: percentage((3 / @grid-columns)); }
 338   .col-lg-offset-4  { margin-left: percentage((4 / @grid-columns)); }
 339   .col-lg-offset-5  { margin-left: percentage((5 / @grid-columns)); }
 340   .col-lg-offset-6  { margin-left: percentage((6 / @grid-columns)); }
 341   .col-lg-offset-7  { margin-left: percentage((7 / @grid-columns)); }
 342   .col-lg-offset-8  { margin-left: percentage((8 / @grid-columns)); }
 343   .col-lg-offset-9  { margin-left: percentage((9 / @grid-columns)); }
 344   .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
 345   .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
 346 }