diff --git a/docs/components/forms.md b/docs/components/forms.md
index 2a2e9f9d23..00b7dc2507 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -172,80 +172,80 @@ Here are examples of `.form-control` applied to each textual HTML5 `` `ty
{% example html %}
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
@@ -630,14 +630,14 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des
{% example html %}
-
-
+
+
-
-
+
+
-
-
+
+
{% endexample %}
diff --git a/docs/components/modal.md b/docs/components/modal.md
index 72cdbe5658..9c37461163 100644
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@@ -286,11 +286,11 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
Level 1: .col-sm-9
-
- Level 2: .col-xs-8 .col-sm-6
+
+ Level 2: .col-8 .col-sm-6
-
- Level 2: .col-xs-4 .col-sm-6
+
+ Level 2: .col-4 .col-sm-6
diff --git a/docs/content/tables.md b/docs/content/tables.md
index 0e40c0ef7a..b927f35d57 100644
--- a/docs/content/tables.md
+++ b/docs/content/tables.md
@@ -445,8 +445,8 @@ Use contextual classes to color table rows or individual cells.
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.
-
.col-xs-4
-
.col-xs-4
-
.col-xs-4
+
.col-4
+
.col-4
+
.col-4
@@ -105,17 +105,17 @@
The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
-
.col-xs-12 .col-md-8
-
.col-xs-6 .col-md-4
+
.col-12 .col-md-8
+
.col-6 .col-md-4
-
.col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
.col-6 .col-md-4
-
.col-xs-6
-
.col-xs-6
+
.col-6
+
.col-6
@@ -123,13 +123,13 @@
Mixed: mobile, tablet, and desktop
-
.col-xs-12 .col-sm-6 .col-lg-8
-
.col-xs-6 .col-lg-4
+
.col-12 .col-sm-6 .col-lg-8
+
.col-6 .col-lg-4
-
.col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
@@ -137,18 +137,18 @@
Column clearing
Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.
-
- .col-xs-6 .col-sm-3
+
+ .col-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
-
.col-xs-6 .col-sm-3
+
.col-6 .col-sm-3
-
.col-xs-6 .col-sm-3
-
.col-xs-6 .col-sm-3
+
.col-6 .col-sm-3
+
.col-6 .col-sm-3
diff --git a/docs/examples/index.md b/docs/examples/index.md
index 49e43793a1..b9c6dd6f1b 100644
--- a/docs/examples/index.md
+++ b/docs/examples/index.md
@@ -10,14 +10,14 @@ title: Examples
Examples that focus on implementing uses of built-in components provided by Bootstrap.
-
+
Starter template
Nothing but the basics: compiled CSS and JavaScript.
-
+
@@ -26,14 +26,14 @@ Examples that focus on implementing uses of built-in components provided by Boot
-
+
Jumbotron
Build around the jumbotron with a navbar and some basic grid columns.
-
+
@@ -47,14 +47,14 @@ Examples that focus on implementing uses of built-in components provided by Boot
Taking the default navbar component and showing how it can be moved, placed, and extended.
-
+
Navbar
Super basic template that includes the navbar along with some additional content.
-
+
@@ -63,7 +63,7 @@ Taking the default navbar component and showing how it can be moved, placed, and
-
+
@@ -77,14 +77,14 @@ Taking the default navbar component and showing how it can be moved, placed, and
Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.
-
+
Album
Simple one-page template for photo galleries, portfolios, and more.
-
+
@@ -93,14 +93,14 @@ Brand new components and templates to help folks quickly get started with Bootst
-
+
Carousel
Customize the navbar and carousel, then add some new components.
-
+
@@ -109,14 +109,14 @@ Brand new components and templates to help folks quickly get started with Bootst
-
+
Dashboard
Basic admin dashboard shell with fixed sidebar and navbar.
-
+
@@ -125,14 +125,14 @@ Brand new components and templates to help folks quickly get started with Bootst
-
+
Justified nav
Create a custom navbar with justified links. Heads up! Not too Safari friendly.
-
+
@@ -141,7 +141,7 @@ Brand new components and templates to help folks quickly get started with Bootst
-
+
@@ -155,7 +155,7 @@ Brand new components and templates to help folks quickly get started with Bootst
Examples that focus on future-friendly features or techniques.
This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.
-
+
Heading
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
LinkLink
diff --git a/docs/index.html b/docs/index.html
index 3fe4c513bf..b26b239f54 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -96,7 +96,7 @@ layout: home
{% for showcase in site.data.showcase %}
-
+
diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index a26314cd6b..eafe7b59c5 100644
--- a/docs/layout/flexbox-grid.md
+++ b/docs/layout/flexbox-grid.md
@@ -76,7 +76,7 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
1 of 3
-
+
2 of 3 (wider)
@@ -87,7 +87,7 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
1 of 3
-
+
2 of 3 (wider)
@@ -109,7 +109,7 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
1 of 3
-
+
Variable width content
@@ -120,7 +120,7 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
1 of 3
-
+
Variable width content
@@ -133,16 +133,16 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
## 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`.
+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-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`.
{% example html %}
-
+
1 of 2 (stacked on mobile)
-
+
1 of 2 (stacked on mobile)
@@ -220,42 +220,42 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
{% example html %}
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
-
+
One of two columns
diff --git a/docs/layout/grid.md b/docs/layout/grid.md
index 55607e4648..ea0a9862b9 100644
--- a/docs/layout/grid.md
+++ b/docs/layout/grid.md
@@ -335,21 +335,21 @@ Don't want your columns to simply stack in smaller devices? Use the extra small
{% example html %}
-
.col-xs-12 .col-md-8
-
.col-xs-6 .col-md-4
+
.col-12 .col-md-8
+
.col-6 .col-md-4
-
.col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
-
.col-xs-6 .col-md-4
+
.col-6 .col-md-4
+
.col-6 .col-md-4
+
.col-6 .col-md-4
-
.col-xs-6
-
.col-xs-6
+
.col-6
+
.col-6
{% endexample %}
@@ -361,15 +361,15 @@ Build on the previous example by creating even more dynamic and powerful layouts
{% example html %}
-
.col-xs-12 .col-sm-6 .col-md-8
-
.col-xs-6 .col-md-4
+
.col-12 .col-sm-6 .col-md-8
+
.col-6 .col-md-4
-
.col-xs-6 .col-sm-4
-
.col-xs-6 .col-sm-4
+
.col-6 .col-sm-4
+
.col-6 .col-sm-4
-
.col-xs-6 .col-sm-4
+
.col-6 .col-sm-4
{% endexample %}
@@ -381,9 +381,9 @@ If more than 12 columns are placed within a single row, each group of extra colu
{% example html %}
-
.col-xs-9
-
.col-xs-4 Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
-
.col-xs-6 Subsequent columns continue along the new line.
+
.col-9
+
.col-4 Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
+
.col-6 Subsequent columns continue along the new line.
{% endexample %}
@@ -395,14 +395,14 @@ With the four tiers of grids available you're bound to run into issues where, at
{% example html %}
-
.col-xs-6 .col-sm-3
-
.col-xs-6 .col-sm-3
+
.col-6 .col-sm-3
+
.col-6 .col-sm-3
-
.col-xs-6 .col-sm-3
-
.col-xs-6 .col-sm-3
+
.col-6 .col-sm-3
+
.col-6 .col-sm-3
{% endexample %}
@@ -453,11 +453,11 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
Level 1: .col-sm-9
-
- Level 2: .col-xs-8 .col-sm-6
+
+ Level 2: .col-8 .col-sm-6
-
- Level 2: .col-xs-4 .col-sm-6
+
+ Level 2: .col-4 .col-sm-6
diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md
index 4334eb4d6d..6a7a1bb091 100644
--- a/docs/layout/responsive-utilities.md
+++ b/docs/layout/responsive-utilities.md
@@ -172,19 +172,19 @@ Resize your browser or load on different devices to test the responsive utility
Green checkmarks indicate the element **is visible** in your current viewport.
-
+
✔ Visible on extra smallExtra small
-
+
✔ Visible on small or narrowerSmall or narrower
-
+
✔ Visible on medium or narrowerMedium or narrower
-
+
✔ Visible on large or narrowerLarge or narrower
@@ -193,19 +193,19 @@ Green checkmarks indicate the element **is visible** in your current viewport.
-
+
✔ Visible on small or widerSmall or wider
-
+
✔ Visible on medium or widerMedium or wider
-
+
✔ Visible on large or widerLarge or wider
-
+
✔ Visible on extra largeExtra large
@@ -214,26 +214,26 @@ Green checkmarks indicate the element **is visible** in your current viewport.
-
+
✔ Your viewport is exactly extra smallYour viewport is NOT exactly extra small
-
+
✔ Your viewport is exactly smallYour viewport is NOT exactly small
-
+
✔ Your viewport is exactly mediumYour viewport is NOT exactly medium
-
+
✔ Your viewport is exactly largeYour viewport is NOT exactly large
-
+
✔ Your viewport is exactly extra largeYour viewport is NOT exactly extra large
