Photoshop Question posted in
The official user guide can be found here.

Why doesn't Bootstrap Card contain image? – Photoshop

I’m using the current Bootstrap Card from their documentation:

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="/img/drum-kit-min.png">
  <div class="card-block">
    <h4>Card title</h4>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#">Go somewhere</a>
  </div>
</div>

But when adding my image it overflows the card container like so:

Screenshot

I’ve tried changing the size of the image but to no avail:

.card-img-to {
  width: 10px;
}

I also have tried adding the bootstrap image-responsive class to it. Is there any way to get this image responsive to the card, or do I have to photoshop the image?

Tags:

3

Answers


  1. 0

    try giving max-width:100%; to img

    .card img{
  max-width:100%;
}

    or add img-responsive class to img tag

    <img class="img-responsive" src="yourpath/img.jpg" />
    Login or Signup to reply.
  2. 0

    Your CSS class is incorrect. You are using .card-img-top in the HTML, and .card-img-to in your stylesheet. You’ll need to add the missing t. Since you are controlling the width of the parent .card, you can set the image to width:100%.

    .card {
  width: 250px; /* Using this as an example, you can keep 20rem */
  overflow: hidden; /* Optional */
}
.card-img-top {
  width: 100%;
}
    <div class="card">
  <img class="card-img-top" src="http://placehold.it/500x500">
  <div class="card-block">
    <h4>Card title</h4>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#">Go somewhere</a>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    Modify your HTML code

     <div class="card" style="width: 100%;">
     <img class="card-img-top" src="/img/drum-kit-min.png" style="width:100%" alt="Card image cap">
     <div class="card-block">
          <h4 class="card-title">Card title</h4>
          <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>
          <a href="#" class="btn btn-primary">Go somewhere</a>
     </div>
 </div>

    Or you can put the image as background of .card

    CSS

    .card {
    background-image: url("img/drum-kit-min.png");
}

    HTML

     <div class="card" style="width: 100%;">
     <div class="card-block">
          <h4 class="card-title">Card title</h4>
          <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>
          <a href="#" class="btn btn-primary">Go somewhere</a>
     </div>
 </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search