7 files changed, 61 insertions, 31 deletions
diff --git a/docs/utilities/borders.md b/docs/utilities/borders.md
new file mode 100644
index 000000000..b47d95c97
--- /dev/null
+++ b/docs/utilities/borders.md
@@ -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 %}
diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md
index 8ebf214d2..e63ba3cda 100644
--- a/docs/utilities/clearfix.md
+++ b/docs/utilities/clearfix.md
@@ -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 %}
diff --git a/docs/utilities/colors.md b/docs/utilities/colors.md
index 62315e614..216941f95 100644
--- a/docs/utilities/colors.md
+++ b/docs/utilities/colors.md
@@ -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 %}
diff --git a/docs/utilities/display-property.md b/docs/utilities/display-property.md
index 8b3f6f616..50ea29367 100644
--- a/docs/utilities/display-property.md
+++ b/docs/utilities/display-property.md
@@ -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>
diff --git a/docs/utilities/responsive-helpers.md b/docs/utilities/responsive-helpers.md
index b9c76d59d..13ae8a56d 100644
--- a/docs/utilities/responsive-helpers.md
+++ b/docs/utilities/responsive-helpers.md
@@ -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="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-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="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 %}
diff --git a/docs/utilities/screenreaders.md b/docs/utilities/screenreaders.md
index 576b0a18b..411f3ddb2 100644
--- a/docs/utilities/screenreaders.md
+++ b/docs/utilities/screenreaders.md
@@ -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 %}
diff --git a/docs/utilities/spacing.md b/docs/utilities/spacing.md
index 045c4b213..1ee1ab7fb 100644
--- a/docs/utilities/spacing.md
+++ b/docs/utilities/spacing.md
@@ -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 %}