Search code examples
cssbootstrap-4sass

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

I have the following card. The nav has a number of items (I kept 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>

Everything is displayed correctly, even on mobile devices.

However, I was wondering if it is possible to "transform" the nav list into a sort of toolbar (still within the card-body) and display the items next to each other and showing only their icon. Something like this:

enter image description here

Is it possible?

Solution

  • Bootstrap 4 does not have its own icon support, but to achieve like this output use below small font library.

    1)

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />

<div class="col-md-3">
    <div class="card">
        <div class="card-body p-0">
            <ul class="list-inline">
                <li class="nav-item list-inline-item">
                    <i class="bi bi-cart"></i>
                </li>
                <li class="nav-item list-inline-item">
                    <i class="bi bi-twitter"></i>
                </li>
                <li class="nav-item list-inline-item">
                    <i class="bi bi-person-fill"></i>
                </li>
                
            </ul>
        </div>
    </div>
</div>

    OR

    try like below using font-awesome

    <head>
    <title>Font Awesome Icons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--OR download above link css to any folder and call-->
    </head>


<div class="col-md-3">
    <div class="card">
        <div class="card-body p-0">
            <i class="fa fa-shopping-cart"></i>
            <i class="fa fa-twitter"></i>
            <i class="fa fa-user"></i>
        </div>
    </div>
</div>

    2)

    after making this icon, toolbar use @media css, to check page open in responsive mode, then show this toolbar otherwise display:none.

    for ex.

    .smallscreentoolbar
{
  display:none;
}
.largescreentoolbar
{
  display:block;
}

@media screen and (max-width: 600px) {
  .smallscreentoolbar{
    display: block;
  }
  .largescreentoolbar
  {
     display:none;
  } 
}

    if any query please comment.