Flexbox all the time (Drop IE9 support and remove $enable-flex option) (#21389)

* remove the $enable-flex variable option

* remove bootstrap-flex.css dist file and it's grunt task

* remove the separate flex css file for docs; it's all the same now

* remove flexbox docs (porting some to the main grid docs in next commit)

* clean up few grid docs bits to simplify copy, start to mention flexbox

* port relevant flexbox-grid.md content to grid.md

- clean up mixins
- update how it works section
- bring over sizing and alignment sections

* remove the $enable-flex from the options.md page

* update lead paragraph to mention flexbox

* update migration to mention loss of ie9 support

* remove mention of flexbox dist file

* clarify IE support

* making a note

* remove flexbox variant mentions from component docs

- updates docs for media object, navs, list group, and cards to consolidate docs
- no more need to callout flexbox variants since it's now the default

* remove $enable-flex if/else from sass files

* remove flex dist files

* update scss lint property order to account for flex properties

* linting

* change to numberless classes for autosizing, wrap in highlighting div

* bump gruntfile and postcss to ie10

* redo intro sections

* rearrange

* phew, redo hella grid docs

- rearrange all the things
- consolidate some bits

* remove reference to flexbox mode

* more border action for demo

* Make some changes to the .card's in .card-deck's to ensure footers align to the bottom

Gruntfile.js

@@ -163,7 +163,7 @@ module.exports = function (grunt) {
 
     cssmin: {
       options: {
-        compatibility: 'ie9,-properties.zeroUnits',
+        compatibility: 'ie10,-properties.zeroUnits',
         sourceMap: true,
         // sourceMapInlineSources: true,
         advanced: false

docs/_data/nav.yml

@@ -6,7 +6,6 @@
     - title: Browsers & devices
     - title: JavaScript
     - title: Options
-    - title: Flexbox
     - title: Build tools
     - title: Best practices
     - title: Accessibility
@@ -15,7 +14,6 @@
   pages:
     - title: Overview
     - title: Grid
-    - title: Flexbox grid
     - title: Media object
     - title: Responsive utilities
 

docs/_includes/header.html

@@ -15,9 +15,6 @@
 <!-- Bootstrap core CSS -->
 {% if site.github %}
   <link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
-  {% if page.title == "Flexbox grid system" %}
-    <link href="{{ site.baseurl }}/assets/css/docs-flexbox.min.css" rel="stylesheet">
-  {% endif %}
 {% else %}
   <link href="{{ site.baseurl }}/dist/css/bootstrap.css" rel="stylesheet">
 {% endif %}

docs/assets/css/docs-flexbox.min.css

@@ -380,8 +380,8 @@
 
 .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
   position: relative;
-  min-height: 1px;
   width: 100%;
+  min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
 }

docs/assets/scss/_component-examples.scss

@@ -27,6 +27,17 @@
   }
 }
 
+.bd-example-row-intro {
+  .container {
+    padding: 1px;
+    border: 1px solid rgba($red,.5);
+  }
+  .row {
+    padding: 1px;
+    border: 1px solid rgba($blue,.5);
+  }
+}
+
 .bd-example-row-flex-cols .row {
   min-height: 10rem;
   background-color: rgba(255,0,0,.1);

docs/components/card.md

@@ -435,7 +435,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
 
 ## Groups
 
-Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/) can switch that to use `display: flex;` and provide the same effect.
+Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use `display: flex;` to achieve their uniform sizing.
 
 Only applies to small devices and above.
 
@@ -474,34 +474,30 @@ Need a set of equal width and height cards that aren't attached to one another?
 
 Only applies to small devices and above.
 
-**ProTip!** If you enable [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), you can remove the `.card-deck-wrapper`.
-
 {% example html %}
-<div class="card-deck-wrapper">
-  <div class="card-deck">
-    <div class="card">
-      <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
-      <div class="card-block">
-        <h4 class="card-title">Card title</h4>
-        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-      </div>
+<div class="card-deck">
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
+    <div class="card-block">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
-    <div class="card">
-      <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
-      <div class="card-block">
-        <h4 class="card-title">Card title</h4>
-        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
-        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-      </div>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
+    <div class="card-block">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
-    <div class="card">
-      <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
-      <div class="card-block">
-        <h4 class="card-title">Card title</h4>
-        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
-        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-      </div>
+  </div>
+  <div class="card">
+    <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
+    <div class="card-block">
+      <h4 class="card-title">Card title</h4>
+      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
     </div>
   </div>
 </div>
@@ -513,8 +509,6 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
 
 Only applies to small devices and above.
 
-**Heads up!** This is **not available in IE9 and below** as they have no support for the [`column-*` CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts).
-
 {% example html %}
 <div class="card-columns">
   <div class="card">

docs/components/list-group.md

@@ -27,26 +27,7 @@ The most basic list group is simply an unordered list with list items, and the p
 
 ## Badge
 
-Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Below we use `.float-right` and `.mt-1` to align the badge to this example's specific needs, but you may need different or additional utilities.
-
-{% example html %}
-<ul class="list-group">
-  <li class="list-group-item">
-    <span class="badge badge-default badge-pill float-right mt-1">14</span>
-    Cras justo odio
-  </li>
-  <li class="list-group-item">
-    <span class="badge badge-default badge-pill float-right mt-1">2</span>
-    Dapibus ac facilisis in
-  </li>
-  <li class="list-group-item">
-    <span class="badge badge-default badge-pill float-right mt-1">1</span>
-    Morbi leo risus
-  </li>
-</ul>
-{% endexample %}
-
-When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float and margin utilities on the badges.
+Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/grid/#horizontal-alignment), the badge's placement, and the lack of a float and margin utilities on the badges.
 
 {% highlight html %}
 <ul class="list-group">

docs/components/navs.md

@@ -212,11 +212,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 </ul>
 {% endexample %}
 
-## Flexbox variations
-
-When in [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), tabbed and pilled navigation components gain access to additional nav styles. **These aren't available in default Bootstrap** due to a bug in table styles and responsive behavior.
-
-### Justified nav
+## Justified nav
 
 Create equal-width links in a navigation component by adding `.nav-justified` to a `.nav` component. This works with the inline, tab, and pill variants.
 
@@ -277,9 +273,9 @@ And pills, too:
 </ul>
 {% endexample %}
 
-### Centered nav
+## Centered nav
 
-Using our [flexbox utilities]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), you can also customize your navigation components to change the alignment of nav items. For example, here are center aligned links on the inline nav component.
+Using our [flexbox utilities]({{ site.baseurl }}/layout/grid/#horizontal-alignment), you can also customize your navigation components to change the alignment of nav items. For example, here are center aligned links on the inline nav component.
 
 {% example html %}
 <ul class="nav nav-inline d-flex flex-items-center">

docs/dist/css/bootstrap-flex.css

@@ -905,8 +905,8 @@ pre code {
 
 .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
   position: relative;
-  min-height: 1px;
   width: 100%;
+  min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
 }
@@ -2640,11 +2640,11 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
     margin-left: 0;
   }
   .form-inline .custom-control {
-    padding-left: 0;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
+    padding-left: 0;
     -webkit-box-align: center;
     -webkit-align-items: center;
         -ms-flex-align: center;
@@ -3672,11 +3672,11 @@ tbody.collapse.show {
 
 .input-group {
   position: relative;
-  width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 100%;
 }
 
 .input-group .form-control {
@@ -5437,6 +5437,7 @@ base::-moz-progress-bar,
 }
 
 .list-group-item {
+  position: relative;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5448,7 +5449,6 @@ base::-moz-progress-bar,
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  position: relative;
   padding: 0.75rem 1.25rem;
   margin-bottom: -1px;
   background-color: #fff;

docs/getting-started/best-practices.md

@@ -15,4 +15,5 @@ We've designed and developed Bootstrap to work in a number of environments. Here
 - Working with CSS
 - Working with Sass files
 - Building new CSS components
+- Working with flexbox
 - Ask in [Slack](https://bootstrap-slack.herokuapp.com/)

docs/getting-started/browsers-devices.md

@@ -94,7 +94,7 @@ Similarly, the latest versions of most desktop browsers are supported.
         <th scope="row">Windows</th>
         <td class="text-success">Supported</td>
         <td class="text-success">Supported</td>
-        <td class="text-success">Supported</td>
+        <td class="text-success">Supported, IE10+</td>
         <td class="text-success">Supported</td>
         <td class="text-success">Supported</td>
         <td class="text-danger">Not supported</td>
@@ -109,9 +109,9 @@ Unofficially, Bootstrap should look and behave well enough in Chromium and Chrom
 
 For a list of some of the browser bugs that Bootstrap has to grapple with, see our [Wall of browser bugs]({{ site.baseurl }}/browser-bugs/).
 
-## Internet Explorer 9 & 10
+## Internet Explorer
 
-Internet Explorer 9 & 10 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported.
+Internet Explorer 10+ is supported, however, IE9 down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported.
 
 <div class="table-responsive">
   <table class="table table-bordered table-striped">
@@ -144,11 +144,11 @@ Internet Explorer 9 & 10 are also supported, however, please be aware that some
 
 Visit [Can I use...](http://caniuse.com/) for details on browser support of CSS3 and HTML5 features.
 
-## Supporting Internet Explorer 8
+## Supporting Internet Explorer 8-9
 
-As of v4, Bootstrap no longer supports IE8. **If you require IE8 support, we recommend you use Bootstrap 3.** It's still supported by our team for bugfixes and documentation changes, but no new features will be added to it.
+As of v4, Bootstrap no longer supports IE8 or IE9. **If you require IE8-9 support, we recommend you use Bootstrap 3.** It's still supported by our team for bugfixes and documentation changes, but no new features will be added to it.
 
-Alternatively, you may add some third party JavaScript to backfill support for IE8 to Bootstrap 4. You'll need the following:
+Alternatively, you may add some third party JavaScript to backfill support for IE8-9 to Bootstrap 4. You'll need the following:
 
 * [The HTML5 shiv](https://en.wikipedia.org/wiki/HTML5_Shiv)
 * [Respond.js](https://github.com/scottjehl/Respond)

docs/getting-started/download.md

@@ -14,7 +14,7 @@ group: getting-started
 
 ## Bootstrap CSS and JS
 
-**Download Bootstrap's ready-to-use code to easily drop into your project.** Includes compiled and minified versions of all our CSS bundles (default, flexbox-enabled, grid only, or Reboot only) and JavaScript plugins. Doesn't include documentation or source files.
+**Download Bootstrap's ready-to-use code to easily drop into your project.** Includes compiled and minified versions of all our CSS bundles (default, grid only, or Reboot only) and JavaScript plugins. Doesn't include documentation or source files.
 
 <a href="{{ site.download.dist }}" class="btn btn-lg btn-bs" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download Bootstrap</a>