bootstrap/mixins/grid.less

3 // Generate semantic grid columns with these mixins.
14 // Creates a wrapper for a series of columns
21 // Generate the extra small columns
22 .make-xs-column(@columns; @gutter: @grid-gutter-width) {
25   width: percentage((@columns / @grid-columns));
30 .make-xs-column-offset(@columns) {
31   margin-left: percentage((@columns / @grid-columns));
33 .make-xs-column-push(@columns) {
34   left: percentage((@columns / @grid-columns));
36 .make-xs-column-pull(@columns) {
37   right: percentage((@columns / @grid-columns));
40 // Generate the small columns
41 .make-sm-column(@columns; @gutter: @grid-gutter-width) {
49     width: percentage((@columns / @grid-columns));
52 .make-sm-column-offset(@columns) {
54     margin-left: percentage((@columns / @grid-columns));
57 .make-sm-column-push(@columns) {
59     left: percentage((@columns / @grid-columns));
62 .make-sm-column-pull(@columns) {
64     right: percentage((@columns / @grid-columns));
68 // Generate the medium columns
69 .make-md-column(@columns; @gutter: @grid-gutter-width) {
77     width: percentage((@columns / @grid-columns));
80 .make-md-column-offset(@columns) {
82     margin-left: percentage((@columns / @grid-columns));
85 .make-md-column-push(@columns) {
87     left: percentage((@columns / @grid-columns));
90 .make-md-column-pull(@columns) {
92     right: percentage((@columns / @grid-columns));
96 // Generate the large columns
97 .make-lg-column(@columns; @gutter: @grid-gutter-width) {
105     width: percentage((@columns / @grid-columns));
108 .make-lg-column-offset(@columns) {
110     margin-left: percentage((@columns / @grid-columns));
113 .make-lg-column-push(@columns) {
115     left: percentage((@columns / @grid-columns));
118 .make-lg-column-pull(@columns) {
120     right: percentage((@columns / @grid-columns));