diff options
| author | Max | 2017-05-18 14:03:27 +0200 |
|---|---|---|
| committer | Max | 2017-05-18 14:03:27 +0200 |
| commit | f597e2fe949a1e18eb778b9a5bd102de88570555 (patch) | |
| tree | 7e42e6f91dd3e764cd2cf0c4f61f48501c2ed98f /src/sass/bootstrap4/_grid.scss | |
| download | docs.maxmail.xyz-f597e2fe949a1e18eb778b9a5bd102de88570555.tar.gz | |
Diffstat (limited to 'src/sass/bootstrap4/_grid.scss')
| -rw-r--r-- | src/sass/bootstrap4/_grid.scss | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/src/sass/bootstrap4/_grid.scss b/src/sass/bootstrap4/_grid.scss new file mode 100644 index 0000000..a71f3aa --- /dev/null +++ b/src/sass/bootstrap4/_grid.scss @@ -0,0 +1,76 @@ +// Container widths +// +// Set the container width, and override it for fixed navbars in media queries. + +.container { + @include make-container(); + @include make-container-max-widths(); + +} + + +// Fluid container +// +// Utilizes the mixin meant for fixed width containers, but without any defined +// width for fluid, full width layouts. + +.container-fluid { + @include make-container(); +} + + +// Row +// +// Rows contain and clear the floats of your columns. + +@if $enable-grid-classes { + .row { + @include make-row(); + } +} + + +// Columns +// +// Common styles for small and large grid columns + +@if $enable-grid-classes { + @include make-grid-columns(); +} + + +// Flex variation +// +// Custom styles for additional flex alignment options. + +@if $enable-flex and $enable-grid-classes { + + // Flex column reordering + + @each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + .col-#{$breakpoint}-first { order: -1; } + .col-#{$breakpoint}-last { order: 1; } + } + } + + // Alignment for every column in row + + @each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + .row-#{$breakpoint}-top { align-items: flex-start; } + .row-#{$breakpoint}-center { align-items: center; } + .row-#{$breakpoint}-bottom { align-items: flex-end; } + } + } + + // Alignment per column + + @each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + .col-#{$breakpoint}-top { align-self: flex-start; } + .col-#{$breakpoint}-center { align-self: center; } + .col-#{$breakpoint}-bottom { align-self: flex-end; } + } + } +} |
