I'm working on creating a layout in HTML/CSS/Bootstrap with an image and text below it. The challenge is to ensure that the text always starts at the left border of the image, regardless of its length.
Here's what I need the layout to look like: https://i.stack.imgur.com/GiJVI.png
The issue arises when I apply text-alignment:center; to the bootstrap grid columns containing the image and text. While this centers the picture, it also centers the text under it. However, my requirement is for the text to be aligned to the bottom left corner of the image, irrespective of the parent div's CSS!
This is the code snippet for one column of the Bootstrap grid:
<div class="container main-div">
<div class="row">
<div class="col-auto col-md-3 col-xs-6 col-sm-4">
<div class="card-d">
<img src="pics/tea.jpg" alt="tea">
<div class="desc">
<span><h4>Tea | 1 Kg</h4></span>
<p>The price is : 56.0</p>
<button>View</button>
</div>
</div>
</div>
CSS:
.main-div {
width: 90%;
background-color: white;
padding: 5% 1%;
text-align: center;
margin-left: auto;
}
.col-auto {
position: relative;
border: 1px solid blue;
margin: 10px auto;
padding-left: 6%;
padding-bottom: 4%;
}
.col-auto .desc {
width: 100%;
justify-content: left;
font-family: Arial;
text-align: left;
}
.col-auto img {
width: 140px;
height: 100px;
padding: 5px;
display: inline-block;
margin: 0 auto;
border: 1px solid #088837;
}
button {
background-color: green;
color: white;
}
Despite multiple attempts, the alignment remains unchanged:
https://i.stack.imgur.com/ZBVu7.png
Here's the link to my Fiddle: