Although the title may seem misleading, I struggled to come up with a better one. What I need is to have an image aligned with text within a div, and a button below that text. However, I'm facing difficulty in making the button take up the full width without adding any padding regardless of what I attempt.
To provide a clearer explanation, here's an illustration of what I'm aiming for:
https://i.sstatic.net/WYC94.jpg
I am attempting to achieve this using only Bootstrap 4 utilities. Here is my code progress so far:
.col-md-3 {
background-color: #ededed;
}
.img {
width: 188px;
height: 88px;
background-color: #292a2c;
}
.btn {
background-color: #292a2c;
color: #ededed;
}<div class="col-md-3 d-flex p-0">
<div class="img"></div>
<div>
<h6 class="m-auto">Text goes here</h6>
<button class="btn rounded-0 btn-block">Button</button>
</div>
</div>How can I resolve this issue? Also, note that the .img class div serves as a placeholder and must remain as it is.
Thank you!