2012-06-29 00:46:45 -04:00
|
|
|
//
|
|
|
|
|
// Grid system
|
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
|
2012-08-28 16:33:06 -04:00
|
|
|
// Set the container width, and override it for fixed navbars in media queries
|
2012-11-30 15:42:37 -05:00
|
|
|
.container {
|
2012-11-30 19:18:40 -05:00
|
|
|
.container-fixed();
|
2012-11-30 15:42:37 -05:00
|
|
|
}
|
2012-01-29 16:06:57 -05:00
|
|
|
|
2013-08-18 01:51:00 -04:00
|
|
|
// mobile first defaults
|
2013-01-15 20:55:14 -05:00
|
|
|
.row {
|
2013-03-16 02:21:10 -04:00
|
|
|
.make-row();
|
2013-01-15 20:55:14 -05:00
|
|
|
}
|
2013-04-27 02:59:51 -04:00
|
|
|
|
|
|
|
|
// Common styles for small and large grid columns
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
.col-xs-1,
|
|
|
|
|
.col-xs-2,
|
|
|
|
|
.col-xs-3,
|
|
|
|
|
.col-xs-4,
|
|
|
|
|
.col-xs-5,
|
|
|
|
|
.col-xs-6,
|
|
|
|
|
.col-xs-7,
|
|
|
|
|
.col-xs-8,
|
|
|
|
|
.col-xs-9,
|
|
|
|
|
.col-xs-10,
|
|
|
|
|
.col-xs-11,
|
|
|
|
|
.col-xs-12,
|
2013-06-08 17:04:16 -04:00
|
|
|
.col-sm-1,
|
|
|
|
|
.col-sm-2,
|
|
|
|
|
.col-sm-3,
|
|
|
|
|
.col-sm-4,
|
|
|
|
|
.col-sm-5,
|
|
|
|
|
.col-sm-6,
|
|
|
|
|
.col-sm-7,
|
|
|
|
|
.col-sm-8,
|
|
|
|
|
.col-sm-9,
|
|
|
|
|
.col-sm-10,
|
|
|
|
|
.col-sm-11,
|
|
|
|
|
.col-sm-12,
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
.col-md-1,
|
|
|
|
|
.col-md-2,
|
|
|
|
|
.col-md-3,
|
|
|
|
|
.col-md-4,
|
|
|
|
|
.col-md-5,
|
|
|
|
|
.col-md-6,
|
|
|
|
|
.col-md-7,
|
|
|
|
|
.col-md-8,
|
|
|
|
|
.col-md-9,
|
|
|
|
|
.col-md-10,
|
|
|
|
|
.col-md-11,
|
|
|
|
|
.col-md-12,
|
2013-06-02 16:38:45 -04:00
|
|
|
.col-lg-1,
|
|
|
|
|
.col-lg-2,
|
|
|
|
|
.col-lg-3,
|
|
|
|
|
.col-lg-4,
|
|
|
|
|
.col-lg-5,
|
|
|
|
|
.col-lg-6,
|
|
|
|
|
.col-lg-7,
|
|
|
|
|
.col-lg-8,
|
|
|
|
|
.col-lg-9,
|
|
|
|
|
.col-lg-10,
|
2013-06-04 00:51:35 -04:00
|
|
|
.col-lg-11,
|
|
|
|
|
.col-lg-12 {
|
2013-03-16 02:21:10 -04:00
|
|
|
position: relative;
|
2013-04-27 02:59:51 -04:00
|
|
|
// Prevent columns from collapsing when empty
|
2013-01-16 16:11:45 -05:00
|
|
|
min-height: 1px;
|
2013-04-27 02:59:51 -04:00
|
|
|
// Inner gutter via padding
|
2013-03-06 11:38:20 -05:00
|
|
|
padding-left: (@grid-gutter-width / 2);
|
|
|
|
|
padding-right: (@grid-gutter-width / 2);
|
2013-01-15 20:55:14 -05:00
|
|
|
}
|
|
|
|
|
|
2013-06-02 16:38:45 -04:00
|
|
|
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
// Extra small grid
|
2013-06-08 17:04:16 -04:00
|
|
|
//
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
// Grid classes for extra small devices like smartphones. No offset, push, or
|
2013-08-12 19:02:27 -04:00
|
|
|
// pull classes are present here due to the size of the target.
|
|
|
|
|
//
|
2013-09-01 04:46:18 -04:00
|
|
|
// Note that `.col-xs-12` doesn't get floated on purpose--there's no need since
|
2013-08-12 19:02:27 -04:00
|
|
|
// it's full-width.
|
2013-06-08 17:04:16 -04:00
|
|
|
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
.col-xs-1,
|
|
|
|
|
.col-xs-2,
|
|
|
|
|
.col-xs-3,
|
|
|
|
|
.col-xs-4,
|
|
|
|
|
.col-xs-5,
|
|
|
|
|
.col-xs-6,
|
|
|
|
|
.col-xs-7,
|
|
|
|
|
.col-xs-8,
|
|
|
|
|
.col-xs-9,
|
|
|
|
|
.col-xs-10,
|
2013-08-12 19:02:27 -04:00
|
|
|
.col-xs-11 {
|
2013-06-23 18:05:50 -04:00
|
|
|
float: left;
|
|
|
|
|
}
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
.col-xs-1 { width: percentage((1 / @grid-columns)); }
|
|
|
|
|
.col-xs-2 { width: percentage((2 / @grid-columns)); }
|
|
|
|
|
.col-xs-3 { width: percentage((3 / @grid-columns)); }
|
|
|
|
|
.col-xs-4 { width: percentage((4 / @grid-columns)); }
|
|
|
|
|
.col-xs-5 { width: percentage((5 / @grid-columns)); }
|
|
|
|
|
.col-xs-6 { width: percentage((6 / @grid-columns)); }
|
|
|
|
|
.col-xs-7 { width: percentage((7 / @grid-columns)); }
|
|
|
|
|
.col-xs-8 { width: percentage((8 / @grid-columns)); }
|
|
|
|
|
.col-xs-9 { width: percentage((9 / @grid-columns)); }
|
|
|
|
|
.col-xs-10 { width: percentage((10/ @grid-columns)); }
|
|
|
|
|
.col-xs-11 { width: percentage((11/ @grid-columns)); }
|
|
|
|
|
.col-xs-12 { width: 100%; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Small grid
|
|
|
|
|
//
|
|
|
|
|
// Columns, offsets, pushes, and pulls for the small device range, from phones
|
|
|
|
|
// to tablets.
|
2013-08-12 19:02:27 -04:00
|
|
|
//
|
2013-09-01 04:46:18 -04:00
|
|
|
// Note that `.col-sm-12` doesn't get floated on purpose--there's no need since
|
2013-08-12 19:02:27 -04:00
|
|
|
// it's full-width.
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
|
2013-09-11 04:32:08 -04:00
|
|
|
@media (min-width: @screen-sm-min) {
|
2013-06-08 17:04:16 -04:00
|
|
|
.container {
|
2013-09-03 18:49:03 -04:00
|
|
|
width: @container-sm;
|
2013-06-08 17:04:16 -04:00
|
|
|
}
|
|
|
|
|
|
2013-06-23 18:05:50 -04:00
|
|
|
.col-sm-1,
|
|
|
|
|
.col-sm-2,
|
|
|
|
|
.col-sm-3,
|
|
|
|
|
.col-sm-4,
|
|
|
|
|
.col-sm-5,
|
|
|
|
|
.col-sm-6,
|
|
|
|
|
.col-sm-7,
|
|
|
|
|
.col-sm-8,
|
|
|
|
|
.col-sm-9,
|
|
|
|
|
.col-sm-10,
|
2013-08-12 19:02:27 -04:00
|
|
|
.col-sm-11 {
|
2013-06-23 18:05:50 -04:00
|
|
|
float: left;
|
|
|
|
|
}
|
2013-06-08 17:04:16 -04:00
|
|
|
.col-sm-1 { width: percentage((1 / @grid-columns)); }
|
|
|
|
|
.col-sm-2 { width: percentage((2 / @grid-columns)); }
|
|
|
|
|
.col-sm-3 { width: percentage((3 / @grid-columns)); }
|
|
|
|
|
.col-sm-4 { width: percentage((4 / @grid-columns)); }
|
|
|
|
|
.col-sm-5 { width: percentage((5 / @grid-columns)); }
|
|
|
|
|
.col-sm-6 { width: percentage((6 / @grid-columns)); }
|
|
|
|
|
.col-sm-7 { width: percentage((7 / @grid-columns)); }
|
|
|
|
|
.col-sm-8 { width: percentage((8 / @grid-columns)); }
|
|
|
|
|
.col-sm-9 { width: percentage((9 / @grid-columns)); }
|
|
|
|
|
.col-sm-10 { width: percentage((10/ @grid-columns)); }
|
|
|
|
|
.col-sm-11 { width: percentage((11/ @grid-columns)); }
|
|
|
|
|
.col-sm-12 { width: 100%; }
|
2013-06-02 16:38:45 -04:00
|
|
|
|
|
|
|
|
// Push and pull columns for source order changes
|
2013-08-01 11:49:16 -04:00
|
|
|
.col-sm-push-1 { left: percentage((1 / @grid-columns)); }
|
|
|
|
|
.col-sm-push-2 { left: percentage((2 / @grid-columns)); }
|
|
|
|
|
.col-sm-push-3 { left: percentage((3 / @grid-columns)); }
|
|
|
|
|
.col-sm-push-4 { left: percentage((4 / @grid-columns)); }
|
|
|
|
|
.col-sm-push-5 { left: percentage((5 / @grid-columns)); }
|
|
|
|
|
.col-sm-push-6 { left: percentage((6 / @grid-columns)); }
|
|
|
|
|
.col-sm-push-7 { left: percentage((7 / @grid-columns)); }
|
|
|
|
|
.col-sm-push-8 { left: percentage((8 / @grid-columns)); }
|
|
|
|
|
.col-sm-push-9 { left: percentage((9 / @grid-columns)); }
|
|
|
|
|
.col-sm-push-10 { left: percentage((10/ @grid-columns)); }
|
|
|
|
|
.col-sm-push-11 { left: percentage((11/ @grid-columns)); }
|
|
|
|
|
|
|
|
|
|
.col-sm-pull-1 { right: percentage((1 / @grid-columns)); }
|
|
|
|
|
.col-sm-pull-2 { right: percentage((2 / @grid-columns)); }
|
|
|
|
|
.col-sm-pull-3 { right: percentage((3 / @grid-columns)); }
|
|
|
|
|
.col-sm-pull-4 { right: percentage((4 / @grid-columns)); }
|
|
|
|
|
.col-sm-pull-5 { right: percentage((5 / @grid-columns)); }
|
|
|
|
|
.col-sm-pull-6 { right: percentage((6 / @grid-columns)); }
|
|
|
|
|
.col-sm-pull-7 { right: percentage((7 / @grid-columns)); }
|
|
|
|
|
.col-sm-pull-8 { right: percentage((8 / @grid-columns)); }
|
|
|
|
|
.col-sm-pull-9 { right: percentage((9 / @grid-columns)); }
|
|
|
|
|
.col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
|
|
|
|
|
.col-sm-pull-11 { right: percentage((11/ @grid-columns)); }
|
|
|
|
|
|
|
|
|
|
// Offsets
|
|
|
|
|
.col-sm-offset-1 { margin-left: percentage((1 / @grid-columns)); }
|
|
|
|
|
.col-sm-offset-2 { margin-left: percentage((2 / @grid-columns)); }
|
|
|
|
|
.col-sm-offset-3 { margin-left: percentage((3 / @grid-columns)); }
|
|
|
|
|
.col-sm-offset-4 { margin-left: percentage((4 / @grid-columns)); }
|
|
|
|
|
.col-sm-offset-5 { margin-left: percentage((5 / @grid-columns)); }
|
|
|
|
|
.col-sm-offset-6 { margin-left: percentage((6 / @grid-columns)); }
|
|
|
|
|
.col-sm-offset-7 { margin-left: percentage((7 / @grid-columns)); }
|
|
|
|
|
.col-sm-offset-8 { margin-left: percentage((8 / @grid-columns)); }
|
|
|
|
|
.col-sm-offset-9 { margin-left: percentage((9 / @grid-columns)); }
|
|
|
|
|
.col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
|
|
|
|
|
.col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
|
2013-06-02 16:38:45 -04:00
|
|
|
}
|
2013-04-02 22:40:43 -04:00
|
|
|
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
|
|
|
|
|
// Medium grid
|
|
|
|
|
//
|
|
|
|
|
// Columns, offsets, pushes, and pulls for the desktop device range.
|
2013-08-12 19:02:27 -04:00
|
|
|
//
|
2013-09-01 04:46:18 -04:00
|
|
|
// Note that `.col-md-12` doesn't get floated on purpose--there's no need since
|
2013-08-12 19:02:27 -04:00
|
|
|
// it's full-width.
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
|
2013-09-11 04:32:08 -04:00
|
|
|
@media (min-width: @screen-md-min) {
|
2013-06-08 17:04:16 -04:00
|
|
|
.container {
|
2013-09-03 18:49:03 -04:00
|
|
|
width: @container-md;
|
2013-06-08 17:04:16 -04:00
|
|
|
}
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
.col-md-1,
|
|
|
|
|
.col-md-2,
|
|
|
|
|
.col-md-3,
|
|
|
|
|
.col-md-4,
|
|
|
|
|
.col-md-5,
|
|
|
|
|
.col-md-6,
|
|
|
|
|
.col-md-7,
|
|
|
|
|
.col-md-8,
|
|
|
|
|
.col-md-9,
|
|
|
|
|
.col-md-10,
|
2013-08-12 19:02:27 -04:00
|
|
|
.col-md-11 {
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
.col-md-1 { width: percentage((1 / @grid-columns)); }
|
|
|
|
|
.col-md-2 { width: percentage((2 / @grid-columns)); }
|
|
|
|
|
.col-md-3 { width: percentage((3 / @grid-columns)); }
|
|
|
|
|
.col-md-4 { width: percentage((4 / @grid-columns)); }
|
|
|
|
|
.col-md-5 { width: percentage((5 / @grid-columns)); }
|
|
|
|
|
.col-md-6 { width: percentage((6 / @grid-columns)); }
|
|
|
|
|
.col-md-7 { width: percentage((7 / @grid-columns)); }
|
|
|
|
|
.col-md-8 { width: percentage((8 / @grid-columns)); }
|
|
|
|
|
.col-md-9 { width: percentage((9 / @grid-columns)); }
|
|
|
|
|
.col-md-10 { width: percentage((10/ @grid-columns)); }
|
|
|
|
|
.col-md-11 { width: percentage((11/ @grid-columns)); }
|
|
|
|
|
.col-md-12 { width: 100%; }
|
|
|
|
|
|
|
|
|
|
// Push and pull columns for source order changes
|
2013-08-15 23:31:11 -04:00
|
|
|
.col-md-push-0 { left: auto; }
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
.col-md-push-1 { left: percentage((1 / @grid-columns)); }
|
|
|
|
|
.col-md-push-2 { left: percentage((2 / @grid-columns)); }
|
|
|
|
|
.col-md-push-3 { left: percentage((3 / @grid-columns)); }
|
|
|
|
|
.col-md-push-4 { left: percentage((4 / @grid-columns)); }
|
|
|
|
|
.col-md-push-5 { left: percentage((5 / @grid-columns)); }
|
|
|
|
|
.col-md-push-6 { left: percentage((6 / @grid-columns)); }
|
|
|
|
|
.col-md-push-7 { left: percentage((7 / @grid-columns)); }
|
|
|
|
|
.col-md-push-8 { left: percentage((8 / @grid-columns)); }
|
|
|
|
|
.col-md-push-9 { left: percentage((9 / @grid-columns)); }
|
|
|
|
|
.col-md-push-10 { left: percentage((10/ @grid-columns)); }
|
|
|
|
|
.col-md-push-11 { left: percentage((11/ @grid-columns)); }
|
|
|
|
|
|
2013-08-15 23:31:11 -04:00
|
|
|
.col-md-pull-0 { right: auto; }
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
.col-md-pull-1 { right: percentage((1 / @grid-columns)); }
|
|
|
|
|
.col-md-pull-2 { right: percentage((2 / @grid-columns)); }
|
|
|
|
|
.col-md-pull-3 { right: percentage((3 / @grid-columns)); }
|
|
|
|
|
.col-md-pull-4 { right: percentage((4 / @grid-columns)); }
|
|
|
|
|
.col-md-pull-5 { right: percentage((5 / @grid-columns)); }
|
|
|
|
|
.col-md-pull-6 { right: percentage((6 / @grid-columns)); }
|
|
|
|
|
.col-md-pull-7 { right: percentage((7 / @grid-columns)); }
|
|
|
|
|
.col-md-pull-8 { right: percentage((8 / @grid-columns)); }
|
|
|
|
|
.col-md-pull-9 { right: percentage((9 / @grid-columns)); }
|
|
|
|
|
.col-md-pull-10 { right: percentage((10/ @grid-columns)); }
|
|
|
|
|
.col-md-pull-11 { right: percentage((11/ @grid-columns)); }
|
|
|
|
|
|
|
|
|
|
// Offsets
|
2013-08-15 23:25:20 -04:00
|
|
|
.col-md-offset-0 { margin-left: 0; }
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
.col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); }
|
|
|
|
|
.col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); }
|
|
|
|
|
.col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); }
|
|
|
|
|
.col-md-offset-4 { margin-left: percentage((4 / @grid-columns)); }
|
|
|
|
|
.col-md-offset-5 { margin-left: percentage((5 / @grid-columns)); }
|
|
|
|
|
.col-md-offset-6 { margin-left: percentage((6 / @grid-columns)); }
|
|
|
|
|
.col-md-offset-7 { margin-left: percentage((7 / @grid-columns)); }
|
|
|
|
|
.col-md-offset-8 { margin-left: percentage((8 / @grid-columns)); }
|
|
|
|
|
.col-md-offset-9 { margin-left: percentage((9 / @grid-columns)); }
|
|
|
|
|
.col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
|
|
|
|
|
.col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Large grid
|
|
|
|
|
//
|
|
|
|
|
// Columns, offsets, pushes, and pulls for the large desktop device range.
|
2013-08-12 19:02:27 -04:00
|
|
|
//
|
2013-09-01 04:46:18 -04:00
|
|
|
// Note that `.col-lg-12` doesn't get floated on purpose--there's no need since
|
2013-08-12 19:02:27 -04:00
|
|
|
// it's full-width.
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
|
2013-08-24 17:00:52 -04:00
|
|
|
@media (min-width: @screen-lg-min) {
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
.container {
|
2013-09-03 18:49:03 -04:00
|
|
|
width: @container-lg;
|
Media query (grid and responsive utilities) overhaul
Grid classes have been changed to account for a fourth set of classes,
meaning we now have XS, S, M, and L options. Specifically, we made the
following changes:
* Renames `.col-` to `.col-xs-`
* Adds `.col-md-` for devices 992px wide and up
* Remaps `.col-lg-` for devices 1200px wide and up
Alongside that, we've updated our media queries to better handle
advanced grid layouts:
* All column classes now kick in when they hit a `min-width`, undoing
the #9128 fix in
https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb
c690f3a65
* All column offsets, pushes, and pulls are scoped to an appropriate
range, meaning a `min-width` and `max-width` (thanks for the idea,
@eratzlaff)
We've also modified the widths of our grid containers for the small
device grid (now a max 720px instead of 728px) and large device grid
(now a max 1140px instead of 1170px) to avoid horizontal scrollbar
problems in Firefox (likely due to box-sizing, which is why we didn't
see it in 2.x).
Similarly, we've updated the responsive ultility classes to match the
new four media query approach of the grid system. That means we've:
* Added new `.visible-xs` and `.hidden-xs` classes
* Reassigns visible and hidden classes for small, medium, and large to
matching grid system media queries
* Updates docs examples to match grid system and account for fourth
utility range
-----
Fixes the following:
* #9135: fourth grid tier
* #9302: undoes previous range change for small grid system, so no need
to update any docs here
* #8755: consistent grid and responsive utilities schemas)
* #9195, #9216, and #9227: no more horizontal scrollbars
2013-08-12 03:28:50 -04:00
|
|
|
}
|
|
|
|
|
|
2013-06-23 18:05:50 -04:00
|
|
|
.col-lg-1,
|
|
|
|
|
.col-lg-2,
|
|
|
|
|
.col-lg-3,
|
|
|
|
|
.col-lg-4,
|
|
|
|
|
.col-lg-5,
|
|
|
|
|
.col-lg-6,
|
|
|
|
|
.col-lg-7,
|
|
|
|
|
.col-lg-8,
|
|
|
|
|
.col-lg-9,
|
|
|
|
|
.col-lg-10,
|
2013-08-12 19:02:27 -04:00
|
|
|
.col-lg-11 {
|
2013-06-23 18:05:50 -04:00
|
|
|
float: left;
|
|
|
|
|
}
|
2013-06-04 00:48:52 -04:00
|
|
|
.col-lg-1 { width: percentage((1 / @grid-columns)); }
|
|
|
|
|
.col-lg-2 { width: percentage((2 / @grid-columns)); }
|
|
|
|
|
.col-lg-3 { width: percentage((3 / @grid-columns)); }
|
|
|
|
|
.col-lg-4 { width: percentage((4 / @grid-columns)); }
|
|
|
|
|
.col-lg-5 { width: percentage((5 / @grid-columns)); }
|
|
|
|
|
.col-lg-6 { width: percentage((6 / @grid-columns)); }
|
|
|
|
|
.col-lg-7 { width: percentage((7 / @grid-columns)); }
|
|
|
|
|
.col-lg-8 { width: percentage((8 / @grid-columns)); }
|
|
|
|
|
.col-lg-9 { width: percentage((9 / @grid-columns)); }
|
|
|
|
|
.col-lg-10 { width: percentage((10/ @grid-columns)); }
|
|
|
|
|
.col-lg-11 { width: percentage((11/ @grid-columns)); }
|
2013-06-04 00:51:35 -04:00
|
|
|
.col-lg-12 { width: 100%; }
|
2013-06-23 18:15:42 -04:00
|
|
|
|
2013-08-01 11:49:16 -04:00
|
|
|
// Push and pull columns for source order changes
|
2013-08-15 23:31:11 -04:00
|
|
|
.col-lg-push-0 { left: auto; }
|
2013-08-01 11:49:16 -04:00
|
|
|
.col-lg-push-1 { left: percentage((1 / @grid-columns)); }
|
|
|
|
|
.col-lg-push-2 { left: percentage((2 / @grid-columns)); }
|
|
|
|
|
.col-lg-push-3 { left: percentage((3 / @grid-columns)); }
|
|
|
|
|
.col-lg-push-4 { left: percentage((4 / @grid-columns)); }
|
|
|
|
|
.col-lg-push-5 { left: percentage((5 / @grid-columns)); }
|
|
|
|
|
.col-lg-push-6 { left: percentage((6 / @grid-columns)); }
|
|
|
|
|
.col-lg-push-7 { left: percentage((7 / @grid-columns)); }
|
|
|
|
|
.col-lg-push-8 { left: percentage((8 / @grid-columns)); }
|
|
|
|
|
.col-lg-push-9 { left: percentage((9 / @grid-columns)); }
|
|
|
|
|
.col-lg-push-10 { left: percentage((10/ @grid-columns)); }
|
|
|
|
|
.col-lg-push-11 { left: percentage((11/ @grid-columns)); }
|
|
|
|
|
|
2013-08-15 23:31:11 -04:00
|
|
|
.col-lg-pull-0 { right: auto; }
|
2013-08-01 11:49:16 -04:00
|
|
|
.col-lg-pull-1 { right: percentage((1 / @grid-columns)); }
|
|
|
|
|
.col-lg-pull-2 { right: percentage((2 / @grid-columns)); }
|
|
|
|
|
.col-lg-pull-3 { right: percentage((3 / @grid-columns)); }
|
|
|
|
|
.col-lg-pull-4 { right: percentage((4 / @grid-columns)); }
|
|
|
|
|
.col-lg-pull-5 { right: percentage((5 / @grid-columns)); }
|
|
|
|
|
.col-lg-pull-6 { right: percentage((6 / @grid-columns)); }
|
|
|
|
|
.col-lg-pull-7 { right: percentage((7 / @grid-columns)); }
|
|
|
|
|
.col-lg-pull-8 { right: percentage((8 / @grid-columns)); }
|
|
|
|
|
.col-lg-pull-9 { right: percentage((9 / @grid-columns)); }
|
|
|
|
|
.col-lg-pull-10 { right: percentage((10/ @grid-columns)); }
|
|
|
|
|
.col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
|
|
|
|
|
|
2013-06-23 18:15:42 -04:00
|
|
|
// Offsets
|
2013-08-15 23:25:20 -04:00
|
|
|
.col-lg-offset-0 { margin-left: 0; }
|
2013-08-01 11:49:16 -04:00
|
|
|
.col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); }
|
|
|
|
|
.col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); }
|
|
|
|
|
.col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); }
|
|
|
|
|
.col-lg-offset-4 { margin-left: percentage((4 / @grid-columns)); }
|
|
|
|
|
.col-lg-offset-5 { margin-left: percentage((5 / @grid-columns)); }
|
|
|
|
|
.col-lg-offset-6 { margin-left: percentage((6 / @grid-columns)); }
|
|
|
|
|
.col-lg-offset-7 { margin-left: percentage((7 / @grid-columns)); }
|
|
|
|
|
.col-lg-offset-8 { margin-left: percentage((8 / @grid-columns)); }
|
|
|
|
|
.col-lg-offset-9 { margin-left: percentage((9 / @grid-columns)); }
|
|
|
|
|
.col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
|
|
|
|
|
.col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
|
2013-06-02 18:33:42 -04:00
|
|
|
}
|