Bootstrap 4 Tabs Pills Navs with Examples

Bootstrap 4 Tabs Pills Navs are very useful part in web application.

Lets discuss them one by one

Bootstrap 4 nav menu

The navigation bar can be styled in various ways using Bootstrap 4.  here we will look at some sample codes for styling the Navs as per different style requirements.

Bootstrap 4 Horizontal Navbar

For creating a simple horizontal nav menus, you can just add the .nav class with a <ul> tag, followed by .nav-item for each <li> and add the .nav-link class to their links:
Run It

bootstrap 4 nav classes

The .justify-content-center the class centers the nav, while the .justify-content-end class right-aligns it.
    Try It
      Try It

      Vertical navbar bootstrap 4

      The .flex-column the class creates a vertical nav:

        Vertical menu bar in bootstrap example

        Try It

        Bootstrap 4 tabs

        .nav-tabs the class turns the nav menu into navigation tabs.
        Try It

        Bootstrap 4 pills

        .nav-pills class  to make Navigation pills
        Try It

        Justified Tabs/pills

        .nav-justified class justifies the tabs/pills

         

          ..
        Try It
         

          ..
        Try It

        Tabs with Dropdown
        Try It

        Pills with Dropdown

        As mentioned in above code change class to nav-pills
        Try It

        Toggleable / Bootstrap dynamic tabs

        For making the tabs toggle-able you can add the data-toggle="tab" attribute with each link.

        After that, add a .tab-pane class along with a unique ID attached to the tab.

        Wrap them all inside a <div> element with the .tab-content class.

        The tabs can also be styled to fade in or fade out when you click on them. To add this, add the .fade class to .tab-pane:

         



        
    
        ...
        Try It

        Toggle-able / Dynamic Pills

        Just like the dynamic tabs you can apply the code to pills. Therefore, all you need to do is change the data-toggle attribute to data-toggle=”pill”:

         


        
    
        ...
        Try It

        Bootstrap 4 vertical tabs responsive

        Bootstrap 4 vertical tabs responsive
        Try It

        which of the following bootstrap styles are used to create a vertical pills navigation?

        a) .nav-stacked b) .nav-pills c) .nav-justified d) .tab-pane

        .nav-stacked is used to create vertical pills navigation.

        Also Read

        Bootstrap Containers

        Read More

        Navs