...

/

Layout with Primary Components

Layout with Primary Components

Build a responsive web layout using primary layout components.

We'll cover the following...

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 ...