I have a webpage template in HTML and I'm looking to incorporate Bootstrap into it. Currently, I have two images within a Bootstrap column. I want to ensure that both images remain aligned and adjacent to each other, while also being centered in the middle of the column. However, when I attempt this, the images end up not being centered or are stacked on top of each other, which is not the desired outcome. I aim to have both images centered and side by side. Below is the code snippet:
<div class="row justify-content-center">
<div class="col-xl-6">
<img class="welcome-icon-size align-top center-block" src="{% static 'images/untitled-2.png'%}" alt="Generic placeholder image">
<img class="welcome-name-size no-margin-top center-block" src="{% static 'images/untitled-1.png'%}" alt="Generic placeholder image">
</div>
</div>
Here is the CSS styling:
.no-margin-top {
margin-top: 0px !important;
}
.no-padding {
padding: 0em !important;
}
.welcome-icon-size {
height: 9.55em !important;
}
.welcome-name-size {
height: 14em !important;
}
.welcome_title {
font-size: 1em !important
}
.welcome-center-items {
align-items: center !important;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
This is how the image currently appears:
https://i.sstatic.net/dqAdi.png
I want the image layout to resemble the following, but centered:
https://i.sstatic.net/KkxGS.png
In the screenshot above, the images are not centered and are positioned to the left of the column.