Merge pull request #17168 from kkirsche/patch-19

v4 - Rename .img-responsive class to .img-fluid

docs/assets/scss/_featured-sites.scss

@@ -5,7 +5,7 @@
 .bd-featured-sites .col-xs-6 {
   padding: 1px;
 }
-.bd-featured-sites .img-responsive {
+.bd-featured-sites .img-fluid {
   margin-top: 0;
 }
 

docs/assets/scss/_featurettes.scss

@@ -72,7 +72,7 @@
 }
 
 @media (min-width: 480px) {
-  .bd-featurette .img-responsive {
+  .bd-featurette .img-fluid {
     margin-top: 2rem;
   }
 }
@@ -91,7 +91,7 @@
   .bd-featurette .lead {
     max-width: 80%;
   }
-  .bd-featurette .img-responsive {
+  .bd-featurette .img-fluid {
     margin-top: 0;
   }
 }

docs/content/images.md

@@ -13,20 +13,20 @@ Opt your images into responsive behavior (so they never become larger than their
 
 ## Responsive images
 
-Images in Bootstrap are made responsive with `.img-responsive`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
+Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
 
 <div class="bd-example">
-  <img data-src="holder.js/100%x250" class="img-responsive" alt="Generic responsive image">
+  <img data-src="holder.js/100%x250" class="img-fluid" alt="Generic responsive image">
 </div>
 
 {% highlight html %}
-<img src="..." class="img-responsive" alt="Responsive image">
+<img src="..." class="img-fluid" alt="Responsive image">
 {% endhighlight %}
 
 {% callout warning %}
 #### SVG images and IE 9-10
 
-In Internet Explorer 9-10, SVG images with `.img-responsive` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
+In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
 {% endcallout %}
 
 ## Image shapes

docs/dist/css/bootstrap.css

@@ -649,7 +649,7 @@ mark,
   color: #818a91;
 }
 
-.img-responsive, .figure > img, .carousel-inner > .carousel-item > img,
+.img-fluid, .figure > img, .carousel-inner > .carousel-item > img,
 .carousel-inner > .carousel-item > a > img {
   display: block;
   max-width: 100%;

docs/examples/carousel/index.html

@@ -132,7 +132,7 @@
           <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
         </div>
         <div class="col-md-5">
-          <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
+          <img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
         </div>
       </div>
 
@@ -144,7 +144,7 @@
           <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
         </div>
         <div class="col-md-5 col-md-pull-7">
-          <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
+          <img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
         </div>
       </div>
 
@@ -156,7 +156,7 @@
           <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
         </div>
         <div class="col-md-5">
-          <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
+          <img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
         </div>
       </div>
 

docs/examples/dashboard/index.html

@@ -71,22 +71,22 @@
 
           <div class="row placeholders">
             <div class="col-xs-6 col-sm-3 placeholder">
-              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
               <h4>Label</h4>
               <span class="text-muted">Something else</span>
             </div>
             <div class="col-xs-6 col-sm-3 placeholder">
-              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
               <h4>Label</h4>
               <span class="text-muted">Something else</span>
             </div>
             <div class="col-xs-6 col-sm-3 placeholder">
-              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
               <h4>Label</h4>
               <span class="text-muted">Something else</span>
             </div>
             <div class="col-xs-6 col-sm-3 placeholder">
-              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
+              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
               <h4>Label</h4>
               <span class="text-muted">Something else</span>
             </div>

docs/index.html

@@ -55,17 +55,17 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
 
     <div class="row">
       <div class="col-sm-4 m-b-lg">
-        <img src="assets/img/sass.png" alt="Sass support" class="img-responsive">
+        <img src="assets/img/sass.png" alt="Sass support" class="img-fluid">
         <h4>Preprocessor</h4>
         <p>Bootstrap ships with vanilla CSS, but its source code utilizes <a href="http://sass-lang.com/">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
       </div>
       <div class="col-sm-4 m-b-lg">
-        <img src="assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
+        <img src="assets/img/devices.png" alt="Responsive across devices" class="img-fluid">
         <h4>One framework, every device.</h4>
         <p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
       </div>
       <div class="col-sm-4 m-b-lg">
-        <img src="assets/img/components.png" alt="Components" class="img-responsive">
+        <img src="assets/img/components.png" alt="Components" class="img-fluid">
         <h4>Full of features</h4>
         <p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
       </div>
@@ -89,7 +89,7 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
       <a href="{{ site.themes }}" class="btn btn-bs btn-outline">Browse themes</a>
     </p>
 
-    <img class="img-responsive center-block" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
+    <img class="img-fluid center-block" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
   </div>
 </div>
 
@@ -102,7 +102,7 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
     {% for showcase in site.data.showcase %}
       <div class="col-xs-6 col-sm-3">
         <a href="{{ showcase.expo_url }}" target="_blank" title="{{ showcase.name }}">
-          <img src="{{ site.baseurl }}/assets/img/expo-{{ showcase.img }}.jpg" alt="{{ showcase.name }}" class="img-responsive">
+          <img src="{{ site.baseurl }}/assets/img/expo-{{ showcase.img }}.jpg" alt="{{ showcase.name }}" class="img-fluid">
         </a>
       </div>
     {% endfor %}

scss/_carousel.scss

@@ -16,7 +16,7 @@
     // Account for jankitude on images
     > img,
     > a > img {
-      @extend .img-responsive;
+      @extend .img-fluid;
       line-height: 1;
     }
 

scss/_images.scss

 // Responsive images (ensure images don't scale beyond their parents)
-.img-responsive {
-  @include img-responsive();
+.img-fluid {
+  @include img-fluid();
 }
 
 // Rounded corners
@@ -19,7 +19,7 @@
   @include box-shadow(0 1px 2px rgba(0,0,0,.075));
 
   // Keep them at most 100% wide
-  @include img-responsive(inline-block);
+  @include img-fluid(inline-block);
 }
 
 // Perfect circle

scss/_type.scss

@@ -175,7 +175,7 @@ mark,
   display: inline-block;
 
   > img {
-    @extend .img-responsive;
+    @extend .img-fluid;
     margin-bottom: ($spacer-y / 2);
     line-height: 1;
   }

scss/mixins/_image.scss

@@ -7,7 +7,7 @@
 //
 // Keep images from scaling beyond the width of their parents.
 
-@mixin img-responsive($display: block) {
+@mixin img-fluid($display: block) {
   display: $display;
   max-width: 100%; // Part 1: Set a maximum relative to the parent
   height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching