bootstrap align img same line [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I would like to have the IMG aligned on the same line using bootstrap how to do it? I am quite junior.
Is it necessary to define col-12 below the row?
img {
width: 15rem;
height: 15rem;
margin: 10px 0;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" *ngFor="let img of lstImg">
<div class="col-sm-3" *ngIf="img != 'tImg'; else elseBlock">
<img src="https://thumbs.dreamstime.com/z/tv-test-image-card-rainbow-multi-color-bars-geometric-signals-retro-hardware-s-minimal-pop-art-print-suitable-89603635.jpg" alt="img">
</div>
<div class="col-sm-6" #elseBlock>
<img src="https://thumbs.dreamstime.com/z/tv-test-image-card-rainbow-multi-color-bars-geometric-signals-retro-hardware-s-minimal-pop-art-print-suitable-89603635.jpg" alt="img">
</div>
</div>
</div>

Answer 1

Contain two different sized images on the same row (Option 1)
The Bootstrap way... Adding .img-fluid class to the images applies max-width: 100%; and height: auto; so that they scale with the parent element.
img {
height: 15rem;
}
.row {
background: #e3e3e3; /* let's visualise the row */
}
.row div[class^='col'] {
padding: 10px;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" *ngFor="let img of lstImg">
<div class="col-sm-3" *ngIf="img != 'tImg'; else elseBlock">
<img class="img-fluid" src="https://thumbs.dreamstime.com/z/tv-test-image-card-rainbow-multi-color-bars-geometric-signals-retro-hardware-s-minimal-pop-art-print-suitable-89603635.jpg" alt="img">
</div>
<div class="col-sm-6" #elseBlock>
<img class="img-fluid" src="https://thumbs.dreamstime.com/z/tv-test-image-card-rainbow-multi-color-bars-geometric-signals-retro-hardware-s-minimal-pop-art-print-suitable-89603635.jpg" alt="img">
</div>
</div>
</div>
Contain two different sized images on the same row (Option 2)
Adding object-fit: contain; allows the images to fill their container. We'll also need to remove the .img-fluid class
img {
height: 100%;
width: 100%;
object-fit: contain;
}
.row {
background: #e3e3e3; /* let's visualise the row */
}
.row div[class^='col'] {
padding: 10px;
height: 15rem;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" *ngFor="let img of lstImg">
<div class="col-sm-3" *ngIf="img != 'tImg'; else elseBlock">
<img src="https://thumbs.dreamstime.com/z/tv-test-image-card-rainbow-multi-color-bars-geometric-signals-retro-hardware-s-minimal-pop-art-print-suitable-89603635.jpg" alt="img">
</div>
<div class="col-sm-6" #elseBlock>
<img src="https://thumbs.dreamstime.com/z/tv-test-image-card-rainbow-multi-color-bars-geometric-signals-retro-hardware-s-minimal-pop-art-print-suitable-89603635.jpg" alt="img">
</div>
</div>
</div>
Images fill their container
Changing to object-fit: cover; allows the images to fill their container.
img {
height: 100%;
width: 100%;
object-fit: cover;
}
.row {
background: #e3e3e3; /* let's visualise the row */
}
.row div[class^='col'] {
padding: 10px;
height: 15rem;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" *ngFor="let img of lstImg">
<div class="col-sm-3" *ngIf="img != 'tImg'; else elseBlock">
<img src="https://thumbs.dreamstime.com/z/tv-test-image-card-rainbow-multi-color-bars-geometric-signals-retro-hardware-s-minimal-pop-art-print-suitable-89603635.jpg" alt="img">
</div>
<div class="col-sm-6" #elseBlock>
<img src="https://thumbs.dreamstime.com/z/tv-test-image-card-rainbow-multi-color-bars-geometric-signals-retro-hardware-s-minimal-pop-art-print-suitable-89603635.jpg" alt="img">
</div>
</div>
</div>
More info on the CSS object-fit Property here.