Basically I'm after the stars and genres to be at the bottom of the post (in line with the bottom of the poster). As you can see I've tried using align-self-end with no luck.
I am specifically looking for a Bootstrap v4 solution. I'm sure there are other ways of achieving by adding custom CSS, but I'm trying to keep it pure bootstrap.
https://www.codeply.com/go/bCChoF427L
Thanks in advance for your help.
Use d-flex and flex-column classes on col-md-8 div and flex-grow-1 on the last row. Keep in mind that is only works with the latest version of Bootstrap-4.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-8 offset-sm-2">
<div class="card card-body">
<div class="row">
<div class="col-md-4">
<img class="show-poster rounded w-100" src="https://nebula.wsimg.com/obj/NzQ3QUYxQzZBNzE4NjNFRTc1MTU6ODEyOTQ0ZTI1OTA3ZjZlMDcwZTkxNTAwY2YzZWUyNzA6Ojo6OjA=" alt="Superman Show Poster"></div>
<div class="col-md-8 d-flex flex-column">
<div class="row align-items-bottom">
<div class="col-md-8">
<h1>Superman</h1>
</div>
<div class="col-md-4 text-right">
<h6>2012-17 (Ended)</h6><small class="text-muted">126/137 Episodes</small></div>
</div>
<div>
<blockquote>Brian Finch him a criminal's worst nightmare and the greatest asset the Bureau has ever possessed.</blockquote>
</div>
<div class="row align-items-bottom flex-grow-1">
<div class="col align-self-end"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half"></i><br>7.8/10</div>
<div class="col align-self-end">TV-14<br>CBS</div>
<div class="col align-self-end text-right"><i class="fa fa-heart"></i><i class="fa fa-star"></i><i class="fa fa-music"></i><br>Family, Blah, blah</div>
</div>
</div>
</div>
</div>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments