Merge pull request #12499 from twbs/move-responsive-imgs-sect

move .img-responsive docs from Overview to Images section

docs/_includes/nav-css.html

@@ -3,7 +3,6 @@
   <ul class="nav">
     <li><a href="#overview-doctype">HTML5 doctype</a></li>
     <li><a href="#overview-mobile">Mobile first</a></li>
-    <li><a href="#overview-responsive-images">Responsive images</a></li>
     <li><a href="#overview-type-links">Typography and links</a></li>
     <li><a href="#overview-normalize">Normalize.css</a></li>
     <li><a href="#overview-container">Containers</a></li>
@@ -85,6 +84,10 @@
 </li>
 <li>
   <a href="#images">Images</a>
+  <ul class="nav">
+    <li><a href="#images-responsive">Responsive images</a></li>
+    <li><a href="#images-shapes">Image shapes</a></li>
+  </ul>
 </li>
 <li>
   <a href="#helper-classes">Helper classes</a>

docs/css.html

@@ -31,12 +31,6 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
   <p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!</p>
 {% highlight html %}
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-{% endhighlight %}
-
-  <h3 id="overview-responsive-images">Responsive images</h3>
-  <p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
-{% highlight html %}
-<img src="..." class="img-responsive" alt="Responsive image">
 {% endhighlight %}
 
   <h3 id="overview-type-links">Typography and links</h3>
@@ -2337,6 +2331,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <div class="bs-docs-section">
   <h1 id="images" class="page-header">Images</h1>
 
+  <h2 id="images-responsive">Responsive images</h2>
+  <p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
+{% highlight html %}
+<img src="..." class="img-responsive" alt="Responsive image">
+{% endhighlight %}
+
+  <h2 id="images-shapes">Image shapes</h2>
   <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
   <div class="bs-callout bs-callout-danger">
     <h4>Cross-browser compatibility</h4>
@@ -2352,11 +2353,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <img src="..." alt="..." class="img-circle">
 <img src="..." alt="..." class="img-thumbnail">
 {% endhighlight %}
-
-  <div class="bs-callout bs-callout-info">
-    <h4>Responsive images</h4>
-    <p>Looking for how to make images more responsive? <a href="#overview-responsive-images">Check out the responsive images section</a> up top.</p>
-  </div>
 </div>