Skip to content

Instantly share code, notes, and snippets.

@cpruitt
Last active September 30, 2022 01:31
Show Gist options
  • Save cpruitt/95f96192516229c0293a to your computer and use it in GitHub Desktop.
Save cpruitt/95f96192516229c0293a to your computer and use it in GitHub Desktop.
Bootstrap Grid Extension for 5 Column Rows
/*
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