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.

Horizontal Nav Menu

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:

Aligned Nav

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

Vertical Nav

The .flex-column class creates a vertical nav:

Tabs

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

Pills

.nav-pills class  to make Navigation pills

• Active
• Link
• Link
• Disabled

Justified Tabs/pills

.nav-justified class justifies the tabs/pills

Tabs with Dropdown

Toggleable / 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 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:

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”: