Search code examples
htmlcssbootstrap-5card

How to make an image bigger than the card but still inside the card with Bootstrap?

How to make a card with a design like the image below using Bootstrap 5.3.3 and HTML on the website

enter image description here

Solution

  • You can set the height of the div with position: relative, and make the image height more than the div and position: absolute; then you can have the image bigger than the div (card)

    Example:

    div { width: 250px; height: 100px; border: 2px solid #333; border-radius:10px; position: relative; padding-left: 120px;}
div img { position: absolute; width: 100px; height: 120px; left: -2px; top: -20px; border-radius: 10px;}
    <div>
  <h3>Title</h3>
  <h4>Subtitle</h4>
  <img src="https://picsum.photos/seed/picsum/536/354" alt="image">
</div>