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
