Getting Started
Content & Layout
Components
Utilities

Navs

Use Navs, Tabs and Pills to provide better user experience.

Documentation and examples for Navs, Tabs and Pills.

Bootstrap Navs Documentation

Default

The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components.

Nav Tabs

Basic tabs are divided into 2 main sections - Tabs navs and Tabs content. Use id and href attribute to connect nav tabs with tabs content.

Home Tab

Profile Tab

Contact Tab

Services Tabs 





    

        

            Home Tab
        

    

    

        

            Profile Tab
        

    

    

        

            Contact Tab
        

    

    

        

            Services Tabs

Tab 1

Tab 2

Tab 3 





    

        

          Tab 1
        

    

    

        

            Tab 2
        

    

    

        

           Tab 3

Nav Pills

Use id and href attribute to connect nav pills with pills content.

Following are example of nav pills with icons.

Home

Profile

Contact 





    

        

           Home
        

    

    

        

            Profile
        

    

    

        

           Contact

Pill Example 1

Pill Example 2

Pill Example 3 





    

        

            Pill Example 1
        

    

    

        

            Pill Example 2
        

    

    

        

            Pill Example 3