Merge branch 'v4-dev' into v4-forms-cleanup

4 files changed, 18 insertions, 5 deletions

diff --git a/docs/content/images.md b/docs/content/images.md
index e3e616de2..f21010f0f 100644
--- a/docs/content/images.md
+++ b/docs/content/images.md
@@ -47,7 +47,7 @@ Add classes to an `<img>` element to easily style images in any project.
 
 ## 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). A simple centering class can also be used for `block` level 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).
 
 <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">
@@ -60,11 +60,11 @@ Align images with the [helper float classes]({{ site.baseurl }}/components/utili
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">
-  <img data-src="holder.js/200x200" class="img-rounded center-block" alt="A generic square placeholder image with rounded corners">
+  <img data-src="holder.js/200x200" class="img-rounded m-x-auto d-block" alt="A generic square placeholder image with rounded corners">
 </div>
 
 {% highlight html %}
-<img src="..." class="img-rounded center-block" alt="...">
+<img src="..." class="img-rounded m-x-auto d-block" alt="...">
 {% endhighlight %}
 
 <div class="bd-example bd-example-images">
diff --git a/docs/content/reboot.md b/docs/content/reboot.md
index 73ea41171..de3f47a9f 100644
--- a/docs/content/reboot.md
+++ b/docs/content/reboot.md
@@ -193,7 +193,7 @@ Various form elements have been rebooted for simpler base styles. Here are some
 - `<fieldset>`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
 - `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
 - `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
-- `<input>`s, `<selects>`s, `<textareas>`s, and `<buttons>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
+- `<input>`s, `<select>`s, `<textarea>`s, and `<button>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
 - `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout.
 
 These changes, and more, are demonstrated below.
diff --git a/docs/content/tables.md b/docs/content/tables.md
index 80bbbf854..00f794693 100644
--- a/docs/content/tables.md
+++ b/docs/content/tables.md
@@ -420,6 +420,9 @@ Use contextual classes to color table rows or individual cells.
   </table>
 </div>
 
+{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
+{{ callout-include | markdownify }}
+
 {% highlight html %}
 <!-- On rows -->
 <tr class="table-active">...</tr>
@@ -564,6 +567,16 @@ For more information, read [this Stack Overflow answer](https://stackoverflow.co
 
 
 ### Reflow
+Turn traditional tables on their side by using `table-reflow`. When using reflow, the table header becomes the first column of the table, the first row within the table body becomes the second column, the second row becomes the third column, etc.
+
+{% callout warning %}
+#### Content order and complex tables
+
+Beware that the `table-reflow` style changes the visual order of content. Make sure that you only apply this style to well-formed and simple data tables (and in particular, don't use this for layout tables) with appropriate `<th>` table header cells for each row and column.
+
+In addition, this class will not work correctly for tables with cells that span multiple rows or columns (using `rowspan` or `colspan` attributes).
+
+{% endcallout %}
 
 {% example html %}
 <table class="table table-reflow">
diff --git a/docs/content/typography.md b/docs/content/typography.md
index f0fc1a4bb..a49eadedb 100644
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -211,7 +211,7 @@ Remove the default `list-style` and left margin on list items (immediate childre
 
 ### Inline
 
-Place all list items on a single line with `display: inline-block;` and some basic margin between.
+Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`.
 
 {% example html %}
 <ul class="list-inline">