2.navbar & navs

• simple navbar

<nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

• navbar with responsive toggle

<nav class="navbar navbar-expand-sm navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarCollapse" class="navbar-collapse collapse">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

• navbar with form

<nav class="navbar navbar-expand-sm navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarCollapse2" class="navbar-collapse collapse">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
            <form class="form-inline ml-auto">
                <input type="text" class="form-control mr-2" placeholder="Search">
                <button class="btn btn-outline-success">Search</button>
            </form>
        </div>
    </div>
</nav>

• navbar with dropdown

<nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item dropdown">
                <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown">DropDown</a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">Link 1</a>
                    <a href="#" class="dropdown-item">Link 2</a>
                    <a href="#" class="dropdown-item">Link 3</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

• colors

<nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-3">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>


<nav class="navbar navbar-expand-sm navbar-dark bg-primary mb-3">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

<nav class="navbar navbar-expand-sm navbar-dark bg-success mb-3">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

• fixed top

<nav class="navbar navbar-dark bg-dark fixed-top">
    <a href="" class="navbar-brand">Navbar Fixed Top</a>
</nav>

• fixed bottom

<nav class="navbar navbar-dark bg-dark fixed-bottom">
    <a href="" class="navbar-brand">Navbar Fixed Bottom</a>
</nav>

• sticky top

<nav class="navbar navbar-dark bg-dark sticky-top">
    <a href="" class="navbar-brand">Navbar Sticky Top</a>
</nav>

• navs

<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
    </li>
</ul>

• horizontal align

<ul class="nav nav-pills justify-content-center">
    <li class="nav-item">
        <a class="nav-link active" href="#">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
    </li>
</ul>

• right align

<ul class="nav nav-pills justify-content-end">
    <li class="nav-item">
        <a class="nav-link active" href="#">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
    </li>
</ul>

• vertical

<ul class="nav nav-pills flex-column">
    <li class="nav-item">
        <a class="nav-link active" href="#">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
    </li>
</ul>

• fill & justify

<ul class="nav nav-pills nav-fill">
    <li class="nav-item">
        <a class="nav-link active" href="#">Link 1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
    </li>
</ul>