title: Why is the img-fluid class in Bootstrap 4 not resizing my images in their divs?
body: <p>I have a Bootply playground example here: <a href="https://www.bootply.com/eXlkXkUvDJ" rel="noreferrer">https://www.bootply.com/eXlkXkUvDJ</a></p>
  
  <p>I'm trying to align the bottom three images so that the far left and far right images are flush with the main image and titles. I also want the images to fill the divs completely -- I highlighted the first image div in black so you can see that the image is not completely filling it. </p>
  
  <p>I checked the Bootstrap 4 documentation and it looks like the 'img-fluid' class should make the images fill each div, but that's not happening. </p>
  
  <p>Here's my HTML code: </p>
  
  <pre><code>&lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;Aisha Wells Portfolio&lt;/title&gt;
  &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
  &lt;link rel="stylesheet" href="main.css"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"&gt;
  &lt;div class="container" alt="this is the main container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6" alt="udacity logo"&gt;
              &lt;img src="http://cdn.onlinewebfonts.com/svg/img_369247.png" alt="fake logo" width="50" height="50" class="img-responsive"&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6 text-right text-uppercase" alt="my name"&gt;
                  &lt;h1&gt; Shere Wells &lt;/h1&gt;
  
                  &lt;h3&gt; Writer and Filmmaker &lt;/h3&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container" alt="this is the main container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12 rule"&gt;
              &lt;hr&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12 main-img" alt="this is the main image"&gt;
              &lt;img class="img-fluid" src="http://www.placepuppy.net/400/250" width="100%"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
                  &lt;h4&gt;Featured Work&lt;/h4&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-4 first" alt="First project image"&gt;
                  &lt;img class="img-fluid" src="https://placekitten.com/250/250" alt="kitteh"&gt;
                      &lt;h5&gt;First Name&lt;/h5&gt;
  
              &lt;/div&gt;
              &lt;div class="col-md-4 second" alt="Second project image"&gt;
                  &lt;img class="img-fluid" src="https://placekitten.com/250/250" alt="kitteh"&gt;
                      &lt;h5&gt;Second Name&lt;/h5&gt;
  
              &lt;/div&gt;
              &lt;div class="col-md-4 third" alt="Third project image"&gt;
                  &lt;img class="img-fluid" src="https://placekitten.com/250/250" alt="kitteh"&gt;
                      &lt;h5&gt;Third Name&lt;/h5&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="push"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And here's my CSS code: </p>
  
  <pre><code>/* CSS used here will be applied after bootstrap.css */
  
  @charset "UTF-8"; 
  /*CSS Document for My Portfolio Page*/
  
  h1 { 
      color: #2d3c49; 
      float: right; 
      font-family: 'Montserrat', sans-serif;
  }
  
  h3 {
      color:#7d97ad;
      float: right;
      font-size: 20px;
      font-family: 'Montserrat', sans-serif;
  
  }
  
  h4 {
      color:#7d97ad;
      font-family: 'Montserrat', sans-serif;
  
  }
  
  h5 {
      color:#7d97ad; 
      font-family: 'Montserrat', sans-serif;
  }
  
  hr {
      border-top-style: solid;
      border-top-width: thick;
      border-top-color:#7d97ad; 
      padding-top:20px;
  
    }
  
  .first {
      background-color:black; 
  
  }
  
  .col-md-6 {
      background-color:black; 
  
  }
  </code></pre>