1 files changed, 80 insertions, 39 deletions

diff --git a/assets/stylesheets/bootstrap/_grid.scss b/assets/stylesheets/bootstrap/_grid.scss
index b15ca27..b71d5b0 100644
--- a/assets/stylesheets/bootstrap/_grid.scss
+++ b/assets/stylesheets/bootstrap/_grid.scss
@@ -1,23 +1,15 @@
-//
-// Grid system
-// --------------------------------------------------
-
-
 // Container widths
 //
 // Set the container width, and override it for fixed navbars in media queries.
 
 .container {
-  @include container-fixed;
+  @include make-container();
 
-  @media (min-width: $screen-sm-min) {
-    width: $container-sm;
-  }
-  @media (min-width: $screen-md-min) {
-    width: $container-md;
-  }
-  @media (min-width: $screen-lg-min) {
-    width: $container-lg;
+  // For each breakpoint, define the maximum width of the container in a media query
+  @each $breakpoint, $container-max-width in $container-max-widths {
+    @include media-breakpoint-up($breakpoint) {
+      max-width: $container-max-width;
+    }
   }
 }
 
@@ -28,7 +20,7 @@
 // width for fluid, full width layouts.
 
 .container-fluid {
-  @include container-fixed;
+  @include make-container();
 }
 
 
@@ -37,7 +29,7 @@
 // Rows contain and clear the floats of your columns.
 
 .row {
-  @include make-row;
+  @include make-row();
 }
 
 
@@ -45,40 +37,89 @@
 //
 // Common styles for small and large grid columns
 
-@include make-grid-columns;
+@include make-grid-columns();
 
 
-// Extra small grid
+// Flex variation
 //
-// Columns, offsets, pushes, and pulls for extra small devices like
-// smartphones.
+// Custom styles for additional flex alignment options.
 
-@include make-grid(xs);
+@if $enable-flex {
 
+  // Flex column reordering
 
-// Small grid
-//
-// Columns, offsets, pushes, and pulls for the small device range, from phones
-// to tablets.
+  .col-xs-first { order: -1; }
+  .col-xs-last { order: 1; }
 
-@media (min-width: $screen-sm-min) {
-  @include make-grid(sm);
-}
+  @include media-breakpoint-up(sm) {
+    .col-sm-first { order: -1; }
+    .col-sm-last { order: 1; }
+  }
+  @include media-breakpoint-up(md) {
+    .col-md-first { order: -1; }
+    .col-md-last { order: 1; }
+  }
+  @include media-breakpoint-up(lg) {
+    .col-lg-first { order: -1; }
+    .col-lg-last { order: 1; }
+  }
+  @include media-breakpoint-up(xl) {
+    .col-xl-first { order: -1; }
+    .col-xl-last { order: 1; }
+  }
 
+  // Alignment for every column in row
 
-// Medium grid
-//
-// Columns, offsets, pushes, and pulls for the desktop device range.
+  .row-xs-top    { align-items: flex-start; }
+  .row-xs-center { align-items: center; }
+  .row-xs-bottom { align-items: flex-end; }
 
-@media (min-width: $screen-md-min) {
-  @include make-grid(md);
-}
+  @include media-breakpoint-up(sm) {
+    .row-sm-top    { align-items: flex-start; }
+    .row-sm-center { align-items: center; }
+    .row-sm-bottom { align-items: flex-end; }
+  }
+  @include media-breakpoint-up(md) {
+    .row-md-top    { align-items: flex-start; }
+    .row-md-center { align-items: center; }
+    .row-md-bottom { align-items: flex-end; }
+  }
+  @include media-breakpoint-up(lg) {
+    .row-lg-top    { align-items: flex-start; }
+    .row-lg-center { align-items: center; }
+    .row-lg-bottom { align-items: flex-end; }
+  }
+  @include media-breakpoint-up(xl) {
+    .row-xl-top    { align-items: flex-start; }
+    .row-xl-center { align-items: center; }
+    .row-xl-bottom { align-items: flex-end; }
+  }
 
+  // Alignment per column
 
-// Large grid
-//
-// Columns, offsets, pushes, and pulls for the large desktop device range.
+  .col-xs-top    { align-self: flex-start; }
+  .col-xs-center { align-self: center; }
+  .col-xs-bottom { align-self: flex-end; }
+
+  @include media-breakpoint-up(sm) {
+    .col-sm-top    { align-self: flex-start; }
+    .col-sm-center { align-self: center; }
+    .col-sm-bottom { align-self: flex-end; }
+  }
+  @include media-breakpoint-up(md) {
+    .col-md-top    { align-self: flex-start; }
+    .col-md-center { align-self: center; }
+    .col-md-bottom { align-self: flex-end; }
+  }
+  @include media-breakpoint-up(lg) {
+    .col-lg-top    { align-self: flex-start; }
+    .col-lg-center { align-self: center; }
+    .col-lg-bottom { align-self: flex-end; }
+  }
+  @include media-breakpoint-up(xl) {
+    .col-xl-top    { align-self: flex-start; }
+    .col-xl-center { align-self: center; }
+    .col-xl-bottom { align-self: flex-end; }
+  }
 
-@media (min-width: $screen-lg-min) {
-  @include make-grid(lg);
 }