Reputation: 356
I have a card and I would like to vertically align the content within the card. I have literally tried everything in the bootstrap 4 guidelines and tutorials that is listed here:
https://v4-alpha.getbootstrap.com/utilities/vertical-align/
https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items
Here is my code:
<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 for my 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;
}
}
}
}
here is an image of what my card looks like currently:
Any help will help. I have been picking my brain for hours. Thanks in advance. :)
Upvotes: 0
Views: 1035
Reputation: 2968
I removed your row div cause it was unecessary and replaced the class justify-content-center for two classes d-flex align-items-center. I also added these two classes to the left-side div
I defined width and height in the svg tag cause it was not showing for me
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<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 d-flex align-items-center">
<div class="left-side d-flex align-items-center">
<svg width="30" height="30" 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>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
CSS
.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;
}
}
}
}
Upvotes: 1