Merge branch 'v4-dev' into v4-navbars

2026-05-24 14:04:09 +03:00 · 2016-10-09 15:04:32 -07:00
parent 1db3586dc0 8d162553fa
commit 7dee5560a1
146 changed files with 1969 additions and 1233 deletions
@@ -51,10 +51,10 @@
    - title: Scrollspy
    - title: Tag
    - title: Tooltips
-    - title: Utilities

 - title: Utilities
  pages:
+    - title: Borders
    - title: Clearfix
    - title: Close icon
    - title: Colors
@@ -1,19 +1,19 @@
 - name: Lyft
  url: https://www.lyft.com
-  expo_url: http://expo.getbootstrap.com/2014/10/29/lyft/
+  expo_url: https://expo.getbootstrap.com/2014/10/29/lyft/
  img: lyft

 - name: Vogue
  url: http://www.vogue.com
-  expo_url: http://expo.getbootstrap.com/2014/09/30/vogue/
+  expo_url: https://expo.getbootstrap.com/2014/09/30/vogue/
  img: vogue

 - name: Riot Design
  url: http://riotdesign.eu/en/
-  expo_url: http://expo.getbootstrap.com/2014/03/13/riot-design/
+  expo_url: https://expo.getbootstrap.com/2014/03/13/riot-design/
  img: riot

 - name: Newsweek
  url: http://www.newsweek.com/
-  expo_url: http://expo.getbootstrap.com/2014/02/12/newsweek/
+  expo_url: https://expo.getbootstrap.com/2014/02/12/newsweek/
  img: newsweek
@@ -16,4 +16,4 @@
 - name: Brazilian Portuguese
  code: pt-BR
  description: Bootstrap 4 Português do Brasil
-  url: http://bootstrapbrasil.github.io/v4/
+  url: https://bootstrapbrasil.github.io/v4/
@@ -33,7 +33,7 @@
          {% endif %}

          <li class="{{ active }}">
-            <a href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' }}">
+            <a href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' }}/">
              {{ doc.title }}
            </a>

@@ -1,7 +1,7 @@
 <header class="navbar navbar-light navbar-static-top bd-navbar">
  <div class="container">
    {% comment %}
-    <nav class="nav navbar-nav pull-xs-right">
+    <nav class="nav navbar-nav float-xs-right">
      <div class="nav-item dropdown">
        <a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          v{{ site.current_version }}
@@ -27,7 +27,7 @@

    <nav>
      <div class="clearfix">
-        <button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation"></button>
+        <button class="navbar-toggler float-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav" aria-controls="bd-main-nav" aria-expanded="false" aria-label="Toggle navigation"></button>
        <a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
          Bootstrap
        </a>
@@ -5,7 +5,7 @@ description: Documentation and examples for Bootstrap's logo and brand usage gui
 group: about
 ---

-Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's [Brand Assets](http://mailchimp.com/about/brand-assets/).
+Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's [Brand Assets](https://mailchimp.com/about/brand-assets/).

 ## Mark and logo

@@ -54,7 +54,7 @@
  justify-content: space-between;
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  .flex-sm-first {
    order: -1;
  }
@@ -66,7 +66,7 @@
  }
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  .flex-items-sm-top {
    align-items: flex-start;
  }
@@ -78,7 +78,7 @@
  }
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  .flex-sm-top {
    align-self: flex-start;
  }
@@ -90,7 +90,7 @@
  }
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  .flex-items-sm-left {
    justify-content: flex-start;
  }
@@ -277,27 +277,31 @@
  padding-right: 15px;
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  .container {
-    max-width: 576px;
+    width: 540px;
+    max-width: 100%;
  }
 }

@media (min-width: 768px) {
  .container {
-    max-width: 720px;
+    width: 720px;
+    max-width: 100%;
  }
 }

@media (min-width: 992px) {
  .container {
-    max-width: 940px;
+    width: 960px;
+    max-width: 100%;
  }
 }

@media (min-width: 1200px) {
  .container {
-    max-width: 1140px;
+    width: 1140px;
+    max-width: 100%;
  }
 }

@@ -311,26 +315,78 @@
 .row {
  display: flex;
  flex-wrap: wrap;
-  margin-left: -15px;
  margin-right: -15px;
+  margin-left: -15px;
 }

-.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .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-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-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-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 {
+@media (min-width: 576px) {
+  .row {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+}
+
+@media (min-width: 768px) {
+  .row {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+}
+
+@media (min-width: 992px) {
+  .row {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .row {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+}
+
+.col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm, .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-md, .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-lg, .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-xl, .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 {
  position: relative;
  min-height: 1px;
+  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
-  width: 100%;
+}
+
+@media (min-width: 576px) {
+  .col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm, .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-md, .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-lg, .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-xl, .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 {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
+
+@media (min-width: 768px) {
+  .col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm, .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-md, .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-lg, .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-xl, .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 {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
+
+@media (min-width: 992px) {
+  .col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm, .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-md, .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-lg, .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-xl, .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 {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm, .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-md, .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-lg, .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-xl, .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 {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
 }

 .col-xs {
-  position: relative;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
-  min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
 }

 .col-xs-1 {
@@ -541,15 +597,11 @@
  margin-left: 91.666667%;
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  .col-sm {
-    position: relative;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
-    min-height: 1px;
-    padding-right: 15px;
-    padding-left: 15px;
  }
  .col-sm-1 {
    flex: 0 0 8.333333%;
@@ -717,13 +769,9 @@

@media (min-width: 768px) {
  .col-md {
-    position: relative;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
-    min-height: 1px;
-    padding-right: 15px;
-    padding-left: 15px;
  }
  .col-md-1 {
    flex: 0 0 8.333333%;
@@ -891,13 +939,9 @@

@media (min-width: 992px) {
  .col-lg {
-    position: relative;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
-    min-height: 1px;
-    padding-right: 15px;
-    padding-left: 15px;
  }
  .col-lg-1 {
    flex: 0 0 8.333333%;
@@ -1065,13 +1109,9 @@

@media (min-width: 1200px) {
  .col-xl {
-    position: relative;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
-    min-height: 1px;
-    padding-right: 15px;
-    padding-left: 15px;
  }
  .col-xl-1 {
    flex: 0 0 8.333333%;
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Docs (http://getbootstrap.com)
+ * Bootstrap Docs (https://getbootstrap.com)
 * Copyright 2011-2016 The Bootstrap Authors
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under the Creative Commons Attribution 3.0 Unported License. For
@@ -113,7 +113,7 @@
  margin-bottom: -2rem !important;
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  .bd-masthead {
    padding-top: 8rem;
    padding-bottom: 2rem;
@@ -174,7 +174,7 @@
  text-align: center;
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  .bd-featurette {
    text-align: left;
  }
@@ -202,7 +202,7 @@
  margin: 2.5rem auto;
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  .half-rule {
    margin-right: 0;
    margin-left: 0;
@@ -298,7 +298,7 @@
  text-decoration: none;
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  #carbonads {
    max-width: 330px;
    margin: 50px auto 0;
@@ -374,7 +374,7 @@
  margin-bottom: .25rem;
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  .bd-title {
    font-size: 3rem;
  }
@@ -418,7 +418,7 @@
  font-weight: 300;
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  .bd-pageheader {
    padding-top: 4rem;
    padding-bottom: 4rem;
@@ -600,7 +600,7 @@
  margin-bottom: 0;
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  .bd-footer {
    text-align: left;
  }
@@ -690,7 +690,7 @@
  clear: both;
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  .bd-example {
    padding: 1.5rem;
    margin-right: 0;
@@ -809,7 +809,7 @@
  margin: 1rem -1rem -1rem;
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  .bd-example .navbar-fixed-top {
    margin: -1.5rem -1.5rem 1rem;
  }
@@ -915,7 +915,7 @@
  background-color: #f7f7f9;
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  .highlight {
    padding: 1.5rem;
    margin-right: 0;
@@ -997,13 +997,13 @@
  border: 1px solid #d6e9c6;
 }

-@media (max-width: 543px) {
+@media (max-width: 575px) {
  .hidden-xs-only {
    display: none !important;
  }
 }

-@media (min-width: 544px) and (max-width: 767px) {
+@media (min-width: 576px) and (max-width: 767px) {
  .hidden-sm-only {
    display: none !important;
  }
@@ -6,7 +6,7 @@
 */

 // See the Getting Started docs for more information:
-// http://getbootstrap.com/getting-started/#support-ie10-width
+// https://getbootstrap.com/getting-started/#support-ie10-width

 (function () {
  'use strict';
@@ -3,7 +3,7 @@
 // ++++++++++++++++++++++++++++++++++++++++++

 /*!
- * JavaScript for Bootstrap's docs (http://getbootstrap.com)
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com)
 * Copyright 2011-2016 The Bootstrap Authors
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under the Creative Commons Attribution 3.0 Unported License. For
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Docs (http://getbootstrap.com)
+ * Bootstrap Docs (https://getbootstrap.com)
 * Copyright 2011-2016 The Bootstrap Authors
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under the Creative Commons Attribution 3.0 Unported License. For
@@ -32,7 +32,7 @@ See also:
      <tr>
        <td>{{ bug.browser }}</td>
        <td>{{ bug.summary | markdownify | bugify }}</td>
-        <td>{{ bug.upstream_bug | bugify }}</td>
+        <td>{{ bug.upstream_bug | bugify }}</td>
        <td>{{ bug.origin | bugify }}</td>
      </tr>
      {% endfor %}
@@ -61,7 +61,7 @@ Alerts can also contain additional HTML elements like headings and paragraphs.
 <div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
-  <p class="m-b-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
 </div>
 {% endexample %}

@@ -142,7 +142,7 @@ Using custom widths:

 ## Text alignment

-You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/components/utilities/#text-alignment).
+You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]({{ site.baseurl }}/utilities/typography/#text-alignment).

 {% example html %}
 <div class="card card-block">
@@ -231,7 +231,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
 {% example html %}
 <div class="card text-xs-center">
  <div class="card-header">
-    <ul class="nav nav-tabs card-header-tabs pull-xs-left">
+    <ul class="nav nav-tabs card-header-tabs float-xs-left">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
@@ -254,7 +254,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ
 {% example html %}
 <div class="card text-xs-center">
  <div class="card-header">
-    <ul class="nav nav-pills card-header-pills pull-xs-left">
+    <ul class="nav nav-pills card-header-pills float-xs-left">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
@@ -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. 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.

 Only applies to small devices and above.

@@ -5,7 +5,7 @@ description: A slideshow component for cycling through elements—images or slid
 group: components
 ---

-A slideshow component for cycling through elements—images or slides of text—like a carousel. In browsers where the [Page Visibility API](http://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). **Nested carousels are not supported.**
+A slideshow component for cycling through elements—images or slides of text—like a carousel. In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.). **Nested carousels are not supported.**

 ## Contents

@@ -46,7 +46,7 @@ Extend the default collapse behavior to create an accordion.
 <div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
-      <h5 class="m-b-0">
+      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
@@ -58,7 +58,7 @@ Extend the default collapse behavior to create an accordion.
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
-      <h5 class="m-b-0">
+      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
@@ -70,7 +70,7 @@ Extend the default collapse behavior to create an accordion.
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingThree">
-      <h5 class="m-b-0">
+      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
@@ -37,7 +37,7 @@ And with `<a>` elements:

 {% example html %}
 <div class="dropdown open">
-  <a class="btn btn-secondary dropdown-toggle" href="http://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  <a class="btn btn-secondary dropdown-toggle" href="https://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

@@ -192,7 +192,7 @@ Here are examples of `.form-control` applied to each textual HTML5 `<input>` `ty
 <div class="form-group row">
  <label for="example-url-input" class="col-xs-2 col-form-label">URL</label>
  <div class="col-xs-10">
-    <input class="form-control" type="url" value="http://getbootstrap.com" id="example-url-input">
+    <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
  </div>
 </div>
 <div class="form-group row">
@@ -340,7 +340,7 @@ Assistive technologies such as screen readers will have trouble with your forms

 ### Using the Grid

-For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes](/layout/grid/#predefined-classes) or [mixins](/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.
+For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes]({{ site.baseurl }}/layout/grid/#predefined-classes) or [mixins]({{ site.baseurl }}/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.

 Be sure to add `.col-form-label` to your `<label>`s as well so they're vertically centered with their associated form controls. For `<legend>` elements, you can use `.col-form-legend` to make them appear similar to regular `<label>` elements.

@@ -585,7 +585,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
 {% callout warning %}
 #### Caveat about link functionality of `<a>`

-By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons](../buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
+By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
 {% endcallout %}

 {% callout danger %}
@@ -704,7 +704,7 @@ Here are some examples of the aforementioned classes in action.

 Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.

-Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon](../components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples](../components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
+Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's `<label>` text itself (as is the case in the following code example), include a [Glyphicon]({{ site.baseurl }}/components/#glyphicons) (with appropriate alternative text using the `.sr-only` class - see the [Glyphicon examples]({{ site.baseurl }}/components/#glyphicons-examples)), or by providing an additional [help text](#forms-help-text) block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute.
 {% endcallout %}
 {% endcomment %}

@@ -846,7 +846,7 @@ Add other states to your custom forms with our validation classes.
    <span class="custom-control-description">Check this custom checkbox</span>
  </label>
 </div>
-<div class="form-group has-danger m-b-0">
+<div class="form-group has-danger mb-0">
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
@@ -13,7 +13,7 @@ A lightweight, flexible component that can optionally extend the entire viewport
 <div class="jumbotron">
  <h1 class="display-3">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-  <hr class="m-y-2">
+  <hr class="my-2">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
@@ -32,15 +32,15 @@ Add tags to any list group item to show unread counts, activity, etc.
 {% example html %}
 <ul class="list-group">
  <li class="list-group-item">
-    <span class="tag tag-default tag-pill pull-xs-right">14</span>
+    <span class="tag tag-default tag-pill float-xs-right">14</span>
    Cras justo odio
  </li>
  <li class="list-group-item">
-    <span class="tag tag-default tag-pill pull-xs-right">2</span>
+    <span class="tag tag-default tag-pill float-xs-right">2</span>
    Dapibus ac facilisis in
  </li>
  <li class="list-group-item">
-    <span class="tag tag-default tag-pill pull-xs-right">1</span>
+    <span class="tag tag-default tag-pill float-xs-right">1</span>
    Morbi leo risus
  </li>
 </ul>
@@ -412,6 +412,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <td>true</td>
       <td>Closes the modal when escape key is pressed</td>
     </tr>
+     <tr>
+       <td>focus</td>
+       <td>boolean</td>
+       <td>true</td>
+       <td>Puts the focus on the modal when initialized.</td>
+     </tr>
     <tr>
       <td>show</td>
       <td>boolean</td>
@@ -27,7 +27,7 @@ Navbars come with built-in support for a handful of sub-components. Mix and matc

 - `.navbar-brand` for your company, product, or project name
 - `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsing-content) behaviors.
+- `.navbar-toggler` for use with our collapse plugin and other [navigation toggling](#collapsible-content) behaviors.

 Here's an example of all the sub-components included in a default, light navbar:

@@ -48,7 +48,7 @@ Here's an example of all the sub-components included in a default, light navbar:
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
-  <form class="form-inline pull-xs-right">
+  <form class="form-inline float-xs-right">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-outline-success" type="submit">Search</button>
  </form>
@@ -67,7 +67,7 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as

 <!-- As a heading -->
 <nav class="navbar navbar-light bg-faded">
-  <h1 class="navbar-brand m-b-0">Navbar</h1>
+  <h1 class="navbar-brand mb-0">Navbar</h1>
 </nav>
 {% endexample %}

@@ -193,7 +193,7 @@ Here are some examples to show what we mean.
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
-    <form class="form-inline pull-xs-right">
+    <form class="form-inline float-xs-right">
      <input class="form-control" type="text" placeholder="Search">
      <button class="btn btn-outline-info" type="submit">Search</button>
    </form>
@@ -214,7 +214,7 @@ Here are some examples to show what we mean.
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
-    <form class="form-inline pull-xs-right">
+    <form class="form-inline float-xs-right">
      <input class="form-control" type="text" placeholder="Search">
      <button class="btn btn-outline-secondary" type="submit">Search</button>
    </form>
@@ -235,7 +235,7 @@ Here are some examples to show what we mean.
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
-    <form class="form-inline pull-xs-right">
+    <form class="form-inline float-xs-right">
      <input class="form-control" type="text" placeholder="Search">
      <button class="btn btn-outline-primary" type="submit">Search</button>
    </form>
@@ -308,18 +308,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"></button>
  <div class="collapse" id="exCollapsingNavbar">
    <div class="bg-inverse text-muted p-a-1">
-      <h4>Collapsed content</h4>
-      <span class="text-muted">Toggleable via the navbar brand.</span>
-    </div>
-  </div>
-</nav>
-{% endexample %}
-
-{% example html %}
-<nav class="navbar navbar-dark bg-inverse">
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbarDark" aria-controls="exCollapsingNavbarDark" aria-expanded="false" aria-label="Toggle navigation"></button>
-  <div class="collapse" id="exCollapsingNavbarDark">
-    <div class="bg-inverse text-muted p-a-1">
+    <div class="bg-inverse text-muted p-1">
      <h4>Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
@@ -17,8 +17,8 @@ Add small overlay content, like those found in iOS, to any element for housing s
 Things to know when using the popover plugin:


- Popovers rely on the 3rd party library [Tether](http://github.hubspot.com/tether/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for popovers to work!
- Popovers require the [tooltip plugin]({{ site.baseurl }}/components/tooltips) as a dependency.
+- Popovers rely on the 3rd party library [Tether](http://tether.io/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for popovers to work!
+- Popovers require the [tooltip plugin]({{ site.baseurl }}/components/tooltips/) as a dependency.
 - Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
 - Zero-length `title` and `content` values will never show a popover.
 - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
@@ -142,7 +142,7 @@ Use the `focus` trigger to dismiss popovers on the next click that the user make
 {% callout danger %}
 #### Specific markup required for dismiss-on-next-click

-For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex) attribute.
+For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute.
 {% endcallout %}

 {% example html %}
@@ -230,7 +230,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
        <td>selector</td>
        <td>string</td>
        <td>false</td>
-        <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsbin.com/zopod/1/edit">an informative example</a>.</td>
+        <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
      </tr>
      <tr>
        <td>template</td>
@@ -263,13 +263,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
        <td>constraints</td>
        <td>Array</td>
        <td>'hover focus'</td>
-        <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">constraint docs</a>.</td>
+        <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td>
      </tr>
      <tr>
        <td>offset</td>
        <td>string</td>
        <td>'0 0'</td>
-        <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#offset">offset docs</a>.</td>
+        <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#offset">offset docs</a>.</td>
      </tr>
    </tbody>
  </table>
@@ -14,7 +14,7 @@ Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/doc

 ## Example

-To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/components/utilities/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute.
+To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/utilities/typography/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute.

 {% example html %}

@@ -16,7 +16,7 @@ Inspired by the excellent Tipsy jQuery plugin written by Jason Frame. Tooltips a

 Things to know when using the tooltip plugin:

- Tooltips rely on the 3rd party library [Tether](http://github.hubspot.com/tether/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for tooltips to work!
+- Tooltips rely on the 3rd party library [Tether](http://tether.io/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for tooltips to work!
 - Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
 - Tooltips with zero-length titles are never displayed.
 - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
@@ -195,7 +195,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
        <td>selector</td>
        <td>string</td>
        <td>false</td>
-        <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsbin.com/zopod/1/edit">an informative example</a>.</td>
+        <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
      </tr>
      <tr>
        <td>template</td>
@@ -227,13 +227,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
        <td>constraints</td>
        <td>Array</td>
        <td>[]</td>
-        <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">constraint docs</a>.</td>
+        <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td>
      </tr>
      <tr>
        <td>offset</td>
        <td>string</td>
        <td>'0 0'</td>
-        <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://github.hubspot.com/tether/#constraints">offset docs</a>.</td>
+        <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#constraints">offset docs</a>.</td>
      </tr>
    </tbody>
  </table>
@@ -11,16 +11,16 @@ Use the included `.figure` , `.figure-img` and `.figure-caption` classes to prov

 {% example html %}
 <figure class="figure">
-  <img data-src="holder.js/400x300" class="figure-img img-fluid img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
+  <img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
 </figure>
 {% endexample %}

-Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/components/utilities/#text-alignment).
+Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/utilities/typography/#text-alignment).

 {% example html %}
 <figure class="figure">
-  <img data-src="holder.js/400x300" class="figure-img img-fluid img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
+  <img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption>
 </figure>
 {% endexample %}
@@ -30,52 +30,48 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an
 In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
 {% endcallout %}

-## Image shapes
+## Image thumbnails

-Add classes to an `<img>` element to easily style images in any project.
+In addition to our [border-radius utilities]({{ site.baseurl }}/utilities/borders/), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.

 <div class="bd-example bd-example-images">
-  <img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
-  <img data-src="holder.js/200x200" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
  <img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
 </div>

 {% highlight html %}
-<img src="..." alt="..." class="img-rounded">
-<img src="..." alt="..." class="img-circle">
 <img src="..." alt="..." class="img-thumbnail">
 {% endhighlight %}

 ## Aligning images

-Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). `block`-level images can be centered using [the `.m-x-auto` margin utility class]({{ site.baseurl }}/components/utilities/#horizontal-centering).
+Align images with the [helper float classes]({{ site.baseurl }}/utilities/responsive-helpers/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/utilities/typography/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/utilities/spacing/#horizontal-centering).

 <div class="bd-example bd-example-images">
-  <img data-src="holder.js/200x200" class="img-rounded pull-xs-left" alt="A generic square placeholder image with rounded corners">
-  <img data-src="holder.js/200x200" class="img-rounded pull-xs-right" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="rounded float-xs-left" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="rounded float-xs-right" alt="A generic square placeholder image with rounded corners">
 </div>

 {% highlight html %}
-<img src="..." class="img-rounded pull-xs-left" alt="...">
-<img src="..." class="img-rounded pull-xs-right" alt="...">
+<img src="..." class="rounded float-xs-left" alt="...">
+<img src="..." class="rounded float-xs-right" alt="...">
 {% endhighlight %}

 <div class="bd-example bd-example-images">
-  <img data-src="holder.js/200x200" class="img-rounded m-x-auto d-block" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="rounded mx-auto d-block" alt="A generic square placeholder image with rounded corners">
 </div>

 {% highlight html %}
-<img src="..." class="img-rounded m-x-auto d-block" alt="...">
+<img src="..." class="rounded mx-auto d-block" alt="...">
 {% endhighlight %}

 <div class="bd-example bd-example-images">
  <div class="text-xs-center">
-    <img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners">
+    <img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners">
  </div>
 </div>

 {% highlight html %}
 <div class="text-xs-center">
-  <img src="..." class="img-rounded" alt="...">
+  <img src="..." class="rounded" alt="...">
 </div>
 {% endhighlight %}
@@ -321,7 +321,7 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o
 `[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
 {% endcallout %}

-To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/components/utilities/#invisible-content) instead.
+To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/utilities/invisible-content/) instead.

 ## Click delay optimization for touch

@@ -335,4 +335,4 @@ To address this problem in IE11 and Microsoft Edge on desktop, as well as IE11 o

 In the case of old iOS versions (prior to 9.3), the suggested approach is to use additional scripts such as [FastClick](https://github.com/ftlabs/fastclick) to explicitly work around the delay.

-For further details, see the compatibility table for [suppressing 300ms delay for touchscreen interactions](http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay).
+For further details, see the compatibility table for [suppressing 300ms delay for touchscreen interactions](https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay).
@@ -576,7 +576,7 @@ Use contextual classes to color table rows or individual cells.
 </tr>
 {% endhighlight %}

-Regular table background variants are not available with the inverse table, however, you may use [text or background utilities](/components/utilities/#contextual-colors-and-backgrounds) to achieve similar styles.
+Regular table background variants are not available with the inverse table, however, you may use [text or background utilities]({{ site.baseurl }}/utilities/colors/) to achieve similar styles.

 <div class="bd-example">
  <table class="table table-inverse">
@@ -5,7 +5,7 @@ description: Documentation and examples for Bootstrap typography, including glob
 group: content
 ---

-Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes]({{ site.baseurl }}/components/utilities/).
+Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes]({{ site.baseurl }}/utilities/).

 ## Contents

@@ -16,7 +16,7 @@ Bootstrap includes simple and easily customized typography for headings, body te

 Bootstrap sets basic global display, typography, and link styles. Specifically, we:

- Use a [native font stack](/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device.
+- Use a [native font stack]({{ site.baseurl }}/content/reboot/#native-font-stack) that selects the best `font-family` for each OS and device.
 - Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the `<body>`.
 - Set the global link color via `$link-color` and apply link underlines only on `:hover`.
 - Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default).
@@ -150,7 +150,7 @@ While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant

 ## Text utilities

-Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/components/utilities/#text-alignment).
+Change text alignment, transform, style, weight, and color with our [text utilities]({{ site.baseurl }}/utilities/typography/#text-alignment).

 ## Abbreviations

@@ -169,7 +169,7 @@ For quoting blocks of content from another source within your document. Wrap `<b

 {% example html %}
 <blockquote class="blockquote">
-  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>
 {% endexample %}

@@ -179,7 +179,7 @@ Add a `<footer class="blockquote-footer">` for identifying the source. Wrap the

 {% example html %}
 <blockquote class="blockquote">
-  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
 </blockquote>
 {% endexample %}
@@ -190,7 +190,7 @@ Add `.blockquote-reverse` for a blockquote with right-aligned content.

 {% example html %}
 <blockquote class="blockquote blockquote-reverse">
-  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
 </blockquote>
 {% endexample %}
@@ -11,27 +11,31 @@
  clear: both;
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  .container {
-    max-width: 576px;
+    width: 540px;
+    max-width: 100%;
  }
 }

@media (min-width: 768px) {
  .container {
-    max-width: 720px;
+    width: 720px;
+    max-width: 100%;
  }
 }

@media (min-width: 992px) {
  .container {
-    max-width: 940px;
+    width: 960px;
+    max-width: 100%;
  }
 }

@media (min-width: 1200px) {
  .container {
-    max-width: 1140px;
+    width: 1140px;
+    max-width: 100%;
  }
 }

@@ -49,8 +53,8 @@
 }

 .row {
-  margin-left: -15px;
  margin-right: -15px;
+  margin-left: -15px;
 }

 .row::after {
@@ -59,13 +63,69 @@
  clear: both;
 }

-.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .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-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-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-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 {
+@media (min-width: 576px) {
+  .row {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+}
+
+@media (min-width: 768px) {
+  .row {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+}
+
+@media (min-width: 992px) {
+  .row {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .row {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+}
+
+.col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm, .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-md, .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-lg, .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-xl, .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 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
 }

+@media (min-width: 576px) {
+  .col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm, .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-md, .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-lg, .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-xl, .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 {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
+
+@media (min-width: 768px) {
+  .col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm, .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-md, .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-lg, .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-xl, .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 {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
+
+@media (min-width: 992px) {
+  .col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm, .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-md, .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-lg, .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-xl, .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 {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm, .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-md, .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-lg, .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-xl, .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 {
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}
+
 .col-xs-1 {
  float: left;
  width: 8.333333%;
@@ -274,7 +334,7 @@
  margin-left: 91.666667%;
 }

-@media (min-width: 544px) {
+@media (min-width: 576px) {
  .col-sm-1 {
    float: left;
    width: 8.333333%;
@@ -1,6 +1,7 @@
-/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
+/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */
 html {
  font-family: sans-serif;
+  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
 }
@@ -47,6 +48,7 @@ template,

 a {
  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
 }

 a:active,
@@ -133,9 +135,11 @@ hr {

 button,
 input,
+optgroup,
 select,
 textarea {
  font: inherit;
+  margin: 0;
 }

 optgroup {
@@ -143,34 +147,15 @@ optgroup {
 }

 button,
-input,
-select {
+input {
  overflow: visible;
 }

-button,
-input,
-select,
-textarea {
-  margin: 0;
-}
-
 button,
 select {
  text-transform: none;
 }

-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  cursor: pointer;
-}
-
-[disabled] {
-  cursor: default;
-}
-
 button,
 html [type="button"],
 [type="reset"],
@@ -179,13 +164,17 @@ html [type="button"],
 }

 button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
  padding: 0;
 }

 button:-moz-focusring,
-input:-moz-focusring {
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
 }

@@ -223,6 +212,7 @@ textarea {

 [type="search"] {
  -webkit-appearance: textfield;
+  outline-offset: -2px;
 }

 [type="search"]::-webkit-search-cancel-button,
@@ -230,6 +220,16 @@ textarea {
  -webkit-appearance: none;
 }

+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
 html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
@@ -404,9 +404,7 @@ input,
 button,
 select,
 textarea {
-  margin: 0;
  line-height: inherit;
-  border-radius: 0;
 }

 input[type="radio"]:disabled,
@@ -1,2 +1,2 @@
-/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit}optgroup{font-weight:700}button,input,select{overflow:visible}button,input,select,textarea{margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}@-ms-viewport{width:device-width}html{font-size:16px;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;line-height:1.5;color:#373a3c;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #818a91}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}a{color:#0275d8;text-decoration:none}a:focus,a:hover{color:#014c8c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle}[role=button]{cursor:pointer}[role=button],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse;background-color:transparent}caption{padding-top:.75rem;padding-bottom:.75rem;color:#818a91;text-align:left;caption-side:bottom}th{text-align:left}label{display:inline-block;margin-bottom:.5rem}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,select,textarea{margin:0;line-height:inherit;border-radius:0}input[type=checkbox]:disabled,input[type=radio]:disabled{cursor:not-allowed}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit}input[type=search]{-webkit-appearance:none}output{display:inline-block}[hidden]{display:none!important}
+/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}@-ms-viewport{width:device-width}html{font-size:16px;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;line-height:1.5;color:#373a3c;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #818a91}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}a{color:#0275d8;text-decoration:none}a:focus,a:hover{color:#014c8c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle}[role=button]{cursor:pointer}[role=button],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse;background-color:transparent}caption{padding-top:.75rem;padding-bottom:.75rem;color:#818a91;text-align:left;caption-side:bottom}th{text-align:left}label{display:inline-block;margin-bottom:.5rem}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,select,textarea{line-height:inherit}input[type=checkbox]:disabled,input[type=radio]:disabled{cursor:not-allowed}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit}input[type=search]{-webkit-appearance:none}output{display:inline-block}[hidden]{display:none!important}
 /*# sourceMappingURL=bootstrap-reboot.min.css.map */
@@ -1 +1 @@
-{"version":3,"sources":["../../scss/_normalize.scss","bootstrap-reboot.css","../../scss/_reboot.scss","../../scss/_variables.scss","../../scss/mixins/_tab-focus.scss"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../scss/_normalize.scss","bootstrap-reboot.css","../../scss/_reboot.scss","../../scss/_variables.scss","../../scss/mixins/_tab-focus.scss"],"names":[],"mappings":"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"}
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v4.0.0-alpha.4 (http://getbootstrap.com)
+ * Bootstrap v4.0.0-alpha.4 (https://getbootstrap.com)
 * Copyright 2011-2016 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
@@ -2779,10 +2779,10 @@ var Tooltip = (function ($) {

  /**
   * Check for Tether dependency
-   * Tether - http://github.hubspot.com/tether/
+   * Tether - http://tether.io/
   */
  if (window.Tether === undefined) {
-    throw new Error('Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)');
+    throw new Error('Bootstrap tooltips require Tether (http://tether.io/)');
  }

  /**
@@ -102,7 +102,7 @@

    <footer class="text-muted">
      <div class="container">
-        <p class="pull-xs-right">
+        <p class="float-xs-right">
          <a href="#">Back to top</a>
        </p>
        <p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
@@ -148,7 +148,7 @@
    </div><!-- /.container -->

    <footer class="blog-footer">
-      <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
+      <p>Blog template built for <a href="https://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
      <p>
        <a href="#">Back to top</a>
      </p>
@@ -164,7 +164,7 @@

      <!-- FOOTER -->
      <footer>
-        <p class="pull-xs-right"><a href="#">Back to top</a></p>
+        <p class="float-xs-right"><a href="#">Back to top</a></p>
        <p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
      </footer>

@@ -47,7 +47,7 @@

          <div class="mastfoot">
            <div class="inner">
-              <p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
+              <p>Cover template for <a href="https://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
            </div>
          </div>

@@ -24,13 +24,13 @@
      <button type="button" class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation"></button>
      <a class="navbar-brand" href="#">Project name</a>
      <div id="navbar">
-        <nav class="nav navbar-nav pull-xs-left">
+        <nav class="nav navbar-nav float-xs-left">
          <a class="nav-item nav-link" href="#">Dashboard</a>
          <a class="nav-item nav-link" href="#">Settings</a>
          <a class="nav-item nav-link" href="#">Profile</a>
          <a class="nav-item nav-link" href="#">Help</a>
        </nav>
-        <form class="pull-xs-right">
+        <form class="float-xs-right">
          <input type="text" class="form-control" placeholder="Search...">
        </form>
      </div>
@@ -135,7 +135,7 @@
      <hr>

      <h3>Column clearing</h3>
-      <p><a href="http://getbootstrap.com/css/#grid-responsive-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
+      <p><a href="https://getbootstrap.com/css/#grid-responsive-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
      <div class="row">
        <div class="col-xs-6 col-sm-3">
          .col-xs-6 .col-sm-3
@@ -24,7 +24,7 @@ Examples that focus on implementing uses of built-in components provided by Boot
    <h4>Grids</h4>
    <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
  </div>
-  <div class="clearfix hidden-sm-up"></div>
+  <div class="clearfix hidden-md-up"></div>

  <div class="col-xs-6 col-md-4">
    <a href="{{ site.baseurl }}/examples/jumbotron/">
@@ -61,7 +61,7 @@ Taking the default navbar component and showing how it can be moved, placed, and
    <h4>Static top navbar</h4>
    <p>Super basic template with a static top navbar along with some additional content.</p>
  </div>
-  <div class="clearfix hidden-sm-up"></div>
+  <div class="clearfix hidden-md-up"></div>

  <div class="col-xs-6 col-md-4">
    <a href="{{ site.baseurl }}/examples/navbar-top-fixed/">
@@ -91,7 +91,7 @@ Brand new components and templates to help folks quickly get started with Bootst
    <h4>Cover</h4>
    <p>A one-page template for building simple and beautiful home pages.</p>
  </div>
-  <div class="clearfix hidden-sm-up"></div>
+  <div class="clearfix hidden-md-up"></div>

  <div class="col-xs-6 col-md-4">
    <a href="{{ site.baseurl }}/examples/carousel/">
@@ -107,7 +107,7 @@ Brand new components and templates to help folks quickly get started with Bootst
    <h4>Blog</h4>
    <p>Simple two-column blog layout with custom navigation, header, and type.</p>
  </div>
-  <div class="clearfix hidden-sm-up"></div>
+  <div class="clearfix hidden-md-up"></div>

  <div class="col-xs-6 col-md-4">
    <a href="{{ site.baseurl }}/examples/dashboard/">
@@ -123,14 +123,14 @@ Brand new components and templates to help folks quickly get started with Bootst
    <h4>Sign-in page</h4>
    <p>Custom form layout and design for a simple sign in form.</p>
  </div>
-  <div class="clearfix hidden-sm-up"></div>
+  <div class="clearfix hidden-md-up"></div>

  <div class="col-xs-6 col-md-4">
    <a href="{{ site.baseurl }}/examples/justified-nav/">
      <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/justified-nav.jpg" alt="">
    </a>
    <h4>Justified nav</h4>
-    <p>Create a custom navbar with justified links. Heads up! <a href="{{ site.baseurl }}components/#nav-justified">Not too Safari friendly.</a></p>
+    <p>Create a custom navbar with justified links. Heads up! Not too Safari friendly.</p>
  </div>
  <div class="col-xs-6 col-md-4">
    <a href="{{ site.baseurl }}/examples/sticky-footer/">
@@ -139,7 +139,7 @@ Brand new components and templates to help folks quickly get started with Bootst
    <h4>Sticky footer</h4>
    <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
  </div>
-  <div class="clearfix hidden-sm-up"></div>
+  <div class="clearfix hidden-md-up"></div>

  <div class="col-xs-6 col-md-4">
    <a href="{{ site.baseurl }}/examples/sticky-footer-navbar/">
@@ -23,7 +23,7 @@
    <div class="container">
      <div class="header clearfix">
        <nav>
-          <ul class="nav nav-pills pull-xs-right">
+          <ul class="nav nav-pills float-xs-right">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
@@ -35,7 +35,7 @@
      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
-        <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
+        <a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
      </div>
    </div>

@@ -33,7 +33,7 @@
      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
-        <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
+        <a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
      </div>
    </div>

@@ -39,7 +39,7 @@
              <a class="nav-link" href="#">About</a>
            </li>
          </ul>
-          <form class="form-inline pull-xs-right">
+          <form class="form-inline float-xs-right">
            <input class="form-control" type="text" placeholder="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
@@ -52,7 +52,7 @@
        <p>This example is a quick exercise to illustrate how the default responsive navbar works. It's placed within a <code>.container</code> to limit its width and will scroll with the rest of the page's content.</p>
        <p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
        <p>
-          <a class="btn btn-lg btn-primary" href="../../components/navbar" role="button">View navbar docs &raquo;</a>
+          <a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
        </p>
      </div>

@@ -35,7 +35,7 @@
      <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-12 col-sm-9">
-          <p class="pull-xs-right hidden-sm-up">
+          <p class="float-xs-right hidden-sm-up">
            <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
          </p>
          <div class="jumbotron">
@@ -20,7 +20,7 @@

  <body>

-    <button class="btn btn-secondary pull-xs-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
+    <button class="btn btn-secondary float-xs-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
    <button class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button>
    <button class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button>

@@ -30,7 +30,7 @@
      <button class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button>
      <button class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button>

-      <button class="btn btn-secondary pull-xs-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
+      <button class="btn btn-secondary float-xs-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>

      <button class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
    </div>
@@ -3,3 +3,4 @@ layout: docs
 title: Icon fonts
 ---

+TODO
@@ -47,7 +47,7 @@ Note that this bug will also affect any other in-page links your site may be usi

 When nesting headings (`<h1>` - `<h6>`), your primary document header should be an `<h1>`. Subsequent headings should make logical use of `<h2>` - `<h6>` such that screen readers can construct a table of contents for your pages.

-Learn more at [HTML CodeSniffer](http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessability](http://accessibility.psu.edu/headings).
+Learn more at [HTML CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessability](http://accessibility.psu.edu/headings).

 ## Additional resources

@@ -172,7 +172,7 @@ See [this StackOverflow question](https://stackoverflow.com/questions/6771258/wh

 ## Internet Explorer 10 in Windows Phone 8

-Internet Explorer 10 in Windows Phone 8 versions older than [Update 3 (a.k.a. GDR3)](http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx) doesn't differentiate **device width** from **viewport width** in `@-ms-viewport` at-rules, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you'll need to **include the following JavaScript to work around the bug**.
+Internet Explorer 10 in Windows Phone 8 versions older than [Update 3 (a.k.a. GDR3)](https://blogs.windows.com/buildingapps/2013/10/14/introducing-windows-phone-preview-for-developers/) doesn't differentiate **device width** from **viewport width** in `@-ms-viewport` at-rules, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you'll need to **include the following JavaScript to work around the bug**.

 {% highlight js %}
 // Copyright 2014-2015 The Bootstrap Authors
@@ -189,7 +189,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
 }
 {% endhighlight %}

-For more information and usage guidelines, read [Windows Phone 8 and Device-Width](http://timkadlec.com/2013/01/windows-phone-8-and-device-width/).
+For more information and usage guidelines, read [Windows Phone 8 and Device-Width](https://timkadlec.com/2013/01/windows-phone-8-and-device-width/).

 As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.

@@ -20,7 +20,7 @@ To use our Gruntfile and run our documentation locally, you'll need a copy of Bo
 When completed, you'll be able to run the various Grunt commands provided from the command line.

 [install-ruby]: https://www.ruby-lang.org/en/documentation/installation/
-[gembundler]: http://bundler.io/
+[gembundler]: https://bundler.io/

 ## Using Grunt

@@ -30,7 +30,7 @@ Our Gruntfile includes the following commands and tasks:
 | --- | --- |
 | `grunt` | Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** |
 | `grunt dist` | `grunt dist` creates the `/dist` directory with compiled files. **Uses [Sass](http://sass-lang.com/), [Autoprefixer][autoprefixer], and [UglifyJS](http://lisperator.net/uglifyjs/).** |
-| `grunt test` | Runs [scss-lint](https://github.com/brigade/scss-lint), [ESLint](http://eslint.org/) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI). |
+| `grunt test` | Runs [scss-lint](https://github.com/brigade/scss-lint), [ESLint](http://eslint.org/) and [QUnit](https://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI). |
 | `grunt docs` | Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via `jekyll serve`. |
 | `grunt watch` | This is a convenience method for watching just Sass files and automatically building them whenever you save. |

@@ -57,7 +57,7 @@ Running our documentation locally requires the use of Jekyll, a decently flexibl
 2. From the root `/bootstrap` directory, run `bundle exec jekyll serve` in the command line.
 3. Open <http://localhost:9001> in your browser, and voilà.

-Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
+Learn more about using Jekyll by reading its [documentation](https://jekyllrb.com/docs/home/).

 ## Troubleshooting

@@ -37,7 +37,7 @@ Bootstrap's `package.json` contains some additional metadata under the following

 ### RubyGems

-Install Bootstrap in your Ruby apps using [Bundler](http://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](http://bundler.io/gemfile.html):
+Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/gemfile.html):

 {% highlight ruby %}
 gem 'bootstrap', '~> 4.0.0.alpha3'
@@ -67,7 +67,7 @@ $ composer require twbs/bootstrap:{{ site.current_version }}

 ### Bower

-Install and manage Bootstrap's Sass and JavaScript using [Bower](http://bower.io).
+Install and manage Bootstrap's Sass and JavaScript using [Bower](https://bower.io).

 {% highlight bash %}
 $ bower install bootstrap#v{{ site.current_version }}
@@ -40,7 +40,7 @@ If you're familiar with modifying variables in Sass—or any other CSS preproces
 2. Change it from `false` to `true`.
 3. Recompile, and done!

-Alternatively, if you don't need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. [Head to the download page]({{ site.baseurl }}/getting-started/download) for more information.
+Alternatively, if you don't need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. [Head to the download page]({{ site.baseurl }}/getting-started/download/) for more information.

 ## Browser support

@@ -17,7 +17,7 @@ Here's how to quickly get started with the Bootstrap CDN and a template starter

 ## Quick start

-Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? [Head to the downloads page.]({{ site.baseurl }}/getting-started/download)
+Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? [Head to the downloads page.]({{ site.baseurl }}/getting-started/download/)

 Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.

@@ -40,7 +40,7 @@ And that's it—you're on your way to a fully Bootstrapped site. If you're at al
 Be sure to have your pages set up with the latest design and development standards. That means:

 * Using an HTML5 doctype
-* Forcing Internet Explorer to use its latest rendering mode ([read more](http://stackoverflow.com/q/6771258))
+* Forcing Internet Explorer to use its latest rendering mode ([read more](https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do))
 * And, utilizing the viewport meta tag.

 Put it all together and your pages should look like this:
@@ -68,7 +68,7 @@ Put it all together and your pages should look like this:
 </html>
 {% endhighlight %}

-That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/overview) or [our official examples]({{ site.baseurl }}/examples/) to start laying out your site's content and components.
+That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/overview/) or [our official examples]({{ site.baseurl }}/examples/) to start laying out your site's content and components.

 ## Important globals

@@ -115,7 +115,7 @@ Learn more about [box model and sizing at CSS Tricks](https://css-tricks.com/box

 ### Normalize.css

-For improved cross-browser rendering, we use [Normalize.css](http://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices. We further build on this with our own, slightly more opinionated styles with [Reboot]({{ site.baseurl }}/content/reboot/).
+For improved cross-browser rendering, we use [Normalize.css](https://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices. We further build on this with our own, slightly more opinionated styles with [Reboot]({{ site.baseurl }}/content/reboot/).

 ## Community

@@ -7,7 +7,7 @@ layout: home
    <span class="bd-booticon outline">B</span>
    <p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.</p>
    <p class="lead">
-      <a href="{{ site.baseurl }}/getting-started/download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap</a>
+      <a href="{{ site.baseurl }}/getting-started/download/" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap</a>
    </p>
    <p class="version">Currently v{{ site.current_version }}</p>
    {% include ads.html %}
@@ -92,7 +92,7 @@ layout: home
 <div class="bd-featurette">
  <div class="container">
    <h2 class="bd-featurette-title">Built with Bootstrap.</h2>
-    <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="../examples">collection of examples</a> or by exploring some of our favorites.</p>
+    <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="{{ site.baseurl }}/examples/">collection of examples</a> or by exploring some of our favorites.</p>

    <div class="row bd-featured-sites">
    {% for showcase in site.data.showcase %}
@@ -5,9 +5,9 @@ description: Documentation and examples for using Bootstrap's optional flexbox g
 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.
+Fancy a more modern grid system? [Enable flexbox support in Bootstrap]({{ site.baseurl }}/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.
+Bootstrap's flexbox grid includes support for every feature from our [default grid system]({{ site.baseurl }}/layout/grid/), and then some. Please read the [default grid system docs]({{ site.baseurl }}/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!** This flexbox grid documentation is powered by an additional CSS file that overrides our default grid system's CSS. This is only available in our hosted docs and is disabled in development.
@@ -22,7 +22,7 @@ Bootstrap's flexbox grid includes support for every feature from our [default gr

 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.
+- [Grid mixins]({{ site.baseurl }}/layout/grid#sass-mixins) and [predefined classes]({{ site.baseurl }}/layout/grid#predefined-classes) include support for flexbox. Just [enable flexbox support]({{ site.baseurl }}/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.
@@ -64,11 +64,11 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
        <th></th>
        <th class="text-xs-center">
          Extra small<br>
-          <small>&lt;544px</small>
+          <small>&lt;576px</small>
        </th>
        <th class="text-xs-center">
          Small<br>
-          <small>&ge;544px</small>
+          <small>&ge;576px</small>
        </th>
        <th class="text-xs-center">
          Medium<br>
@@ -91,11 +91,11 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
        <td colspan="4">Collapsed to start, horizontal above breakpoints</td>
      </tr>
      <tr>
-        <th class="text-nowrap" scope="row">Container width</th>
+        <th class="text-nowrap" scope="row">Max container width</th>
        <td>None (auto)</td>
-        <td>576px</td>
+        <td>540px</td>
        <td>720px</td>
-        <td>940px</td>
+        <td>960px</td>
        <td>1140px</td>
      </tr>
      <tr>
@@ -112,7 +112,7 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
      </tr>
      <tr>
        <th class="text-nowrap" scope="row">Gutter width</th>
-        <td colspan="5">1.875rem / 30px (15px on each side of a column)</td>
+        <td colspan="5">30px (15px on each side of a column)</td>
      </tr>
      <tr>
        <th class="text-nowrap" scope="row">Nestable</th>
@@ -154,7 +154,7 @@ $grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
-  sm: 544px,
+  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
@@ -164,9 +164,9 @@ $grid-breakpoints: (
 );

 $container-max-widths: (
-  sm: 576px,
+  sm: 540px,
  md: 720px,
-  lg: 940px,
+  lg: 960px,
  xl: 1140px
 );
 {% endhighlight %}
@@ -246,7 +246,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS

 You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.

-See it in action in <a href="http://jsbin.com/ruxona/edit">this rendered example</a>.
+See it in action in <a href="https://jsbin.com/ruxona/edit?html,output">this rendered example</a>.

 {% highlight scss %}
 .container {
@@ -512,7 +512,7 @@ $grid-breakpoints: (
 $container-max-widths: (
  sm: 420px,
  md: 720px,
-  lg: 940px
+  lg: 960px
 );
 {% endhighlight %}

@@ -46,7 +46,7 @@ Media components can also be nested.
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
-    <div class="media m-t-2">
+    <div class="media mt-2">
      <a class="media-left" href="#">
        <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
      </a>
@@ -124,7 +124,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
      <h4 class="media-heading">Media heading</h4>
      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p>
      <!-- Nested media object -->
-      <div class="media m-t-2">
+      <div class="media mt-2">
        <a class="media-left" href="#">
          <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
        </a>
@@ -132,7 +132,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
          <h4 class="media-heading">Nested media heading</h4>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
          <!-- Nested media object -->
-          <div class="media m-t-2">
+          <div class="media mt-2">
            <div class="media-left">
              <a href="#">
                <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
@@ -146,7 +146,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
        </div>
      </div>
      <!-- Nested media object -->
-      <div class="media m-t-2">
+      <div class="media mt-2">
        <div class="media-left">
          <a href="#">
            <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
@@ -159,7 +159,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
      </div>
    </div>
  </li>
-  <li class="media m-t-2">
+  <li class="media mt-2">
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
@@ -41,7 +41,7 @@ Here are the big ticket items you'll want to be aware of when moving from v3 to

 - Dropped panels, thumbnails, and wells for a new all-encompassing component, cards.
 - Dropped the Glyphicons icon font. If you need icons, some options are:
-  - the upstream version of [Glyphicons](http://glyphicons.com/)
+  - the upstream version of [Glyphicons](https://glyphicons.com/)
  - [Octicons](https://octicons.github.com/)
  - [Font Awesome](https://fortawesome.github.io/Font-Awesome/)
 - Dropped the Affix jQuery plugin. We recommend using a `position: sticky` polyfill instead. [See the HTML5 Please entry](http://html5please.com/#sticky) for details and specific polyfill recommendations.
@@ -99,7 +99,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with

 - Renamed `.btn-default` to `.btn-secondary`.
 - Dropped the `.btn-xs` class entirely as `.btn-sm` is proportionally much smaller than v3's.
- The [stateful button](http://getbootstrap.com/javascript/#buttons-methods) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
+- The [stateful button](https://getbootstrap.com/javascript/#buttons-methods) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
  - Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.

 ### Button group
@@ -129,7 +129,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with

 ### Modal

- The `remote` option (which could be used to automatically load and inject external content into a modal) and the corresponding `loaded.bs.modal` event were removed. We recommend instead using client-side templating or a data binding framework, or calling [jQuery.load](http://api.jquery.com/load/) yourself.
+- The `remote` option (which could be used to automatically load and inject external content into a modal) and the corresponding `loaded.bs.modal` event were removed. We recommend instead using client-side templating or a data binding framework, or calling [jQuery.load](https://api.jquery.com/load/) yourself.

 ### Navs

@@ -165,7 +165,7 @@ Dropped entirely for the new card component.
 - `.panel-default` removed and no replacement
 - `.panel-group` removed and no replacement. `.card-group` is not a replacement, it is different.
 - `.panel-heading` to `.card-header`
- `.panel-title` to `.card-header`. Depending on the desired look, you may also want to use [heading elements or classes]({{ site.baseurl }}/content/typography/#headings) (e.g. `<h3>`, `.h3`) or bold elements or classes (e.g. `<strong>`, `<b>`, [`.font-weight-bold`]({{ site.baseurl }}/components/utilities/#font-weight-and-italics)). Note that `.card-title`, while similarly named, produces a different look than `.panel-title`.
+- `.panel-title` to `.card-header`. Depending on the desired look, you may also want to use [heading elements or classes]({{ site.baseurl }}/content/typography/#headings) (e.g. `<h3>`, `.h3`) or bold elements or classes (e.g. `<strong>`, `<b>`, [`.font-weight-bold`]({{ site.baseurl }}/utilities/typography/#font-weight-and-italics)). Note that `.card-title`, while similarly named, produces a different look than `.panel-title`.
 - `.panel-body` to `.card-block`
 - `.panel-footer` to `.card-footer`
 - `.panel-primary` to `.card-primary` and `.card-inverse` (or use `.bg-primary` on `.card-header`)
@@ -184,9 +184,9 @@ Dropped entirely for the new card component.

 ### Utilities

- Added `.pull-{xs,sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.pull-xs-left` and `.pull-xs-right`.
+- Added `.float-{xs,sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.float-xs-left` and `.float-xs-right`.
 - Added responsive variations to our text alignment classes `.text-{xs,sm,md,lg,xl}-{left,center,right}` and removed the redundant `.text-{left,center,right}` utilities as they are the same as the `xs` variation.
- Dropped `.center-block` for the new `.m-x-auto` class.
+- Dropped `.center-block` for the new `.mx-auto` class.

 ### Vendor prefix mixins
 Bootstrap 3's [vendor prefix](http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm) mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use [Autoprefixer](https://github.com/postcss/autoprefixer), they're no longer necessary.
@@ -0,0 +1,29 @@
+---
+layout: docs
+title: Borders
+group: utilities
+---
+
+Use border utilities to quickly style the `border` and `border-radius` of an element. Great for images, buttons, or any other element.
+
+## Border-radius
+
+Add classes to an element to easily round its corners.
+
+<div class="bd-example bd-example-images">
+  <img data-src="holder.js/100x100" class="rounded" alt="Example rounded image">
+  <img data-src="holder.js/100x100" class="rounded-top" alt="Example top rounded image">
+  <img data-src="holder.js/100x100" class="rounded-right" alt="Example right rounded image">
+  <img data-src="holder.js/100x100" class="rounded-bottom" alt="Example bottom rounded image">
+  <img data-src="holder.js/100x100" class="rounded-left" alt="Example left rounded image">
+  <img data-src="holder.js/100x100" class="rounded-circle" alt="Completely round image">
+</div>
+
+{% highlight html %}
+<img src="..." alt="..." class="rounded">
+<img src="..." alt="..." class="rounded-top">
+<img src="..." alt="..." class="rounded-right">
+<img src="..." alt="..." class="rounded-bottom">
+<img src="..." alt="..." class="rounded-left">
+<img src="..." alt="..." class="rounded-circle">
+{% endhighlight %}
@@ -33,7 +33,7 @@ The following example shows how the clearfix can be used. Without the clearfix t

 {% example html %}
 <div class="bg-info clearfix">
-  <button class="btn btn-secondary pull-xs-left">Example Button pulled left</button>
-  <button class="btn btn-secondary pull-xs-right">Example Button pullred right</button>
+  <button class="btn btn-secondary float-xs-left">Example Button pulled left</button>
+  <button class="btn btn-secondary float-xs-right">Example Button pullred right</button>
 </div>
 {% endexample %}
@@ -13,9 +13,10 @@ Convey meaning through color with a handful of emphasis utility classes. These m
 <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
 <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
+<p class="text-white">Etiam porta sem malesuada ultricies vehicula.</p>
 {% endexample %}

-Contextual text classes also work well on anchors with the provided hover and focus states.
+Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` class has no link styling.**

 {% example html %}
 <a href="#" class="text-muted">Muted link</a>
@@ -26,15 +27,15 @@ Contextual text classes also work well on anchors with the provided hover and fo
 <a href="#" class="text-danger">Danger link</a>
 {% endexample %}

-Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.
+Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.

 {% example html %}
-<div class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
-<div class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
-<div class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
-<div class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</div>
-<div class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</div>
-<div class="bg-inverse">Cras mattis consectetur purus sit amet fermentum.</div>
+<div class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
+<div class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
+<div class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
+<div class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</div>
+<div class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</div>
+<div class="bg-inverse text-white">Cras mattis consectetur purus sit amet fermentum.</div>
 {% endexample %}

 {% callout info %}
@@ -6,7 +6,7 @@ group: utilities

 Use `.d-block`, `.d-inline`, or `.d-inline-block` to simply set an element's [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) to `block`, `inline`, or `inline-block` (respectively).

-To make an element `display: none`, use our [responsive utilities](../../layout/responsive-utilities/) instead.
+To make an element `display: none`, use our [responsive utilities]({{ site.baseurl }}/layout/responsive-utilities/) instead.

 {% example html %}
 <div class="d-inline bg-success">Inline</div>
@@ -46,25 +46,25 @@ Aspect ratios can be customized with modifier classes.

 These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system.

-Two similar non-responsive Sass mixins (`pull-left` and `pull-right`) are also available.
+Two similar non-responsive Sass mixins (`float-left` and `float-right`) are also available.

 {% example html %}
-<div class="pull-xs-left">Float left on all viewport sizes</div><br>
-<div class="pull-xs-right">Float right on all viewport sizes</div><br>
-<div class="pull-xs-none">Don't float on all viewport sizes</div><br>
+<div class="float-xs-left">Float left on all viewport sizes</div><br>
+<div class="float-xs-right">Float right on all viewport sizes</div><br>
+<div class="float-xs-none">Don't float on all viewport sizes</div><br>

-<div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div><br>
-<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div><br>
-<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div><br>
-<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
+<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
+<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
+<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
+<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
 {% endexample %}

 {% highlight scss %}
 // Related simple non-responsive mixins
 .element {
-  @include pull-left;
+  @include float-left;
 }
 .another-element {
-  @include pull-right;
+  @include float-right;
 }
 {% endhighlight %}
@@ -7,7 +7,7 @@ group: utilities
 Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Can also be used as mixins.

 {% comment %}
-Necessary for following [accessibility best practices](../getting-started/#accessibility).
+Necessary for following [accessibility best practices]({{ site.baseurl }}/getting-started/#accessibility).
 {% endcomment %}

 {% highlight html %}
@@ -6,7 +6,7 @@ group: utilities

 Assign `margin` or `padding` to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, `1rem`.

-The classes are named using the format: `{property}-{sides}-{size}`
+The classes are named using the format: `{property}{sides}-{size}`

 Where *property* is one of:

@@ -35,35 +35,35 @@ Where *size* is one of:
 Here are some representative examples of these classes:

 {% highlight scss %}
-.m-t-0 {
+.mt-0 {
  margin-top: 0 !important;
 }

-.m-l-1 {
+.ml-1 {
  margin-left: $spacer-x !important;
 }

-.p-x-2 {
+.px-2 {
  padding-left: ($spacer-x * 1.5) !important;
  padding-right: ($spacer-x * 1.5) !important;
 }

-.p-a-3 {
+.p-3 {
  padding: ($spacer-y * 3) ($spacer-x * 3) !important;
 }
 {% endhighlight %}

 ### Horizontal centering
-Additionally, Bootstrap also includes an `.m-x-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`.
+Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content by setting the horizontal margins to `auto`.

 <div class="bd-example">
-  <div class="m-x-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
+  <div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);">
    Centered element
  </div>
 </div>

 {% highlight html %}
-<div class="m-x-auto" style="width: 200px;">
+<div class="mx-auto" style="width: 200px;">
  Centered element
 </div>
 {% endhighlight %}