                
<ul class="nav">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    </li>
</ul>

Horizontal alignment

Centered with .justify-content-center:

                
<ul class="nav justify-content-center">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    </li>
</ul>

Right alignment

Right-aligned with .justify-content-end:

                
<ul class="nav justify-content-end">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    </li>
</ul>

Tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.

                
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">
            <span class="d-none d-md-inline-block">Home</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <span class="d-none d-md-inline-block">Profile</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <span class="d-none d-md-inline-block">Messages</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">
            <span class="d-none d-md-inline-block">Settings</span>
        </a>
    </li>
</ul>

Pills

Take that same HTML, but use .nav-pills instead:

                
<ul class="nav nav-pills text-center">
    <li class="nav-item mr-1">
        <a class="nav-link active" href="#"><span class="d-none d-md-block">Home</span></a>
    </li>
    <li class="nav-item mr-1">
        <a class="nav-link" href="#"><span class="d-none d-md-block">Profile</span></a>
    </li>
    <li class="nav-item mr-1">
        <a class="nav-link" href="#"><span class="d-none d-md-block">Messages</span></a>
    </li>
    <li class="nav-item mr-1">
        <a class="nav-link disabled" href="#"><span class="d-none d-md-block">Settings</span></a>
    </li>
</ul>

Nav justify

Force your .nav’s contents to extend the full available width one of two modifier classes.

                
<ul class="nav nav-pills nav-justified">
    <li class="nav-item">
        <a class="nav-link active" href="#">
            <i class="dripicons-home mr-1 align-middle"></i> <span
                class="d-none d-md-inline-block">Home</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="dripicons-user mr-1 align-middle"></i> <span
                class="d-none d-md-inline-block">Profile</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">
            <i class="dripicons-mail mr-1 align-middle"></i> <span
                class="d-none d-md-inline-block">Messages</span>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">
            <i class="dripicons-gear mr-1 align-middle"></i> <span
                class="d-none d-md-inline-block">Settings</span>
        </a>
    </li>
</ul>

Vertical

Stack your navigation by changing the flex item direction with the .flex-column utility.