How to fix text not showing up in the right? - html

Question

i'm trying to get text to be positioned to the right of a card header, this working example on fiddle strangely doesn't work in my project, i'm using bootstrap 4
https://jsfiddle.net/LL0qnnxm/61/
This is what i get on my app
The corresponding code:
<div class="col">
<div class="card">
<!--CARD HEADER-->
<h4 class="card-header">HEADER <small class="float-sm-right">right aligned</small></h4>
<!--CARD BODY-->
<div class="card-body">
</div>
</div>
</div>
</div>
Thanks for your time.

Answer 1

It's likely that you have a style which makes card-header width only as large as its content, such as display: inline.
Try adding display: block; to card-header or double check that no other styles are overriding it being display: block.
.card-header {
display: block;
}

Answer 2

When you have float-sm-right, it will only float to the right if your screen is sm size (768px and up). Simply remove the -sm.
https://jsfiddle.net/g9nu8f7d/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<div class="card">
<!--CARD HEADER-->
<h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
<!--CARD BODY-->
<div class="card-body">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<!--CARD HEADER-->
<h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
<!--CARD BODY-->
<div class="card-body">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<!--CARD HEADER-->
<h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
<!--CARD BODY-->
<div class="card-body">
</div>
</div>
</div>
</div>
</div>