Is it possible to change a list to a toolbar in responsive mode?

Question

I have the following cards. nav There are many projects (I've left one here for brevity).

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

All content displays correctly even on mobile devices.

However, I would like to know if it is possible to "convert" the navigation list into some kind of toolbar (still within the card body) and show items next to each other and only show their icons. Something like this:

is it possible?

Answer 1

Bootstrap 4 does not have its own icon support, But to achieve such output, use the small font library below.

1)