Navbars

<nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
        <a class="navbar-brand fw-bold text-primary" href="#">◆ Brand</a>

        <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navSimple"
                aria-controls="navSimple"
                aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navSimple">
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="#">Home</a>
                <a class="nav-link" href="#">About</a>
                <a class="nav-link" href="#">Contact</a>
            </div>
        </div>
    </div>
</nav>

<nav class="navbar navbar-expand-lg bg-white border">
    <div class="container-fluid">
        <a class="navbar-brand fw-bold text-primary" href="#">◆ Brand</a>

        <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navCTA"
                aria-controls="navCTA"
                aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navCTA">
            <div class="navbar-nav ms-auto align-items-lg-center">
                <a class="nav-link" href="#">Home</a>
                <a class="nav-link" href="#">Features</a>
                <a class="btn btn-primary btn-sm ms-lg-2 mt-2 mt-lg-0" href="#">Sign Up</a>
            </div>
        </div>
    </div>
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand fw-bold" href="#">◆ Brand</a>

        <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navDark"
                aria-controls="navDark"
                aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navDark">
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="#">Products</a>
                <a class="nav-link" href="#">Pricing</a>
                <a class="nav-link" href="#">Docs</a>
            </div>
        </div>
    </div>
</nav>

<nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
        <a class="navbar-brand fw-bold text-primary" href="#">◆ Brand</a>

        <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navSearch"
                aria-controls="navSearch"
                aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navSearch">
            <div class="navbar-nav ms-auto align-items-lg-center">
                <input type="search" class="form-control form-control-sm me-lg-2 mt-2 mt-lg-0"
                       style="max-width: 200px;" placeholder="Search...">
                <a class="nav-link" href="#">Sign in</a>
            </div>
        </div>
    </div>
</nav>

<nav class="navbar navbar-expand-lg bg-white border">
    <div class="container-fluid">
        <a class="navbar-brand fw-bold text-primary" href="#">◆ Brand</a>

        <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navDrop"
                aria-controls="navDrop"
                aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navDrop">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#"
                       role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Products
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Feature A</a></li>
                        <li><a class="dropdown-item" href="#">Feature B</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">All products</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
            </ul>
        </div>
    </div>
</nav>