Bootstrap 4 Navbar

Bootstrap 4 Navbar

Bootstrap 4 navbar has collapse and expand features. It works on the basis of available screen size. Navbar expand features to expand the navbar in the available space at the mentioned breakpoint while as navbar collapse collapses the navbar in the small devices

Bootstrap 4 Basic Horizontal Navbar

Step To Create Bootstrap 4 Basic Horizontal Navbar Menu

  • Add .navbar,.navbar-expand{-sm|-md|-lg|-xl} & background color utility.navbar-light .bg-light to the <nav> element base class.
  • Add .navbar-nav to the <ul> element base class.
  • Add .nav-item to the <li> element base class.
  • Add .nav-link to the <a> element base class.

Example



General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap 4 Basic Horizontal Navbar

Note: In this example .navbar-nav is assigned to <ul> element base class ,.nav-item is assigned to the <li> element base class and .nav-link is assigned to the <a> element base class.

Please keep in mind that .navbar-nav is assigned to the <ul> element base class,.nav-item is assigned to the <li> element base class & .nav-link is assigned to the <a> element base class.

Bootstrap Navbar Brand/Logo & Collapsing The Navigation Bar

bootstrap .navbar-brand shows brand name of company or brand logo.

By applying .navbar-brand class on images,It adjusts image to fit vertically with respect to navbar.

Using Brand Name

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Bootstrap 4 Navbar Brand Name

Note: In this example .navbar-brand is used for brand logo,.navbar-expand-sm is used to expand navbar at the breakpoint of small devices..bg-dark & .navbar-dark is used for navigation background color.

Centered Navbar

Add the .justify-content-center class to center the navigation bar.

  • Add .navbar,.navbar-expand-sm,.justify-content-center & background color utility .navbar-light .bg-light to the <nav> element base class.
  • Add .navbar-nav to the <ul> element base class.
  • Add .nav-item to the <li> element base class.
  • Add .nav-link to the <a> element base class.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Vertical Navbar Menu

Note:Follow the above mention steps to create bootstrap centered navbar.

Bootstrap 4 Navbar: Vertical

Step To Create Bootstrap 4 Basic Vertical Navbar Menu

  • Add .navbar & background color utility.navbar-light .bg-light to the <nav> base class.
  • Add .navbar-nav to the <ul> base class.
  • Add .nav-item to the <li> base class.
  • Add .nav-link to the <a> base class.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Vertical Navbar

Note:Follow the above mention steps to create bootstrap vertical navbar.

Online Test / Quiz