docs rearrange

dist/css/bootstrap.css

@@ -667,6 +667,9 @@ mark,
   content: "\00A0 \2014";
 }
 
+.figure {
+  display: inline-block;
+}
 .figure > img {
   margin-bottom: .5rem; 
   line-height: 1;

docs/_data/nav.yml

@@ -30,8 +30,8 @@
     - title: Reboot
     - title: Typography
     - title: Code
-    - title: Tables
     - title: Images
+    - title: Tables
     - title: Figures
 
 - title: Components

docs/_includes/page-headers.html

@@ -8,6 +8,11 @@
   <p class="lead">
     Options for structuring your pages with Bootstrap, including global styles, required scaffolding, grid system, and more.
   </p>
+{% elsif page.group == "content" %}
+  <h1>Content</h1>
+  <p class="lead">
+    Styles for displaying content with some of the most commonly used HTML elements, including normalization, typography, images, tables, and more.
+  </p>
 {% elsif page.group == "components" %}
   <h1>Components</h1>
   <p class="lead">

docs/content/code.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Code
-group: components
+group: content
 ---
 
 Styles for inline code snippets and longer, multiline blocks of code.

docs/content/figures.md

@@ -0,0 +1,25 @@
+---
+layout: page
+title: Images
+group: content
+---
+
+Anytime you need to display a piece of content—like an image—with an optional caption, consider using a `<figure>`.
+
+Use the included `.figure` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. As a bonus, immediate children images are automatically responsive.
+
+{% example html %}
+<figure class="figure">
+  <img data-src="holder.js/400x300" class="img-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]().
+
+{% example html %}
+<figure class="figure">
+  <img data-src="holder.js/400x300" class="img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
+  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
+</figure>
+{% endexample %}

docs/content/images.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Images
-group: components
+group: content
 ---
 
 Opt your images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
@@ -78,14 +78,3 @@ Align images with the [helper float classes](/components/helpers) or [text align
   <img src="..." class="img-rounded" alt="...">
 </div>
 {% endhighlight %}
-
-## Figures
-
-Use the included `.figure` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. As a bonus, immediate children images are automatically responsive.
-
-{% example html %}
-<figure class="figure">
-  <img data-src="holder.js/400x300" class="img-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 %}

docs/content/reboot.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Reboot
-group: components
+group: content
 ---
 
 Part of Bootstrap's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that.

docs/content/tables.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Tables
-group: components
+group: content
 ---
 
 Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`.

docs/content/typography.md

@@ -1,7 +1,7 @@
 ---
 layout: page
 title: Typography
-group: components
+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](/components/utilities/).

docs/dist/css/bootstrap.css

@@ -667,6 +667,9 @@ mark,
   content: "\00A0 \2014";
 }
 
+.figure {
+  display: inline-block;
+}
 .figure > img {
   margin-bottom: .5rem; 
   line-height: 1;

scss/_type.scss

@@ -193,6 +193,9 @@ mark,
 //
 
 .figure {
+  // Ensures the caption's text aligns with the image.
+  display: inline-block;
+
   > img {
     @extend .img-responsive;
     line-height: 1;