123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- //
- // Grid system
- // --------------------------------------------------
- // Container widths
- //
- // Set the container width, and override it for fixed navbars in media queries.
- .container {
- @include container-fixed;
- @media (min-width: $screen-sm-min) {
- width: $container-sm;
- }
- @media (min-width: $screen-md-min) {
- width: $container-md;
- }
- @media (min-width: $screen-lg-min) {
- width: $container-lg;
- }
- }
- // Fluid container
- //
- // Utilizes the mixin meant for fixed width containers, but without any defined
- // width for fluid, full width layouts.
- .container-fluid {
- @include container-fixed;
- }
- // Row
- //
- // Rows contain and clear the floats of your columns.
- .row {
- @include make-row;
- }
- // Columns
- //
- // Common styles for small and large grid columns
- @include make-grid-columns;
- // Extra small grid
- //
- // Columns, offsets, pushes, and pulls for extra small devices like
- // smartphones.
- @include make-grid(xs);
- // Small grid
- //
- // Columns, offsets, pushes, and pulls for the small device range, from phones
- // to tablets.
- @media (min-width: $screen-sm-min) {
- @include make-grid(sm);
- }
- // Medium grid
- //
- // Columns, offsets, pushes, and pulls for the desktop device range.
- @media (min-width: $screen-md-min) {
- @include make-grid(md);
- }
- // Large grid
- //
- // Columns, offsets, pushes, and pulls for the large desktop device range.
- @media (min-width: $screen-lg-min) {
- @include make-grid(lg);
- }
|