image resize in bootstrap

user_18865046 0
Viewed 62

I am new to html, css, & bootstrap. I am having a problem with an image with a class of card-img-top. I can t figure out why it doesn t maintain the pre-height of the col-sm-4 when I insert my image. The image has the size:339x508. It gets larger in height from others. Here is the code:

        <div class="col-sm-4">
            <div class="card" style="width: 18rem; margin-bottom: 3em;">
              <img src="images/fashion.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card_title">Fashion</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="card" style="width: 18rem; margin-bottom: 3em;">
              <img src="images/entertainment.jpg" class="card-img-top" alt="...">
              <div class="card-body">
                  <h5 class="card_title">Entertainment</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
bootstrap-4 css html
2 Answers
.card-img-top
   {
     height: 250px;
   }

You can set the height of your image like this.

user_177292400 
<div class="col-sm-4">
        <div class="card" style="margin-bottom: 3em;">
            <img src="https://via.placeholder.com/339x508" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card_title">Fashion</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="card" style="margin-bottom: 3em;">
            <img src="https://via.placeholder.com/339x508" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card_title">Entertainment</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>

remove width from card.

user_187446230
Related