Bootstrap 4 Navbar

Bootstrap 4 Navbar

The Navbar is shown on each page that the user navigates through the website. The bootstrap 4 nav component provides the different styles of the navbar. It also supports logo branding, easy navigation, quote buttons, and forms, etc..  Let's look into each one with an example.

The Navbar completely supports responsiveness depending on various screen sizes. To create default navbar, use .navbar class along with responsive class .navbar-expand-sm|md|lg|xl. To create menu items with the hyperlink, Add .navbar-nav class to your <ul> element and add .nav-item class to your each <li> element inherited by an <a> element with .nav-link class for hyperlink.

See the Pen Bootstrap 4 Navbar by Prime Study Hub (@PrimeStudyHub) on CodePen.

Navbar with Background

To create navbar with color variation, include any of the contextual classes (.bg-primary, .bg-secondary, .bg-warning, .bg-danger, .bg-success, .bg-light, .bg-dark, .bg-info) to your navbar.

See the Pen Bootstrap 4 Navbar with Background by Prime Study Hub (@PrimeStudyHub) on CodePen.

Navbar with Dropdown

See the Pen Bootstrap 4 Navbar with Dropdown by Prime Study Hub (@PrimeStudyHub) on CodePen.

Navbar with Forms and Buttons

You can include inline forms or buttons to your navbar.

See the Pen Bootstrap 4 Navbar with Forms by Prime Study Hub (@PrimeStudyHub) on CodePen.

Navbar Position - Default

See the Pen Bootstrap 4 Navbar Position - Default by Prime Study Hub (@PrimeStudyHub) on CodePen.

Navbar Position - Fixed Top

See the Pen Bootstrap 4 Navbar Position - Fixed Top by Prime Study Hub (@PrimeStudyHub) on CodePen.

Navbar Position - Fixed Bottom

See the Pen Bootstrap 4 Navbar Position - Fixed Bottom by Prime Study Hub (@PrimeStudyHub) on CodePen.

Navbar Position - Sticky Top

See the Pen Bootstrap 4 Navbar Position - Sticky Top by Prime Study Hub (@PrimeStudyHub) on CodePen.

Navbar External Content

The Navbar not only used as a menu, but it can also be used as an accordion toggle to show/hide external content. Here's an example of navbar external content,

See the Pen Bootstrap 4 Navbar External Content by Prime Study Hub (@PrimeStudyHub) on CodePen.