Layout with Primary Components

Let’s begin creating layouts with primary components. To start, we’ll look at the Navbar.

Navbar

Let's start creating the web layout by adding a navbar to it. Before we begin using the navbar, we should be aware of the following:

• For responsive color scheme classes, navbars require wrapping .navbar with .navbar-expand-sm|-md|-lg|-xl. By default, navbars and their contents are fluid.

• Use optional containers to keep their horizontal width to a minimum.

• Use our spacing and flex utility classes.

• Navbars are responsive by default, but we can easily change this. Bootstrap's collapse JavaScript plugin is responsible for responsive behavior.

• When printing, navbars are hidden by default. Add .d-print to the .navbar to force them to be printed.

• Ensure accessibility by utilizing a nav element or, if using a more general element like a div, add a role=“navigation” to every navbar to indicate it as a landmark region for assistive technology users.