Create Navbar

Navbar in Bootstrap 5

When it comes to Bootstrap, navbars are responsive by default. Their contents are fluid, and specific changes can be made to the navbar by using some Bootstrap 5 classes.

Some of the Bootstrap 5 classes we’ll use in our navbar for our Angular project include the following:

• .navbar .navbar-expand{-sm|-md|-lg|-xl|-xxl}: These two classes are required when creating a navbar. They serve as a wrapper for responsive collapsing based on different screen sizes.
• .navbar-light: This is a Bootstrap 5 class used for the color scheme. It helps to set our background color to light.
• .navbar-brand: This class is where we set our company or product name.
• .navbar-nav: Here, we have full-height support for our navigation menu. It also provides support for dropdown for mobile screens.
• .navbar-toggler: This class provides responsive support, determining when content collapses based on the screen size. It serves as a form of toggler, i.e., it shows and hides content based on screen size.
• .container: This Bootstrap 5 class helps us center content.

Creating the navbar

The code for the navbar will be set in the app.component.html file. So what we have to do is clear the boilerplate generated by the Angular CLI in this file.

Once the app.component.html file is blank, we can paste the code below: