<hr class="mb-0">
<div class="d-none d-md-block">
    <ul class="nav nav-underline bg-body  justify-content-start fs-6" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="home-tab-head" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab">
                <span class="small">Home</span>
            </button>
        </li>

        <li class="nav-item" role="presentation">
            <button class="nav-link" id="notifications-tab-head" data-bs-toggle="tab" data-bs-target="#notifications-tab-pane" type="button" role="tab">
                <span class="small">Notifications</span>
            </button>
        </li>

        <li class="nav-item" role="presentation">
            <button class="nav-link" id="task-tab-head" data-bs-toggle="tab" data-bs-target="#task-tab-pane" type="button" role="tab">
                <span class="small">Tasks</span>
            </button>
        </li>

        <li class="nav-item" role="presentation">
            <button class="nav-link" id="files-tab-head" data-bs-toggle="tab" data-bs-target="#files-tab-pane" type="button" role="tab">
                <span class="small">Files</span>
            </button>
        </li>
    </ul> 
</div>

<div class="fixed-bottom d-md-none">
    <ul class="nav bg-body justify-content-between border-top flex-nowrap overflow-x-scroll px-2" id="myTab" role="tablist" style="/*background: rgba(0,0,0,0.90);*/">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="home-tab-foot" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">
                <div class="vstack">
                <i class="bi bi-house fs-2"></i>
                    <span class="small">Home</span>
                </div>
            </button>
        </li>

        <li class="nav-item" role="presentation">
            <button class="nav-link" id="notifications-tab-foot" data-bs-toggle="tab" data-bs-target="#notifications-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">
                <div class="vstack">
                <i class="bi bi-calendar3 fs-2"></i>
                    <span class="small">Notifications</span>
                </div>
            </button>
        </li>

        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tasks-tab-foot" data-bs-toggle="tab" data-bs-target="#tasks-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">
                <div class="vstack">
                <i class="bi bi-list-task fs-2"></i>
                    <span class="small">Tasks</span>
                </div>
            </button>
        </li>

        <li class="nav-item" role="presentation">
            <button class="nav-link" id="files-tab-foot" data-bs-toggle="tab" data-bs-target="#files-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false">
                <div class="vstack">
                <i class="bi bi-folder2-open fs-2"></i>
                    <span class="small">Files</span>
                </div>
            </button>
        </li>
    </ul> 
</div>