Bootstrap 4 horizontal text alignment is not working in <span> - html

Question

I've the following code:
<div class="card" >
<div class="card-block">
<h4 class="card-title">
<span class="text-left">🐯</span>
<span class="text-right">Drago</span>
</h4>
<span class="card-text">
Location: ???<br>
District: ???<br>
Last updated: Tue, May 8th 2018
</span><br><br>
<div class="card-buttons" class="text-center">
<i class="fas fa-user-cog"></i> Edit User
<i class="fas fa-home"></i> Manage Addresses
<i class="fas fa-trash-alt"></i> Delete
</div>
</div>
</div>
I'm trying to make a card in Bootstrap 4.
I do want the emoji in the <h4> to be aligned left and the text after it to be aligned to the right. I'm trying to do it like this:
<h4 class="card-title">
<span class="text-left">🐯</span>
<span class="text-right">Drago</span>
</h4>
But this is not working, I get:
I also tried to do it without the bootstrap classes. Using style="text-align: left" and style="text-align: right". However this also doesn't seem to work.
When I use <div> the horizontal alignment works fine. I get this problem only with <span> and <div>s that have display property set to inline-block and inline-flex.

Answer 1

You would use float-right because the .card-title is display:block...
<h4 class="card-title">
<span>🐯</span>
<span class="float-right">Drago</span>
</h4>
https://www.codeply.com/go/CMrl4JydKp
Using text-right works on the parent of an inline element.

Answer 2

.card-title {
display: flex;
flex-wrap: wrap;
}
.text-right {
margin-left: auto;
}
You would probably want to add custom classes to the card-title for example, so you are not adjusting all card titles in general.
Fiddle: https://jsfiddle.net/2xv2t12c/

Answer 3

Hope this helps!!
BS4 update:- Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
So use float right and also i added a br tag under h4 so the below span wouldn't overflow into h4.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-block">
<h4 class="card-title ">
<span class="float-left">🐯</span>
<span class="float-right">Drago</span>
</h4>
<br/>
<span class="card-text">
Location: ???<br>
District: ???<br>
Last updated: Tue, May 8th 2018
</span><br><br>
<div class="card-buttons" class="text-center">
<i class="fas fa-user-cog"></i> Edit User
<i class="fas fa-home"></i> Manage Addresses
<i class="fas fa-trash-alt"></i> Delete
</div>
</div>
</div>