Breaking News: Grepper is joining You.com. Read the official announcement!

image not fit into bootstrap grid system

Vivacious Vulture answered on April 16, 2023 Popularity 2/10 Helpfulness 1/10

answer image not fit into bootstrap grid system

image not fit into bootstrap grid system

Comment

Use img-responsive and h-100 to keep aspect ratio and ensure image fit in bootstrap grid system

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex gap-2">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
   <img src="https://i.imgur.com/tm1bGx3.jpg" class="img-fluid mx-auto mx-lg-0 h-100 col-3 my-auto">
</div>
 Run code snippet

Popularity 2/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: image whatever

Link to this answer
Share Copy Link