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

I have the following card. The nav has a number of items (I kept one here for brevity).

<div >
    <div >
        <div >
            <h3 >title</h3>
        </div>
        <div >
            <ul >
                <li >
                    <NavLink href="javascript: void(0);" @onclick="() => ShowSearch()" >
                        <span ><i  /></span>
                        <span >Search</span>
                    </NavLink>
                </li>
            </ul>
        </div>
        <div >
            <NavLink href="Back" >
                <span ><i /></span> 
                <span >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:

Is it possible?

CodePudding user response：

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

<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 >
    <div >
        <div >
            <ul >
                <li >
                    <i ></i>
                </li>
                <li >
                    <i ></i>
                </li>
                <li >
                    <i ></i>
                </li>
                
            </ul>
        </div>
    </div>
</div>

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 >
    <div >
        <div >
            <i ></i>
            <i ></i>
            <i ></i>
        </div>
    </div>
</div>

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.