I'm facing an issue with vertical alignment of content within a card. I've gone through various resources in Bootstrap 4 for guidance, including:
Below is the code I've been working with:
<div class="col-sm-12 col-md-4">
<div class="white-card item" data-mh="my-group-2">
<div class="white-card-block h-100 justify-content-center">
<div class="row">
<div class="left-side">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.02 20.97">
<defs>
<style>
.cls-1 {
fill: #ed8b00;
fill-rule: evenodd;
}
</style>
</defs>
<g id="Layer_1" data-name="Layer 1">
<g id="Guides">
<path class="cls-1" d="M27,4.1a1.67,1.67,0,0,0-.49-1.2L24.16.49a1.68,1.68,0,0,0-2.37,0L10.35,12.09,5.23,6.88a1.68,1.68,0,0,0-2.37,0L.49,9.29A1.67,1.67,0,0,0,0,10.49a1.7,1.7,0,0,0,.49,1.2L6.8,18.08l2.37,2.4a1.68,1.68,0,0,0,2.37,0l2.37-2.4L26.53,5.3A1.7,1.7,0,0,0,27,4.1Z" />
</g>
</g>
</svg>
</div>
<div class="right-side">
<h4><strong>Easy Installation</strong></h4>
<p>Easy Installation on new or existing electric and gas tanks</p>
</div>
</div>
</div>
</div>
Here is the CSS I'm using for the card:
.white-card {
margin: 15px 0;
.white-card-block {
.left-side {
display: inline-block;
width: 10%;
margin: 0 5%;
}
.right-side {
display: inline-block;
width: 80%;
p {
margin: 0;
}
}
}
}
And here is a screenshot of the current appearance of my card: https://i.sstatic.net/ag61p.png
I've been struggling with this for a while now. Any assistance would be greatly appreciated. Thanks in advance! :)