CODEWITHSUNDEEP
htmlcssbootstrap-4
jackD
jackD

Reputation: 801

How do I make images responsive using bootstrap4 flexbox?

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.

Here is the CODEPEN

Below is the code:

index.html

.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;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section class="Top-Categories-Img-Card">
  <h3 class="Top-Categories">Top Categories</h3>
  <div class="row">
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Fun & Recreation</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Education & Skill Development</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Informative & Motivational</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Health & Fitness</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Kids & Teens</a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-2">
      <div class="">
        <img class="card-img-top Top-Categories-Img" src="https://www.dropbox.com/s/9h4jk5s6ca0suqu/pic2.jpg?raw=1" alt="Card image">
        <div class="card-body">
          <a href="#" class="Top-Categories-Label">Home Maintenance</a>
        </div>
      </div>
    </div>
  </div>
</section>

Upvotes: 1

Views: 814

Answers (2)

Joost Meijer
Joost Meijer

Reputation: 395

You are looking for a way to make images responsive within a grid.

Everything you need to know can be found in the official documentation of Bootstrap 4. https://getbootstrap.com/

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-sm">
      <img src="http://placehold.it/720x480" class="img-fluid" alt="Responsive image">
    </div>
    <div class="col-sm">
      <img src="http://placehold.it/720x480" class="img-fluid" alt="Responsive image">
    </div>
    <div class="col-sm">
      <img src="http://placehold.it/720x480" class="img-fluid" alt="Responsive image">
    </div>
  </div>
</div>

Upvotes: 0

WebDevBooster
WebDevBooster

Reputation: 14964

Your custom css hacks (unnecessary hacks) are messing up Bootstrap.

To fix the problem do this:

  1. Add the container class to the <section> and

  2. Remove all of your custom css

Now everything will start working as expected and you can start adding custom css line by line to see where your custom css breaks Bootstrap.

Also, you don't need to write classes like col-sm-12 col-md-2. You just need col-md-2 in that case because on screens smaller than md it will automatically default to full width i.e. the equivalent of col-sm-12.

Upvotes: 1

Related Questions