_grid.scss (1529B)
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 @include 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 @include container-fixed; 32 } 33 34 35 // Row 36 // 37 // Rows contain and clear the floats of your columns. 38 39 .row { 40 @include make-row; 41 42 } 43 44 45 // Columns 46 // 47 // Common styles for small and large grid columns 48 49 @include make-grid-columns; 50 51 52 // Extra small grid 53 // 54 // Columns, offsets, pushes, and pulls for extra small devices like 55 // smartphones. 56 57 @include make-grid(xs); 58 59 60 // Small grid 61 // 62 // Columns, offsets, pushes, and pulls for the small device range, from phones 63 // to tablets. 64 65 @media (min-width: $screen-sm-min) { 66 @include make-grid(sm); 67 } 68 69 70 // Medium grid 71 // 72 // Columns, offsets, pushes, and pulls for the desktop device range. 73 74 @media (min-width: $screen-md-min) { 75 @include make-grid(md); 76 } 77 78 79 // Large grid 80 // 81 // Columns, offsets, pushes, and pulls for the large desktop device range. 82 83 @media (min-width: $screen-lg-min) { 84 @include make-grid(lg); 85 }