Merge pull request #20684 from twbs/v4-utils

v4: The Utilities Update

Merge pull request #20684 from twbs/v4-utils
v4: The Utilities Update
821f7193 · Mark Otto · GitHub · b6fe0d45 · 6c867667 · 821f7193
Commit 821f7193 authored 8 years ago by Mark Otto Committed by GitHub 8 years ago
Expand all Hide whitespace changes
Inline Side-by-side

Showing

with 243 additions and 215 deletions
+243 -215
--- a/dist/css/bootstrap-flex.css
+++ b/dist/css/bootstrap-flex.css
@@ -660,15 +660,10 @@ mark,
 .img-fluid, .carousel-inner > .carousel-item > img,
 .carousel-inner > .carousel-item > a > img {
-  display: block;
  max-width: 100%;
  height: auto;
 }
-.img-rounded {
-  border-radius: 0.3rem;
-}
 .img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
@@ -677,15 +672,10 @@ mark,
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
-  display: inline-block;
  max-width: 100%;
  height: auto;
 }
-.img-circle {
-  border-radius: 50%;
-}
 .figure {
  display: inline-block;
 }
@@ -6014,7 +6004,6 @@ button.close {
 }
 .bg-primary {
-  color: #fff !important;
  background-color: #0275d8 !important;
 }
@@ -6023,7 +6012,6 @@ a.bg-primary:focus, a.bg-primary:hover {
 }
 .bg-success {
-  color: #fff !important;
  background-color: #5cb85c !important;
 }
@@ -6032,7 +6020,6 @@ a.bg-success:focus, a.bg-success:hover {
 }
 .bg-info {
-  color: #fff !important;
  background-color: #5bc0de !important;
 }
@@ -6041,7 +6028,6 @@ a.bg-info:focus, a.bg-info:hover {
 }
 .bg-warning {
-  color: #fff !important;
  background-color: #f0ad4e !important;
 }
@@ -6050,7 +6036,6 @@ a.bg-warning:focus, a.bg-warning:hover {
 }
 .bg-danger {
-  color: #fff !important;
  background-color: #d9534f !important;
 }
@@ -6059,7 +6044,6 @@ a.bg-danger:focus, a.bg-danger:hover {
 }
 .bg-inverse {
-  color: #fff !important;
  background-color: #373a3c !important;
 }
@@ -6067,6 +6051,34 @@ a.bg-inverse:focus, a.bg-inverse:hover {
  background-color: #1f2021 !important;
 }
+.rounded {
+  border-radius: 0.25rem;
+}
+.rounded-top {
+  border-top-right-radius: 0.25rem;
+  border-top-left-radius: 0.25rem;
+}
+.rounded-right {
+  border-bottom-right-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+.rounded-bottom {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+.rounded-left {
+  border-bottom-left-radius: 0.25rem;
+  border-top-left-radius: 0.25rem;
+}
+.rounded-circle {
+  border-radius: 50%;
+}
 .clearfix::after {
  content: "";
  display: table;
@@ -6562,62 +6574,62 @@ a.bg-inverse:focus, a.bg-inverse:hover {
  }
 }
-.pull-xs-left {
+.float-xs-left {
  float: left !important;
 }
-.pull-xs-right {
+.float-xs-right {
  float: right !important;
 }
-.pull-xs-none {
+.float-xs-none {
  float: none !important;
 }
 @media (min-width: 544px) {
-  .pull-sm-left {
+  .float-sm-left {
    float: left !important;
  }
-  .pull-sm-right {
+  .float-sm-right {
    float: right !important;
  }
-  .pull-sm-none {
+  .float-sm-none {
    float: none !important;
  }
 }
 @media (min-width: 768px) {
-  .pull-md-left {
+  .float-md-left {
    float: left !important;
  }
-  .pull-md-right {
+  .float-md-right {
    float: right !important;
  }
-  .pull-md-none {
+  .float-md-none {
    float: none !important;
  }
 }
 @media (min-width: 992px) {
-  .pull-lg-left {
+  .float-lg-left {
    float: left !important;
  }
-  .pull-lg-right {
+  .float-lg-right {
    float: right !important;
  }
-  .pull-lg-none {
+  .float-lg-none {
    float: none !important;
  }
 }
 @media (min-width: 1200px) {
-  .pull-xl-left {
+  .float-xl-left {
    float: left !important;
  }
-  .pull-xl-right {
+  .float-xl-right {
    float: right !important;
  }
-  .pull-xl-none {
+  .float-xl-none {
    float: none !important;
  }
 }
@@ -6646,247 +6658,247 @@ a.bg-inverse:focus, a.bg-inverse:hover {
  width: 100% !important;
 }
-.m-x-auto {
+.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
 }
-.m-a-0 {
+.m-0 {
  margin: 0 0 !important;
 }
-.m-t-0 {
+.mt-0 {
  margin-top: 0 !important;
 }
-.m-r-0 {
+.mr-0 {
  margin-right: 0 !important;
 }
-.m-b-0 {
+.mb-0 {
  margin-bottom: 0 !important;
 }
-.m-l-0 {
+.ml-0 {
  margin-left: 0 !important;
 }
-.m-x-0 {
+.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
 }
-.m-y-0 {
+.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
 }
-.m-a-1 {
+.m-1 {
  margin: 1rem 1rem !important;
 }
-.m-t-1 {
+.mt-1 {
  margin-top: 1rem !important;
 }
-.m-r-1 {
+.mr-1 {
  margin-right: 1rem !important;
 }
-.m-b-1 {
+.mb-1 {
  margin-bottom: 1rem !important;
 }
-.m-l-1 {
+.ml-1 {
  margin-left: 1rem !important;
 }
-.m-x-1 {
+.mx-1 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
 }
-.m-y-1 {
+.my-1 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
 }
-.m-a-2 {
+.m-2 {
  margin: 1.5rem 1.5rem !important;
 }
-.m-t-2 {
+.mt-2 {
  margin-top: 1.5rem !important;
 }
-.m-r-2 {
+.mr-2 {
  margin-right: 1.5rem !important;
 }
-.m-b-2 {
+.mb-2 {
  margin-bottom: 1.5rem !important;
 }
-.m-l-2 {
+.ml-2 {
  margin-left: 1.5rem !important;
 }
-.m-x-2 {
+.mx-2 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
 }
-.m-y-2 {
+.my-2 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
 }
-.m-a-3 {
+.m-3 {
  margin: 3rem 3rem !important;
 }
-.m-t-3 {
+.mt-3 {
  margin-top: 3rem !important;
 }
-.m-r-3 {
+.mr-3 {
  margin-right: 3rem !important;
 }
-.m-b-3 {
+.mb-3 {
  margin-bottom: 3rem !important;
 }
-.m-l-3 {
+.ml-3 {
  margin-left: 3rem !important;
 }
-.m-x-3 {
+.mx-3 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
 }
-.m-y-3 {
+.my-3 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
 }
-.p-a-0 {
+.p-0 {
  padding: 0 0 !important;
 }
-.p-t-0 {
+.pt-0 {
  padding-top: 0 !important;
 }
-.p-r-0 {
+.pr-0 {
  padding-right: 0 !important;
 }
-.p-b-0 {
+.pb-0 {
  padding-bottom: 0 !important;
 }
-.p-l-0 {
+.pl-0 {
  padding-left: 0 !important;
 }
-.p-x-0 {
+.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
 }
-.p-y-0 {
+.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
 }
-.p-a-1 {
+.p-1 {
  padding: 1rem 1rem !important;
 }
-.p-t-1 {
+.pt-1 {
  padding-top: 1rem !important;
 }
-.p-r-1 {
+.pr-1 {
  padding-right: 1rem !important;
 }
-.p-b-1 {
+.pb-1 {
  padding-bottom: 1rem !important;
 }
-.p-l-1 {
+.pl-1 {
  padding-left: 1rem !important;
 }
-.p-x-1 {
+.px-1 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
 }
-.p-y-1 {
+.py-1 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
 }
-.p-a-2 {
+.p-2 {
  padding: 1.5rem 1.5rem !important;
 }
-.p-t-2 {
+.pt-2 {
  padding-top: 1.5rem !important;
 }
-.p-r-2 {
+.pr-2 {
  padding-right: 1.5rem !important;
 }
-.p-b-2 {
+.pb-2 {
  padding-bottom: 1.5rem !important;
 }
-.p-l-2 {
+.pl-2 {
  padding-left: 1.5rem !important;
 }
-.p-x-2 {
+.px-2 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
 }
-.p-y-2 {
+.py-2 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
 }
-.p-a-3 {
+.p-3 {
  padding: 3rem 3rem !important;
 }
-.p-t-3 {
+.pt-3 {
  padding-top: 3rem !important;
 }
-.p-r-3 {
+.pr-3 {
  padding-right: 3rem !important;
 }
-.p-b-3 {
+.pb-3 {
  padding-bottom: 3rem !important;
 }
-.p-l-3 {
+.pl-3 {
  padding-left: 3rem !important;
 }
-.p-x-3 {
+.px-3 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
 }
-.p-y-3 {
+.py-3 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
 }
@@ -6997,6 +7009,10 @@ a.bg-inverse:focus, a.bg-inverse:hover {
  font-style: italic;
 }
+.text-white {
+  color: #fff !important;
+}
 .text-muted {
  color: #818a91 !important;
 }

--- a/dist/css/bootstrap-flex.css.map
+++ b/dist/css/bootstrap-flex.css.map
--- a/dist/css/bootstrap-flex.min.css
+++ b/dist/css/bootstrap-flex.min.css
--- a/dist/css/bootstrap-flex.min.css.map
+++ b/dist/css/bootstrap-flex.min.css.map
--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
@@ -664,15 +664,10 @@ dl.row > dd + dt {
 .img-fluid, .carousel-inner > .carousel-item > img,
 .carousel-inner > .carousel-item > a > img {
-  display: block;
  max-width: 100%;
  height: auto;
 }
-.img-rounded {
-  border-radius: 0.3rem;
-}
 .img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
@@ -681,15 +676,10 @@ dl.row > dd + dt {
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
-  display: inline-block;
  max-width: 100%;
  height: auto;
 }
-.img-circle {
-  border-radius: 50%;
-}
 .figure {
  display: inline-block;
 }
@@ -5787,7 +5777,6 @@ button.close {
 }
 .bg-primary {
-  color: #fff !important;
  background-color: #0275d8 !important;
 }
@@ -5796,7 +5785,6 @@ a.bg-primary:focus, a.bg-primary:hover {
 }
 .bg-success {
-  color: #fff !important;
  background-color: #5cb85c !important;
 }
@@ -5805,7 +5793,6 @@ a.bg-success:focus, a.bg-success:hover {
 }
 .bg-info {
-  color: #fff !important;
  background-color: #5bc0de !important;
 }
@@ -5814,7 +5801,6 @@ a.bg-info:focus, a.bg-info:hover {
 }
 .bg-warning {
-  color: #fff !important;
  background-color: #f0ad4e !important;
 }
@@ -5823,7 +5809,6 @@ a.bg-warning:focus, a.bg-warning:hover {
 }
 .bg-danger {
-  color: #fff !important;
  background-color: #d9534f !important;
 }
@@ -5832,7 +5817,6 @@ a.bg-danger:focus, a.bg-danger:hover {
 }
 .bg-inverse {
-  color: #fff !important;
  background-color: #373a3c !important;
 }
@@ -5840,6 +5824,34 @@ a.bg-inverse:focus, a.bg-inverse:hover {
  background-color: #1f2021 !important;
 }
+.rounded {
+  border-radius: 0.25rem;
+}
+.rounded-top {
+  border-top-right-radius: 0.25rem;
+  border-top-left-radius: 0.25rem;
+}
+.rounded-right {
+  border-bottom-right-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+.rounded-bottom {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+.rounded-left {
+  border-bottom-left-radius: 0.25rem;
+  border-top-left-radius: 0.25rem;
+}
+.rounded-circle {
+  border-radius: 50%;
+}
 .clearfix::after {
  content: "";
  display: table;
@@ -5858,62 +5870,62 @@ a.bg-inverse:focus, a.bg-inverse:hover {
  display: inline !important;
 }
-.pull-xs-left {
+.float-xs-left {
  float: left !important;
 }
-.pull-xs-right {
+.float-xs-right {
  float: right !important;
 }
-.pull-xs-none {
+.float-xs-none {
  float: none !important;
 }
 @media (min-width: 544px) {
-  .pull-sm-left {
+  .float-sm-left {
    float: left !important;
  }
-  .pull-sm-right {
+  .float-sm-right {
    float: right !important;
  }
-  .pull-sm-none {
+  .float-sm-none {
    float: none !important;
  }
 }
 @media (min-width: 768px) {
-  .pull-md-left {
+  .float-md-left {
    float: left !important;
  }
-  .pull-md-right {
+  .float-md-right {
    float: right !important;
  }
-  .pull-md-none {
+  .float-md-none {
    float: none !important;
  }
 }
 @media (min-width: 992px) {
-  .pull-lg-left {
+  .float-lg-left {
    float: left !important;
  }
-  .pull-lg-right {
+  .float-lg-right {
    float: right !important;
  }
-  .pull-lg-none {
+  .float-lg-none {
    float: none !important;
  }
 }
 @media (min-width: 1200px) {
-  .pull-xl-left {
+  .float-xl-left {
    float: left !important;
  }
-  .pull-xl-right {
+  .float-xl-right {
    float: right !important;
  }
-  .pull-xl-none {
+  .float-xl-none {
    float: none !important;
  }
 }
@@ -5942,247 +5954,247 @@ a.bg-inverse:focus, a.bg-inverse:hover {
  width: 100% !important;
 }
-.m-x-auto {
+.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
 }
-.m-a-0 {
+.m-0 {
  margin: 0 0 !important;
 }
-.m-t-0 {
+.mt-0 {
  margin-top: 0 !important;
 }
-.m-r-0 {
+.mr-0 {
  margin-right: 0 !important;
 }
-.m-b-0 {
+.mb-0 {
  margin-bottom: 0 !important;
 }
-.m-l-0 {
+.ml-0 {
  margin-left: 0 !important;
 }
-.m-x-0 {
+.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
 }
-.m-y-0 {
+.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
 }
-.m-a-1 {
+.m-1 {
  margin: 1rem 1rem !important;
 }
-.m-t-1 {
+.mt-1 {
  margin-top: 1rem !important;
 }
-.m-r-1 {
+.mr-1 {
  margin-right: 1rem !important;
 }
-.m-b-1 {
+.mb-1 {
  margin-bottom: 1rem !important;
 }
-.m-l-1 {
+.ml-1 {
  margin-left: 1rem !important;
 }
-.m-x-1 {
+.mx-1 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
 }
-.m-y-1 {
+.my-1 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
 }
-.m-a-2 {
+.m-2 {
  margin: 1.5rem 1.5rem !important;
 }
-.m-t-2 {
+.mt-2 {
  margin-top: 1.5rem !important;
 }
-.m-r-2 {
+.mr-2 {
  margin-right: 1.5rem !important;
 }
-.m-b-2 {
+.mb-2 {
  margin-bottom: 1.5rem !important;
 }
-.m-l-2 {
+.ml-2 {
  margin-left: 1.5rem !important;
 }
-.m-x-2 {
+.mx-2 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
 }
-.m-y-2 {
+.my-2 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
 }
-.m-a-3 {
+.m-3 {
  margin: 3rem 3rem !important;
 }
-.m-t-3 {
+.mt-3 {
  margin-top: 3rem !important;
 }
-.m-r-3 {
+.mr-3 {
  margin-right: 3rem !important;
 }
-.m-b-3 {
+.mb-3 {
  margin-bottom: 3rem !important;
 }
-.m-l-3 {
+.ml-3 {
  margin-left: 3rem !important;
 }
-.m-x-3 {
+.mx-3 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
 }
-.m-y-3 {
+.my-3 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
 }
-.p-a-0 {
+.p-0 {
  padding: 0 0 !important;
 }
-.p-t-0 {
+.pt-0 {
  padding-top: 0 !important;
 }
-.p-r-0 {
+.pr-0 {
  padding-right: 0 !important;
 }
-.p-b-0 {
+.pb-0 {
  padding-bottom: 0 !important;
 }
-.p-l-0 {
+.pl-0 {
  padding-left: 0 !important;
 }
-.p-x-0 {
+.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
 }
-.p-y-0 {
+.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
 }
-.p-a-1 {
+.p-1 {
  padding: 1rem 1rem !important;
 }
-.p-t-1 {
+.pt-1 {
  padding-top: 1rem !important;
 }
-.p-r-1 {
+.pr-1 {
  padding-right: 1rem !important;
 }
-.p-b-1 {
+.pb-1 {
  padding-bottom: 1rem !important;
 }
-.p-l-1 {
+.pl-1 {
  padding-left: 1rem !important;
 }
-.p-x-1 {
+.px-1 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
 }
-.p-y-1 {
+.py-1 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
 }
-.p-a-2 {
+.p-2 {
  padding: 1.5rem 1.5rem !important;
 }
-.p-t-2 {
+.pt-2 {
  padding-top: 1.5rem !important;
 }
-.p-r-2 {
+.pr-2 {
  padding-right: 1.5rem !important;
 }
-.p-b-2 {
+.pb-2 {
  padding-bottom: 1.5rem !important;
 }
-.p-l-2 {
+.pl-2 {
  padding-left: 1.5rem !important;
 }
-.p-x-2 {
+.px-2 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
 }
-.p-y-2 {
+.py-2 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
 }
-.p-a-3 {
+.p-3 {
  padding: 3rem 3rem !important;
 }
-.p-t-3 {
+.pt-3 {
  padding-top: 3rem !important;
 }
-.p-r-3 {
+.pr-3 {
  padding-right: 3rem !important;
 }
-.p-b-3 {
+.pb-3 {
  padding-bottom: 3rem !important;
 }
-.p-l-3 {
+.pl-3 {
  padding-left: 3rem !important;
 }
-.p-x-3 {
+.px-3 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
 }
-.p-y-3 {
+.py-3 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
 }
@@ -6293,6 +6305,10 @@ a.bg-inverse:focus, a.bg-inverse:hover {
  font-style: italic;
 }
+.text-white {
+  color: #fff !important;
+}
 .text-muted {
  color: #818a91 !important;
 }

--- a/dist/css/bootstrap.css.map
+++ b/dist/css/bootstrap.css.map
--- a/dist/css/bootstrap.min.css
+++ b/dist/css/bootstrap.min.css
--- a/dist/css/bootstrap.min.css.map
+++ b/dist/css/bootstrap.min.css.map
--- a/docs/_data/nav.yml
+++ b/docs/_data/nav.yml
@@ -51,10 +51,10 @@
    - title: Scrollspy
    - title: Tag
    - title: Tooltips
-    - title: Utilities
 - title: Utilities
  pages:
+    - title: Borders
    - title: Clearfix
    - title: Close icon
    - title: Colors

--- a/docs/_includes/nav-home.html
+++ b/docs/_includes/nav-home.html
 <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>

--- a/docs/assets/css/docs.min.css.map
+++ b/docs/assets/css/docs.min.css.map
--- a/docs/components/alerts.md
+++ b/docs/components/alerts.md
@@ -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 %}

--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -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>

--- a/docs/components/collapse.md
+++ b/docs/components/collapse.md
@@ -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>

--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -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>

--- a/docs/components/jumbotron.md
+++ b/docs/components/jumbotron.md
@@ -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>

--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -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>

--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -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>
@@ -65,7 +65,7 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
 </nav>
 <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 %}
@@ -130,7 +130,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>
@@ -151,7 +151,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>
@@ -172,7 +172,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>
@@ -244,7 +244,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
 <nav class="navbar navbar-light bg-faded">
  <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 p-a-1">
+    <div class="bg-inverse p-1">
      <h4>Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>

--- a/docs/content/figures.md
+++ b/docs/content/figures.md
@@ -11,7 +11,7 @@ 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 %}
@@ -20,7 +20,7 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl
 {% 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 %}
--- a/docs/content/images.md
+++ b/docs/content/images.md
@@ -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 }}/utilities/responsive-helpers/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/utilities/typography/#text-alignment). `block`-level images can be centered using [the `.m-x-auto` margin utility class]({{ site.baseurl }}/spacing/#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="rounded float-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-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="rounded float-xs-left" alt="...">
-<img src="..." class="img-rounded pull-xs-right" 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 %}