diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml
index fb2713b9f2e52755febcdfd4ce396f2850148772..1fc97157e21cd1878f58d1c1becab15665796229 100644
--- a/docs/_data/nav.yml
+++ b/docs/_data/nav.yml
@@ -15,6 +15,7 @@
pages:
- title: Overview
- title: Grid
+ - title: Flexbox grid
- title: Media object
- title: Responsive utilities
diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html
index fc47e6f4055e7c2ba6fa42e80d4a4e7f1ecef749..6e8cddf212fdeda0fd933fe4492c334c804d4a55 100644
--- a/docs/_layouts/docs.html
+++ b/docs/_layouts/docs.html
@@ -21,10 +21,10 @@
<div class="container">
<div class="row">
- <div class="col-md-3 col-md-push-9 bd-sidebar">
+ <div class="col-xs-12 col-md-3 push-md-9 bd-sidebar">
{% include nav-docs.html %}
</div>
- <div class="col-md-9 col-md-pull-3 bd-content">
+ <div class="col-xs-12 col-md-9 pull-md-3 bd-content">
<h1 class="bd-title" id="content">{{ page.title }}</h1>
{{ content }}
</div>
diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss
index 2db8f8a2a11eac93fb2083912c1f8fb05c72e334..b952d7517e3b364a1d810d0e00502b00bcbf11ad 100644
--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@@ -5,9 +5,12 @@
//
.bd-example-row {
- .row {
- margin-bottom: 1rem;
+ .row + .row {
+ margin-top: 1rem;
+ }
+ .row {
+ > .col,
> [class^="col-"] {
padding-top: .75rem;
padding-bottom: .75rem;
@@ -15,6 +18,18 @@
border: 1px solid rgba(86,61,124,.2);
}
}
+
+ .flex-items-xs-top,
+ .flex-items-xs-middle,
+ .flex-items-xs-bottom {
+ min-height: 6rem;
+ background-color: rgba(255,0,0,.1);
+ }
+}
+
+.bd-example-row-flex-cols .row {
+ min-height: 10rem;
+ background-color: rgba(255,0,0,.1);
}
diff --git a/docs/examples/blog/index.html b/docs/examples/blog/index.html
index a9f9b78ede3a5c39d789bb6c1feb7ada84af4e8e..d4e9dbcc559d6fc2bb94581d4ff78e417c4c6544 100644
--- a/docs/examples/blog/index.html
+++ b/docs/examples/blog/index.html
@@ -111,7 +111,7 @@
</div><!-- /.blog-main -->
- <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
+ <div class="col-sm-3 offset-sm-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html
index 5e01f8df042f46a8ee0e72158c76810923603768..986c4e8a516dc08a2b5b080b6a2021d277aab14a 100644
--- a/docs/examples/carousel/index.html
+++ b/docs/examples/carousel/index.html
@@ -136,11 +136,11 @@
<hr class="featurette-divider">
<div class="row featurette">
- <div class="col-md-7 col-md-push-5">
+ <div class="col-md-7 push-md-5">
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
- <div class="col-md-5 col-md-pull-7">
+ <div class="col-md-5 pull-md-7">
<img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html
index a86e3ecb9f0aa277f4c420a3e3bb182031362b34..65cc380cbcff75c9cc8b890e3ebae55b9a186136 100644
--- a/docs/examples/dashboard/index.html
+++ b/docs/examples/dashboard/index.html
@@ -63,7 +63,7 @@
<li><a href="">Another nav item</a></li>
</ul>
</div>
- <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
+ <div class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 main">
<h1 class="page-header">Dashboard</h1>
<div class="row placeholders">
diff --git a/docs/examples/grid/index.html b/docs/examples/grid/index.html
index 74b5852f5b8231c19b236b566945f2703cf1c42b..9e831115b40e9e3032d57ba5fe5bf2889db04774 100644
--- a/docs/examples/grid/index.html
+++ b/docs/examples/grid/index.html
@@ -159,11 +159,11 @@
<p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
- <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
+ <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
- <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
+ <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
new file mode 100644
index 0000000000000000000000000000000000000000..6d372a96c47326e7fac2d28db40afb1b14dd47dd
--- /dev/null
+++ b/docs/layout/flexbox-grid.md
@@ -0,0 +1,212 @@
+---
+layout: docs
+title: Flexbox grid system
+group: layout
+---
+
+Fancy a more modern grid system? [Enable flexbox support in Bootstrap](/getting-started/flexbox) to take full advantage of CSS's Flexible Box module for even more control over your site's layout, alignment, and distribution of content.
+
+Bootstrap's flexbox grid includes support for every feature from our [default grid system](/layout/grid), and then some. Please read the [default grid system docs](/layout/grid) before proceeding through this page. Features that are covered there are only summarized here. Please note that **Internet Explorer 9 does not support flexbox**, so proceed with caution when enabling it.
+
+{% callout warning %}
+**Heads up!** The flexbox grid documentation is only functional when flexbox support is explicitly enabled.
+{% endcallout %}
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+## How it works
+
+The flexbox grid system behaves similar to our default grid system, but with a few notable differences:
+
+- [Grid mixins](/layout/grid#sass-mixins) and [predefined classes](/layout/grid#predefined-classes) include support for flexbox. Just [enable flexbox support](/getting-started/flexbox) to utilize them as you would otherwise.
+- Nesting, offsets, pushes, and pulls are all supported in the flexbox grid system.
+- Flexbox grid columns without a set width will automatically layout with equal widths. For example, four columns will each automatically be 25% wide.
+- Flexbox grid columns have significantly more alignment options available, including vertical alignment.
+- Unlike the default grid system where a grid column starts as full-width in the `xs` tier, flexbox requires a `.col-{breakpoint}` class for each tier.
+
+Chill? Awesome—keep reading for more information and some code snippets.
+
+## Auto-layout columns
+
+When flexbox support is enabled, you can utilize breakpoint-specific column classes for equal-width columns. Add any number of `.col-{breakpoint}`s for each breakpoint you need and you're good to go. For example, here's are two grid layouts that apply to every device and viewport possible.
+
+<div class="bd-example-row">
+{% example html %}
+<div class="container">
+ <div class="row">
+ <div class="col-xs">
+ 1 of 2
+ </div>
+ <div class="col-xs">
+ 1 of 2
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-xs">
+ 1 of 3
+ </div>
+ <div class="col-xs">
+ 1 of 3
+ </div>
+ <div class="col-xs">
+ 1 of 3
+ </div>
+ </div>
+</div>
+{% endexample %}
+</div>
+
+Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths.
+
+<div class="bd-example-row">
+{% example html %}
+<div class="container">
+ <div class="row">
+ <div class="col-xs">
+ 1 of 3
+ </div>
+ <div class="col-xs-6">
+ 2 of 3 (wider)
+ </div>
+ <div class="col-xs">
+ 3 of 3
+ </div>
+ </div>
+</div>
+{% endexample %}
+</div>
+
+## Responsive flexbox
+
+Unlike the default grid system, the flexbox grid requires a class for full-width columns. If you have a `.col-sm-6` and don't add `.col-xs-12`, your `xs` grid will not render correctly. Note that flexbox grid tiers still scale up across breakpoints, so if you want two 50% wide columns across `sm`, `md`, and `lg`, you only need to set `.col-sm-6`.
+
+<div class="bd-example-row">
+{% example html %}
+<div class="container">
+ <div class="row">
+ <div class="col-xs-12 col-sm-6">
+ 1 of 2 (stacked on mobile)
+ </div>
+ <div class="col-xs-12 col-sm-6">
+ 1 of 2 (stacked on mobile)
+ </div>
+ </div>
+</div>
+{% endexample %}
+</div>
+
+## Vertical alignment
+
+Use the flexbox alignment utilities to vertically align columns.
+
+<div class="bd-example-row">
+{% example html %}
+<div class="container">
+ <div class="row flex-items-xs-top">
+ <div class="col-xs">
+ One of three columns
+ </div>
+ <div class="col-xs">
+ One of three columns
+ </div>
+ <div class="col-xs">
+ One of three columns
+ </div>
+ </div>
+ <div class="row flex-items-xs-middle">
+ <div class="col-xs">
+ One of three columns
+ </div>
+ <div class="col-xs">
+ One of three columns
+ </div>
+ <div class="col-xs">
+ One of three columns
+ </div>
+ </div>
+ <div class="row flex-items-xs-bottom">
+ <div class="col-xs">
+ One of three columns
+ </div>
+ <div class="col-xs">
+ One of three columns
+ </div>
+ <div class="col-xs">
+ One of three columns
+ </div>
+ </div>
+</div>
+{% endexample %}
+</div>
+
+<div class="bd-example-row bd-example-row-flex-cols">
+{% example html %}
+<div class="container">
+ <div class="row">
+ <div class="col-xs flex-xs-top">
+ One of three columns
+ </div>
+ <div class="col-xs flex-xs-middle">
+ One of three columns
+ </div>
+ <div class="col-xs flex-xs-bottom">
+ One of three columns
+ </div>
+ </div>
+</div>
+{% endexample %}
+</div>
+
+## Horizontal alignment
+
+Flexbox utilities for horizontal alignment also exist for a number of layout options.
+
+<div class="bd-example-row">
+{% example html %}
+<div class="container">
+ <div class="row flex-items-xs-left">
+ <div class="col-xs-4">
+ One of two columns
+ </div>
+ <div class="col-xs-4">
+ One of two columns
+ </div>
+ </div>
+ <div class="row flex-items-xs-center">
+ <div class="col-xs-4">
+ One of two columns
+ </div>
+ <div class="col-xs-4">
+ One of two columns
+ </div>
+ </div>
+ <div class="row flex-items-xs-right">
+ <div class="col-xs-4">
+ One of two columns
+ </div>
+ <div class="col-xs-4">
+ One of two columns
+ </div>
+ </div>
+ <div class="row flex-items-xs-around">
+ <div class="col-xs-4">
+ One of two columns
+ </div>
+ <div class="col-xs-4">
+ One of two columns
+ </div>
+ </div>
+ <div class="row flex-items-xs-between">
+ <div class="col-xs-4">
+ One of two columns
+ </div>
+ <div class="col-xs-4">
+ One of two columns
+ </div>
+ </div>
+</div>
+{% endexample %}
+</div>
diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index f2427137f15d5934de523710d8356a8f27861790..3a76a651b6846eaae6122e1739ab2122db9ae7aa 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -52,8 +52,7 @@ The above example creates three equal-width columns on small, medium, large, and
## Grid options
-While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for grid breakpoints and container widths.
-This is because the viewport width is in pixels and does not change with the [font size](https://drafts.csswg.org/mediaqueries-3/#units).
+While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the [font size](https://drafts.csswg.org/mediaqueries-3/#units).
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
@@ -136,9 +135,12 @@ When using Bootstrap's source Sass files, you have the option of using Sass vari
### Variables
-Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
+Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
{% highlight scss %}
+$grid-columns: 12;
+$grid-gutter-width: 15px;
+
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
@@ -152,9 +154,12 @@ $grid-breakpoints: (
xl: 1200px
);
-
-$grid-columns: 12;
-$grid-gutter-width: 1.875rem;
+$container-max-widths: (
+ sm: 576px,
+ md: 720px,
+ lg: 940px,
+ xl: 1140px
+) !default;
{% endhighlight %}
### Mixins
@@ -263,36 +268,36 @@ In addition to our semantic mixins, Bootstrap includes an extensive set of prebu
### Example: Stacked-to-horizontal
-Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any `.row`.
+Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns with the `.col` base class and a modifier within any `.row`.
<div class="bd-example-row">
{% example html %}
<div class="row">
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
- <div class="col-md-1">.col-md-1</div>
+ <div class="col-md-1">md-1</div>
+ <div class="col-md-1">md-1</div>
+ <div class="col-md-1">md-1</div>
+ <div class="col-md-1">md-1</div>
+ <div class="col-md-1">md-1</div>
+ <div class="col-md-1">md-1</div>
+ <div class="col-md-1">md-1</div>
+ <div class="col-md-1">md-1</div>
+ <div class="col-md-1">md-1</div>
+ <div class="col-md-1">md-1</div>
+ <div class="col-md-1">md-1</div>
+ <div class="col-md-1">md-1</div>
</div>
<div class="row">
- <div class="col-md-8">.col-md-8</div>
- <div class="col-md-4">.col-md-4</div>
+ <div class="col-md-8">md-8</div>
+ <div class="col-md-4">md-4</div>
</div>
<div class="row">
- <div class="col-md-4">.col-md-4</div>
- <div class="col-md-4">.col-md-4</div>
- <div class="col-md-4">.col-md-4</div>
+ <div class="col-md-4">md-4</div>
+ <div class="col-md-4">md-4</div>
+ <div class="col-md-4">md-4</div>
</div>
<div class="row">
- <div class="col-md-6">.col-md-6</div>
- <div class="col-md-6">.col-md-6</div>
+ <div class="col-md-6">md-6</div>
+ <div class="col-md-6">md-6</div>
</div>
{% endexample %}
</div>
@@ -383,32 +388,32 @@ In addition to column clearing at responsive breakpoints, you may need to **rese
{% example html %}
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
- <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
+ <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
- <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
- <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
+ <div class="col-sm-6 col-md-5 col-lg-6">.col.col-sm-6.col-md-5.col-lg-6</div>
+ <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
{% endexample %}
</div>
### Example: Offsetting columns
-Move columns to the right using `.col-md-offset-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.col-md-offset-4` moves `.col-md-4` over four columns.
+Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns.
<div class="bd-example-row">
{% example html %}
<div class="row">
<div class="col-md-4">.col-md-4</div>
- <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
+ <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
- <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
- <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+ <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
+ <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
- <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
+ <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
{% endexample %}
</div>
@@ -442,8 +447,30 @@ Easily change the order of our built-in grid columns with `.col-md-push-*` and `
<div class="bd-example-row">
{% example html %}
<div class="row">
- <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
- <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
+ <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
+ <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>
{% endexample %}
</div>
+
+## Customizing the grid
+
+Using our built-in grid Sass variables and maps, it's possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.
+
+For example, if you wanted just three grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this:
+
+{% highlight scss %}
+$grid-breakpoints: (
+ sm: 480px,
+ md: 768px,
+ lg: 1024px
+);
+
+$container-max-widths: (
+ sm: 420px,
+ md: 720px,
+ lg: 940px
+) !default;
+{% endhighlight %}
+
+Save your changes and recompile to have a brand new set of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities will also be updated to use the custom breakpoints.
diff --git a/docs/migration.md b/docs/migration.md
index beb3ff5819a2d1f254b4b6648042c3d4d2c6389b..acab25c020d2f3be160135eb064254cebe933726 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -22,11 +22,21 @@ Here are the big ticket items you'll want to be aware of when moving from v3 to
### Global changes
- Switched from [Less](http://lesscss.org/) to [Sass](http://sass-lang.com/) for our source CSS files.
-- Switched from `px` to `rem` as our primary CSS unit, though pixels are still used for media queries and more as viewports are not affected by type size.
+- Switched from `px` to `rem` as our primary CSS unit, though pixels are still used for media queries and grid behavior as viewports are not affected by type size.
- Global font-size increased from `14px` to `16px`.
- Added a new grid tier for ~`480px` and below.
- Replaced the separate optional theme with configurable options via SCSS variables (e.g., `$enable-gradients: true`).
+### Grid system
+
+- Added support for flexbox (set `$enable-flex: true` and recompile) in the grid mixins and predefined classes.
+- As part of flexbox, included support for vertical and horizontal alignment classes.
+- Overhauled grid mixins to merge `make-col-span` into `make-col` for a singular mixin.
+- Added a new `sm` grid tier below `768px` for more granular control. We now have `xs`, `sm`, `md`, `lg`, and `xl`. This also means every tier has been bumped up one level (so `.col-md-6` in v3 is now `.col-lg-6` in v4).
+- Changed grid system media query breakpoints and container widths to account for new grid tier and ensure columns are evenly divisible by `12` at their max width.
+- Grid breakpoints and container widths are now handled via Sass maps instead of a handful of separate variables. These replace the `@screen-*` variables entirely and allow you to fully customize the grid tiers.
+- Media queries have also changed. Instead of repeating our media query declarations with the same value each time, we now have `@include media-breakpoint-up/down/only`. Now, instead of writing `@media (min-width: @screen-sm-min) { ... }`, you can write `@include media-breakpoint-up(sm) { ... }`.
+
### Components
- Dropped panels, thumbnails, and wells for a new all-encompassing component, cards.
diff --git a/scss/_grid.scss b/scss/_grid.scss
index 8adcb77162a66d4ff3551cd258d60eca72d16cea..24cf74dda8037beedbabcdea49cc5349950cc97b 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -30,7 +30,6 @@
}
}
-
// Columns
//
// Common styles for small and large grid columns
@@ -38,40 +37,3 @@
@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; }
- }
- }
-}
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index c0df1222fa39fb7a20f2233240c5f4d8823360da..ac703bc467afe3b64b9a04bf12d30d6f51ee5a07 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -6,3 +6,4 @@
@import "utilities/spacing";
@import "utilities/text";
@import "utilities/visibility";
+@import "utilities/flex";
diff --git a/scss/_variables.scss b/scss/_variables.scss
index b891156b28f147c4bb179b981d627962a0746a78..1439d42f98fea873373e2635701cfe440418ab93 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -130,7 +130,7 @@ $container-max-widths: (
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
-$grid-gutter-width: 1.875rem !default; // 30px
+$grid-gutter-width: 15px !default; // 30px
// Typography
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 16c970a81c0e5ab04710bc3e6794e120c7d36b9b..15d1e6bdf86516efc814e9e0fd4eaffba6628e44 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -4,47 +4,40 @@
// any value of `$grid-columns`.
@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
- // Common properties for all breakpoints
- %grid-column {
- position: relative;
- // Prevent columns from collapsing when empty
- min-height: 1px;
- // Inner gutter via padding
- padding-left: ($gutter / 2);
- padding-right: ($gutter / 2);
- }
$breakpoint-counter: 0;
@each $breakpoint in map-keys($breakpoints) {
$breakpoint-counter: ($breakpoint-counter + 1);
- @for $i from 1 through $columns {
- .col-#{$breakpoint}-#{$i} {
- @extend %grid-column;
- }
- }
@include media-breakpoint-up($breakpoint, $breakpoints) {
- // Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
- %grid-column-float-#{$breakpoint} {
- float: left;
+ @if $enable-flex {
+ .col-#{$breakpoint} {
+ position: relative;
+ flex-basis: 0;
+ flex-grow: 1;
+ max-width: 100%;
+ min-height: 1px;
+ padding-right: ($grid-gutter-width / 2);
+ padding-left: ($grid-gutter-width / 2);
+ }
}
+
@for $i from 1 through $columns {
.col-#{$breakpoint}-#{$i} {
- @if not $enable-flex {
- @extend %grid-column-float-#{$breakpoint};
- }
- @include make-col-span($i, $columns);
+ @include make-col($i, $columns);
}
}
+
@each $modifier in (pull, push) {
@for $i from 0 through $columns {
- .col-#{$breakpoint}-#{$modifier}-#{$i} {
+ .#{$modifier}-#{$breakpoint}-#{$i} {
@include make-col-modifier($modifier, $i, $columns)
}
}
}
+
// `$columns - 1` because offsetting by the width of an entire row isn't possible
@for $i from 0 through ($columns - 1) {
@if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .col-xs-offset-0
- .col-#{$breakpoint}-offset-#{$i} {
+ .offset-#{$breakpoint}-#{$i} {
@include make-col-modifier(offset, $i, $columns)
}
}
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 230dacc547c5225c13a24ceb91be90a814d65afd..6e67f92cd39cf5ab286c2f160e047fa14191259a 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -33,17 +33,12 @@
margin-right: ($gutter / -2);
}
-@mixin make-col($gutter: $grid-gutter-width) {
+@mixin make-col($size, $columns: $grid-columns) {
position: relative;
- @if not $enable-flex {
- float: left;
- }
min-height: 1px;
- padding-left: ($gutter / 2);
- padding-right: ($gutter / 2);
-}
+ padding-right: ($grid-gutter-width / 2);
+ padding-left: ($grid-gutter-width / 2);
-@mixin make-col-span($size, $columns: $grid-columns) {
@if $enable-flex {
flex: 0 0 percentage($size / $columns);
// Add a `max-width` to ensure content within each column does not blow out
@@ -51,6 +46,7 @@
// do not appear to require this.
max-width: percentage($size / $columns);
} @else {
+ float: left;
width: percentage($size / $columns);
}
}
diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fe91ac1212c32c8d650e982e46b5d206cea65b08
--- /dev/null
+++ b/scss/utilities/_flex.scss
@@ -0,0 +1,36 @@
+// Flex variation
+//
+// Custom styles for additional flex alignment options.
+
+@if $enable-flex and $enable-grid-classes {
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ // Flex column reordering
+ @include media-breakpoint-up($breakpoint) {
+ .flex-#{$breakpoint}-first { order: -1; }
+ .flex-#{$breakpoint}-last { order: 1; }
+ }
+
+ // Alignment for every item
+ @include media-breakpoint-up($breakpoint) {
+ .flex-items-#{$breakpoint}-top { align-items: flex-start; }
+ .flex-items-#{$breakpoint}-middle { align-items: center; }
+ .flex-items-#{$breakpoint}-bottom { align-items: flex-end; }
+ }
+
+ // Alignment per item
+ @include media-breakpoint-up($breakpoint) {
+ .flex-#{$breakpoint}-top { align-self: flex-start; }
+ .flex-#{$breakpoint}-middle { align-self: center; }
+ .flex-#{$breakpoint}-bottom { align-self: flex-end; }
+ }
+
+ // Horizontal alignment of item
+ @include media-breakpoint-up($breakpoint) {
+ .flex-items-#{$breakpoint}-left { justify-content: flex-start; }
+ .flex-items-#{$breakpoint}-center { justify-content: center; }
+ .flex-items-#{$breakpoint}-right { justify-content: flex-end; }
+ .flex-items-#{$breakpoint}-around { justify-content: space-around; }
+ .flex-items-#{$breakpoint}-between { justify-content: space-between; }
+ }
+ }
+}