boostrap 4 card footer does not display properly (using flex)

Refresh

1 weeks ago

Views

11 time

-1

I have this card footer :

<div class="card text-center">
<!-- CODE FOR card-header, card-body -->
    <div class="card-footer">
            <div class="d-flex justify-content-center">

                    <a href="#" class="card-link btn btn-primary btn-sm">
                    <i class="fas fa-briefcase fa-2x"></i>
                    </a>


                    <a href="#" class="card-link btn btn-info btn-sm">
                    <i class="fas fa-comments fa-2x"></i>
                    </a>


                    <a href="#" class="card-link btn btn-success btn-sm">
                    <i class="fas fa-user fa-2x"></i>
                    </a>


                    <a href="#" class="card-link btn btn-warning btn-sm">
                    <i class="fas fa-exclamation-circle fa-2x"></i>
                    </a>

                    <a href="#" class="card-link btn btn-success btn-sm">
                    <i class="fas fa-check fa-2x"></i>
                    </a>
            </div>
    </div>
</div>

The problem is that it does not display properly on iphone 7 (using chrome on it).

I have this display on the iphone :

enter image description here

What is weird is that it shows correctly on chrome desktop using the "toggle device toolbar" (to see a preview of the card on iphone 7, but on the desktop chrome) :

enter image description here

But using the same tool, it does not show properly on iphone 5 (on desktop chrome again) :

enter image description here

Thanks in advance for helping me !

0 answers