Search code examples
htmlcsstwitter-bootstrapbootstrap-4

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

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">
                <a href="#" class="btn btn-primary btn-sm"><i class="fas fa-user-cog"></i> Edit User</a>
                <a href="#" class="btn btn-primary btn-sm"><i class="fas fa-home"></i> Manage Addresses</a>
                <a href="#" class="btn btn-danger btn-sm"><i class="fas fa-trash-alt"></i> Delete</a>
            </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:

https://i.imgur.com/x5FOJuy.png

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.

Solution

  • 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.

    Update: If you're trying to achieve this in Bootstrap 5, the class is renamed to float-end instead: https://getbootstrap.com/docs/5.0/utilities/float/