diff --git a/docs/_includes/css/images.html b/docs/_includes/css/images.html
index 73516afbaec4..4a9ad5c653ce 100644
--- a/docs/_includes/css/images.html
+++ b/docs/_includes/css/images.html
@@ -7,6 +7,10 @@ <h2 id="images-responsive">Responsive images</h2>
     <h4>SVG images and IE 8-10</h4>
     <p>In Internet Explorer 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
   </div>
+  <div class="bs-callout bs-callout-info" id="callout-helper-pull-navbar">
+    <h4>Centering responsive images</h4>
+    <p>To align components which use the <code>.img-responsive</code> class, use <code>.center-block</code> instead of <code>.text-center</code>. <a href="../css/#helper-classes-center">See the helper classes docs</a> for details.</p>
+  </div>
 {% highlight html %}
 <img src="..." class="img-responsive" alt="Responsive image">
 {% endhighlight %}