Last active
September 30, 2022 01:31
-
-
Save cpruitt/95f96192516229c0293a to your computer and use it in GitHub Desktop.
Bootstrap Grid Extension for 5 Column Rows
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Quick extension to bootstrap grid system to allow for a column | |
to occupy one fifth of a row (i.e. five columns in a row). | |
*/ | |
$col-5th-width: 12 / 5; // 1/5 of 12 = 2.4 | |
// SMALL | |
.col-sm-5th { | |
@include make-sm-column($col-5th-width) | |
} | |
.col-sm-5th-offset-1 { | |
@include make-sm-column-offset($col-5th-width * 1) | |
} | |
.col-sm-5th-offset-2 { | |
@include make-sm-column-offset($col-5th-width * 2) | |
} | |
.col-sm-5th-offset-3 { | |
@include make-sm-column-offset($col-5th-width * 3) | |
} | |
.col-sm-5th-offset-4 { | |
@include make-sm-column-offset($col-5th-width * 4) | |
} | |
.col-sm-5th-offset-5 { | |
@include make-sm-column-offset($col-5th-width * 5) | |
} | |
.col-sm-5th-push-1 { | |
@include make-sm-column-push($col-5th-width * 1) | |
} | |
.col-sm-5th-push-2 { | |
@include make-sm-column-push($col-5th-width * 2) | |
} | |
.col-sm-5th-push-3 { | |
@include make-sm-column-push($col-5th-width * 3) | |
} | |
.col-sm-5th-push-4 { | |
@include make-sm-column-push($col-5th-width * 4) | |
} | |
.col-sm-5th-push-5 { | |
@include make-sm-column-push($col-5th-width * 5) | |
} | |
.col-sm-5th-pull-1 { | |
@include make-sm-column-pull($col-5th-width * 1) | |
} | |
.col-sm-5th-pull-2 { | |
@include make-sm-column-pull($col-5th-width * 2) | |
} | |
.col-sm-5th-pull-3 { | |
@include make-sm-column-pull($col-5th-width * 3) | |
} | |
.col-sm-5th-pull-4 { | |
@include make-sm-column-pull($col-5th-width * 4) | |
} | |
.col-sm-5th-pull-5 { | |
@include make-sm-column-pull($col-5th-width * 5) | |
} | |
// MEDIUM | |
.col-md-5th { | |
@include make-md-column($col-5th-width) | |
} | |
.col-md-5th-offset-1 { | |
@include make-md-column-offset($col-5th-width * 1) | |
} | |
.col-md-5th-offset-2 { | |
@include make-md-column-offset($col-5th-width * 2) | |
} | |
.col-md-5th-offset-3 { | |
@include make-md-column-offset($col-5th-width * 3) | |
} | |
.col-md-5th-offset-4 { | |
@include make-md-column-offset($col-5th-width * 4) | |
} | |
.col-md-5th-offset-5 { | |
@include make-md-column-offset($col-5th-width * 5) | |
} | |
.col-md-5th-push-1 { | |
@include make-md-column-push($col-5th-width * 1) | |
} | |
.col-md-5th-push-2 { | |
@include make-md-column-push($col-5th-width * 2) | |
} | |
.col-md-5th-push-3 { | |
@include make-md-column-push($col-5th-width * 3) | |
} | |
.col-md-5th-push-4 { | |
@include make-md-column-push($col-5th-width * 4) | |
} | |
.col-md-5th-push-5 { | |
@include make-md-column-push($col-5th-width * 5) | |
} | |
.col-md-5th-pull-1 { | |
@include make-md-column-pull($col-5th-width * 1) | |
} | |
.col-md-5th-pull-2 { | |
@include make-md-column-pull($col-5th-width * 2) | |
} | |
.col-md-5th-pull-3 { | |
@include make-md-column-pull($col-5th-width * 3) | |
} | |
.col-md-5th-pull-4 { | |
@include make-md-column-pull($col-5th-width * 4) | |
} | |
.col-md-5th-pull-5 { | |
@include make-md-column-pull($col-5th-width * 5) | |
} | |
// LARGE | |
.col-lg-5th { | |
@include make-lg-column($col-5th-width) | |
} | |
.col-lg-5th-offset-1 { | |
@include make-lg-column-offset($col-5th-width * 1) | |
} | |
.col-lg-5th-offset-2 { | |
@include make-lg-column-offset($col-5th-width * 2) | |
} | |
.col-lg-5th-offset-3 { | |
@include make-lg-column-offset($col-5th-width * 3) | |
} | |
.col-lg-5th-offset-4 { | |
@include make-lg-column-offset($col-5th-width * 4) | |
} | |
.col-lg-5th-offset-5 { | |
@include make-lg-column-offset($col-5th-width * 5) | |
} | |
.col-lg-5th-push-1 { | |
@include make-lg-column-push($col-5th-width * 1) | |
} | |
.col-lg-5th-push-2 { | |
@include make-lg-column-push($col-5th-width * 2) | |
} | |
.col-lg-5th-push-3 { | |
@include make-lg-column-push($col-5th-width * 3) | |
} | |
.col-lg-5th-push-4 { | |
@include make-lg-column-push($col-5th-width * 4) | |
} | |
.col-lg-5th-push-5 { | |
@include make-lg-column-push($col-5th-width * 5) | |
} | |
.col-lg-5th-pull-1 { | |
@include make-lg-column-pull($col-5th-width * 1) | |
} | |
.col-lg-5th-pull-2 { | |
@include make-lg-column-pull($col-5th-width * 2) | |
} | |
.col-lg-5th-pull-3 { | |
@include make-lg-column-pull($col-5th-width * 3) | |
} | |
.col-lg-5th-pull-4 { | |
@include make-lg-column-pull($col-5th-width * 4) | |
} | |
.col-lg-5th-pull-5 { | |
@include make-lg-column-pull($col-5th-width * 5) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment