Learn How to Use Navs, Navbar & Progress Bar in Bootstrap v4

0
1878
bootstrap-v4

bootstrap-v4

In this article, we are going to explore Bootstrap v4 features for Navs, Navbar and Progress bar.

Navs
In Bootstrap v4, the .nav and other associated class are used to convert a list into tabs and navigation pills. In order to add a tab or a pill, we need to add the .nav class and either .nav-tabs or .nav-pills respectively to a <ul> element that contains a list of navigation items. Let’s understand the basic Nav with the help of the following example.

Output

navs

Navbar
In Bootstrap v4, the navbar is a simple wrapper which can be used for positioning branding, navigation, and positioning of other elements into a navigation header. We can also configure navbars based on the size of the viewports to collapse in smaller viewports and become horizontal in larger viewports.

  • Types of Navbar
    Navbar can be of the following types.

1. Basic Navbar

Output

basic-navbar

Explanation of the code

  • We have wrapped everything inside a <nav> element with the .navbar class, along with an appropriate color scheme. (e.g., class=”navbar navbar-light bg-faded”).
  • Next, we have declared the list of links by using a <ul> element with class=”nav navbar-nav”.
  • Next, for each of the individual item of the list, we have used <li> element with class=”nav-item”. There are total 3 items in the list as navigation link.
  • Lastly, for each of the individual links, we have used <a> element with class=”nav-link”.

2. Navbar with dropdown menu

Output

navbarwithdropdown

Explanation of the code

  • To add a dropdown menu, we have just added the dropdown code to a <li>element with the .dropdown class applied to the <li> element.

 

3. Colored Navbar

Output

colorednavbar

Explanation of Code

To the existing basic Navbar code where we have wrapped everything inside a <nav> element with the .navbar class, along with an appropriate color scheme and we have added class=”navbar navbar-dark bg-primary”.

Progress bar
In Bootstrap v4, we can use the Progress bar to provide feedback to the website user on the progress on the current request. It helps to provide a visual feedback to the user in the form of a bar that how much progress has been achieved and how much is left in order to complete the current request.

1. Types of Progress bars
Progress bar can be of the following types.

  • Default Progress Bar: Using Bootstrap v4, we can create a default progress bar with the use of HTML5 <progress> element along with the .progress class as shown in the following example.

Output:

default-progress-bar

  • Contextual Progress Bar: Using Bootstrap v4 contextual classes, we can provide extra semantics via color to the Progress Bar as shown in the following example.

Output:

contextual-progress-bar

  • Stripes: Using Bootstrap v4 striped classes, we can add stripes with the help of .progress-bar-striped class to the Progress Bar (i.e. .progress-bar element) as shown in the following example.

Output

striped-progress-bar

  • Animated Stripes: Using Bootstrap v4 animation classes, we can animate and add stripes with the help of .progress-animated class to the Progress Bar (i.e. .progress element) as shown in the following example.

Output

animated-striped-progress-bar

For Source Code : – the Nav, Navbar, the Progress bar in Bootstrap v4
Conclusion
In this article, we discussed the Nav, Navbar, the Progress bar and their interesting features for Bootstrap v4 along with demo examples.

LEAVE A REPLY

Please enter your comment!
Please enter your name here