title: How do I make images responsive using bootstrap4 flexbox?
body: <p>I have section "Top Categories" and I am trying to make the image cards responsive but am not able to achieve it. Not sure what am I missing. I have used flexbox classes from bootstrap 4 but still it doesn't work.</p>
  
  <p>Here is the <a href="https://codepen.io/HebleV/pen/RQOzKK" rel="nofollow noreferrer">CODEPEN</a></p>
  
  <p>Below is the code:</p>
  
  <p><strong>index.html</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.Top-Categories {
    width: 267px;
    height: 29px;
    padding-bottom: 24px;
    font-family: arial;
    font-size: 24px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #4a4a4a;
  }
  
  .Top-Categories-Img-Card {
    width: 1104px;
    margin-left: 205px;
    margin-right: 205px;
  }
  
  .Top-Categories-Img {
    width: 159px;
    height: 238px;
  }
  
  .Top-Categories-Label {
    width: 93px;
    height: 15px;
    padding-left: 0px;
    font-family: arial;
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #4a4a4a;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;section class="Top-Categories-Img-Card"&gt;
    &lt;h3 class="Top-Categories"&gt;Top Categories&lt;/h3&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-12 col-md-2"&gt;
        &lt;div class=""&gt;
          &lt;img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image"&gt;
          &lt;div class="card-body"&gt;
            &lt;a href="#" class="Top-Categories-Label"&gt;Fun &amp; Recreation&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-12 col-md-2"&gt;
        &lt;div class=""&gt;
          &lt;img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image"&gt;
          &lt;div class="card-body"&gt;
            &lt;a href="#" class="Top-Categories-Label"&gt;Education &amp; Skill Development&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-12 col-md-2"&gt;
        &lt;div class=""&gt;
          &lt;img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image"&gt;
          &lt;div class="card-body"&gt;
            &lt;a href="#" class="Top-Categories-Label"&gt;Informative &amp; Motivational&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-12 col-md-2"&gt;
        &lt;div class=""&gt;
          &lt;img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image"&gt;
          &lt;div class="card-body"&gt;
            &lt;a href="#" class="Top-Categories-Label"&gt;Health &amp; Fitness&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-12 col-md-2"&gt;
        &lt;div class=""&gt;
          &lt;img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image"&gt;
          &lt;div class="card-body"&gt;
            &lt;a href="#" class="Top-Categories-Label"&gt;Kids &amp; Teens&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-12 col-md-2"&gt;
        &lt;div class=""&gt;
          &lt;img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image"&gt;
          &lt;div class="card-body"&gt;
            &lt;a href="#" class="Top-Categories-Label"&gt;Home Maintenance&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>