<h5>Start Bootstrap</h5>

<div class="span">
            <span>CORE</span>
            <ul>
                <li><a href="#"><i class="fas fa-tachometer-alt me-2"></i>Dashboard</a></li>
            </ul>
            <span>INTERFACE</span>
            <ul>
                <li><a href="#"><i class="fas fa-th-large me-2"></i>Layouts <i class="fas fa-angle-right"></i></a></li>
                <li class="mt-4"><a href="#"><i class="fa-solid fa-file me-2"></i>Pages<i
                            class="fas fa-angle-right"></i></a></li>
            </ul>
            <span>Addons</span>
            <ul>
                <li><a href="#"><i class="fa-solid fa-chart-simple me-2"></i>Charts<i
                            class="fas fa-angle-right"></i></a></li>
                <li class="mt-4"><a href="#"><i class="fa-solid fa-table me-2"></i>Tables<i
                            class="fas fa-angle-right"></i></a></li>
            </ul>
        </div>
        <div class="side-bar-footer bg-dark">
            <span>Logged in as :</span>
            <h5 class="ps-0">Start Bootstrap</h5>
        </div>
    </div>

<div class="dropdown mt-3">
            <button class="btn dropdown-toggle text-grey" type="button" id="dropdownMenuButton" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                <i class="fa-solid fa-user"></i>
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">Logout</a>
            </div>
        </div>

</div>

<div class="container p-3" style="margin-left: 18%; width: 82%;">
        <h4>Dashboard</h4>
    </div>

   .side-bar {
            position: absolute;
            z-index: 1000;
            width: 18%;
            height: auto;
            background-color: black;
            color: #ffffff;
        }

        .side-bar h5 {
            padding: 20px 13px;
        }

        .span {
            padding: 10px 13px;
        }

        .span span {
            font-size: 13px;
            font-weight: bold;
            letter-spacing: 1px;
            color: gray;
        }

        ul {
            margin: 0;
            padding: 20px 0;
        }

        ul li {
            list-style: none;
            color: gray;
        }

        ul li a {
            color: grey;
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        ul li a:hover {
            color: white;
        }

        .fa-angle-right {
            margin-left: auto;
            font-size: 15px;
        }

        .side-bar-footer {
            color: grey;
            padding: 20px 13px;
            width: 100%;
            height: 100px;
            margin: 7px 0px;
        }

        /* navbar */

        .nav {
            overflow: hidden;
            color: white;
        }


        .search-bar {
            display: flex;
            align-items: center;
            max-width: 600px;
            margin-top: 5px;
            margin-bottom: 5px;
            margin-left: 66%;
            border-radius: 5px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            padding: 8px;
        }

        .search-bar input[type="text"] {
            flex: 1;
            border: none;
            padding: 7px;
            border-radius: 5px 0 0 5px;
            outline: none;
        }

        .search-bar button {
            background-color: #007bff;
            border: none;
            color: white;
            padding: 7px 15px;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .search-bar button:hover {
            background-color: #0056b3;
        }

        .dropdown {
            margin: 0px 5px;
            width: 10%;
            position: absolute;
            z-index: 2000;
            right: 3%;
            /* overflow: h  idden; */
        }

        .dropdown i {
            color: grey;
            font-size: 20px;
        }

        .text-grey {
            color: grey;
        }

CDN

ACTION

Copy CDN

integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

Copy CDN

integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="

Copy CDN

crossorigin="anonymous" referrerpolicy="no-referrer" />

Copy CDN

Admin Dashboard

Bootstrap 5 SB-Admin Panel

AdBlock Detected!