Merge branch 'master' into derp

Conflicts:
	Gruntfile.js
	dist/css/bootstrap-theme.css
	dist/css/bootstrap-theme.css.map
	dist/css/bootstrap-theme.min.css
	dist/css/bootstrap.css
	dist/css/bootstrap.css.map
	dist/css/bootstrap.min.css
	docs/_includes/components/dropdowns.html
	docs/_includes/components/media.html
	docs/_includes/components/navs.html
	docs/_includes/components/progress-bars.html
	docs/_includes/components/responsive-embed.html
	docs/_includes/css/buttons.html
	docs/_includes/css/forms.html
	docs/_includes/css/less.html
	docs/_includes/css/overview.html
	docs/_includes/css/responsive-utilities.html
	docs/_includes/customizer-variables.html
	docs/_includes/getting-started/browser-device-support.html
	docs/_includes/getting-started/grunt.html
	docs/_includes/getting-started/template.html
	docs/_includes/header.html
	docs/_includes/js/alerts.html
	docs/_includes/js/buttons.html
	docs/_includes/js/carousel.html
	docs/_includes/js/collapse.html
	docs/_includes/js/dropdowns.html
	docs/_includes/js/modal.html
	docs/_includes/js/popovers.html
	docs/_includes/js/scrollspy.html
	docs/_includes/js/tabs.html
	docs/_includes/js/tooltips.html
	docs/_includes/nav/components.html
	docs/_includes/nav/getting-started.html
	docs/_layouts/default.html
	docs/about.html
	docs/assets/css/docs.min.css
	docs/assets/css/src/docs.css
	docs/assets/js/customize.min.js
	docs/assets/js/docs.min.js
	docs/assets/js/raw-files.min.js
	docs/browser-bugs.html
	docs/components.html
	docs/components/navbar.md
	docs/css.html
	docs/dist/css/bootstrap-theme.css
	docs/dist/css/bootstrap-theme.css.map
	docs/dist/css/bootstrap-theme.min.css
	docs/dist/css/bootstrap.css
	docs/dist/css/bootstrap.css.map
	docs/dist/css/bootstrap.min.css
	docs/examples/blog/index.html
	docs/examples/carousel/index.html
	docs/examples/cover/index.html
	docs/examples/dashboard/index.html
	docs/examples/grid/index.html
	docs/examples/jumbotron-narrow/index.html
	docs/examples/jumbotron/index.html
	docs/examples/justified-nav/index.html
	docs/examples/navbar-fixed-top/index.html
	docs/examples/navbar-static-top/index.html
	docs/examples/navbar/index.html
	docs/examples/non-responsive/index.html
	docs/examples/offcanvas/index.html
	docs/examples/signin/index.html
	docs/examples/starter-template/index.html
	docs/examples/sticky-footer-navbar/index.html
	docs/examples/sticky-footer/index.html
	docs/examples/theme/index.html
	docs/examples/tooltip-viewport/index.html
	docs/getting-started.html
	docs/javascript.html
	docs/migration.html
	less/_animation.less
	less/_modal.less
	less/_navbar.less
	less/_variables.less
	less/glyphicons.less
	less/navs.less
	less/panels.less
	less/progress-bars.less

2 files changed, 55 insertions, 12 deletions

diff --git a/docs/layout/media.md b/docs/layout/media.md
index e90863f87..4ebe8d05f 100644
--- a/docs/layout/media.md
+++ b/docs/layout/media.md
@@ -46,6 +46,49 @@ Media components can also be nested.
 </div>
 {% endexample %}
 
+### Media alignment
+
+The images or other media can be aligned top, middle, or bottom. The default is top aligned.
+
+{% example html %}
+<div class="media">
+  <a class="media-left" href="#">
+    <img data-src="holder.js/64x64" alt="Generic placeholder image">
+  </a>
+  <div class="media-body">
+    <h4 class="media-heading">Top aligned media</h4>
+    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+  </div>
+</div>
+{% endexample %}
+
+{% example html %}
+<div class="media">
+  <a class="media-left media-middle" href="#">
+    <img data-src="holder.js/64x64" alt="Generic placeholder image">
+  </a>
+  <div class="media-body">
+    <h4 class="media-heading">Middle aligned media</h4>
+    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+  </div>
+</div>
+{% endexample %}
+
+{% example html %}
+<div class="media">
+  <a class="media-left media-bottom" href="#">
+    <img data-src="holder.js/64x64" alt="Generic placeholder image">
+  </a>
+  <div class="media-body">
+    <h4 class="media-heading">Bottom aligned media</h4>
+    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
+    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+  </div>
+</div>
+{% endexample %}
+
 ### Media list
 
 With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md
index 234ae5149..5191ce6ec 100644
--- a/docs/layout/responsive-utilities.md
+++ b/docs/layout/responsive-utilities.md
@@ -183,29 +183,29 @@ Green checkmarks indicate the element **is visible** in your current viewport.
   </div>
 </div>
 <div class="row responsive-utilities-test visible-on">
-  <div class="col-xs-6 col-sm-6">
+  <div class="col-xs-6">
     <span class="hidden-xs hidden-sm">Extra small and small</span>
     <span class="visible-xs-block visible-sm-block">&#10004; Visible on x-small and small</span>
   </div>
-  <div class="col-xs-6 col-sm-6">
+  <div class="col-xs-6">
     <span class="hidden-md hidden-lg">Medium and large</span>
     <span class="visible-md-block visible-lg-block">&#10004; Visible on medium and large</span>
   </div>
   <div class="clearfix visible-xs-block"></div>
-  <div class="col-xs-6 col-sm-6">
+  <div class="col-xs-6">
     <span class="hidden-xs hidden-md">Extra small and medium</span>
     <span class="visible-xs-block visible-md-block">&#10004; Visible on x-small and medium</span>
   </div>
-  <div class="col-xs-6 col-sm-6">
+  <div class="col-xs-6">
     <span class="hidden-sm hidden-lg">Small and large</span>
     <span class="visible-sm-block visible-lg-block">&#10004; Visible on small and large</span>
   </div>
   <div class="clearfix visible-xs-block"></div>
-  <div class="col-xs-6 col-sm-6">
+  <div class="col-xs-6">
     <span class="hidden-xs hidden-lg">Extra small and large</span>
     <span class="visible-xs-block visible-lg-block">&#10004; Visible on x-small and large</span>
   </div>
-  <div class="col-xs-6 col-sm-6">
+  <div class="col-xs-6">
     <span class="hidden-sm hidden-md">Small and medium</span>
     <span class="visible-sm-block visible-md-block">&#10004; Visible on small and medium</span>
   </div>
@@ -235,29 +235,29 @@ Here, green checkmarks also indicate the element **is hidden** in your current v
   </div>
 </div>
 <div class="row responsive-utilities-test hidden-on">
-  <div class="col-xs-6 col-sm-6">
+  <div class="col-xs-6">
     <span class="hidden-xs hidden-sm">Extra small and small</span>
     <span class="visible-xs-block visible-sm-block">&#10004; Hidden on x-small and small</span>
   </div>
-  <div class="col-xs-6 col-sm-6">
+  <div class="col-xs-6">
     <span class="hidden-md hidden-lg">Medium and large</span>
     <span class="visible-md-block visible-lg-block">&#10004; Hidden on medium and large</span>
   </div>
   <div class="clearfix visible-xs-block"></div>
-  <div class="col-xs-6 col-sm-6">
+  <div class="col-xs-6">
     <span class="hidden-xs hidden-md">Extra small and medium</span>
     <span class="visible-xs-block visible-md-block">&#10004; Hidden on x-small and medium</span>
   </div>
-  <div class="col-xs-6 col-sm-6">
+  <div class="col-xs-6">
     <span class="hidden-sm hidden-lg">Small and large</span>
     <span class="visible-sm-block visible-lg-block">&#10004; Hidden on small and large</span>
   </div>
   <div class="clearfix visible-xs-block"></div>
-  <div class="col-xs-6 col-sm-6">
+  <div class="col-xs-6">
     <span class="hidden-xs hidden-lg">Extra small and large</span>
     <span class="visible-xs-block visible-lg-block">&#10004; Hidden on x-small and large</span>
   </div>
-  <div class="col-xs-6 col-sm-6">
+  <div class="col-xs-6">
     <span class="hidden-sm hidden-md">Small and medium</span>
     <span class="visible-sm-block visible-md-block">&#10004; Hidden on small and medium</span>
   </div>