Menu
How should i get my small text right aligned in a Bootstrap 4, Card Header?
HTML
<div class="container">
<div class="row">
<div class="col">
<div class="card">
<!--CARD HEADER-->
<h4 class="card-header">HEADER <small class="pull-right">right aligned</small></h4>
<!--CARD BODY-->
<div class="card-body">
</div>
</div>
</div>
</div>
This is what i have tried:
https://jsfiddle.net/LL0qnnxm/60/
271
Make the card and the inner container flex-columns, then tell the container to xpand as much as possible with flex:1 . Then push the h4 to the bottom of the container with margin-top:auto . Save this answer.
You can do it simply using d-flex and flex fill react bootstrap class. It will also fulfill your need of equal height cards in a row.
The right thing would be for the cards to be horizontally aligned, how do I do this? use css - something like float:left;clear:none; applied to each card.
Use float-{sm,md,lg,xl}-right instead of pull-right because it changed in Bootstrap 4. For more info please read this https://v4-alpha.getbootstrap.com/migration/
And for your solution please check the updated Fiddle
179
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
