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.tb-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} 85