Est-il possible de changer une liste en barre d'outils en mode responsive ?

Question

J'ai les cartes suivantes. nav Il existe de nombreux projets (j’en ai gardé un ici par souci de concision).

<div class="col-md-3">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">title</h3>
        </div>
        <div class="card-body p-0">
            <ul class="nav nav-pills flex-column">
                <li class="nav-item">
                    <NavLink href="javascript: void(0);" @onclick="() => ShowSearch()" class="nav-link">
                        <span class="fa-li pl-5"><i class="fas fa-search" /></span>
                        <span class="pl-4">Search</span>
                    </NavLink>
                </li>
            </ul>
        </div>
        <div class="card-footer">
            <NavLink href="Back" class="nav-link">
                <span class="fa-li pl-5"><i class="fas fa-arrow-alt-circle-left"/></span> 
                <span class="pl-1">Back</span>
            </NavLink>
        </div>
    </div>
</div>

Tout le contenu s'affiche correctement même sur les appareils mobiles.

Cependant, j'aimerais savoir s'il est possible de "convertir" la liste de navigation en une sorte de barre d'outils (toujours dans le corps de la carte) et d'afficher les éléments les uns à côté des autres et d'afficher uniquement leurs icônes. Des choses comme ça :

Est-ce possible ?

Answer 1

Bootstrap 4 n'a pas son propre support d'icônes, Mais pour obtenir un tel résultat, utilisez la petite bibliothèque de polices ci-dessous.

1)