Navbar Variants and Positioning in Bootstrap

Bootstrap's navbar component is highly customizable with various variants and positioning options. These features allow you to adapt the navbar to different design needs and layouts.

1. Navbar Variants

Navbar Variants change the appearance of the navbar, such as its background color, text color, and more.

a. Navbar Color Schemes

Bootstrap provides several built-in color schemes for the navbar:

• Light Navbar: Light background with dark text.

  <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
  

  • .navbar-light: Applies a light color scheme to the navbar.
  • .bg-light: Sets a light background color.

• Dark Navbar: Dark background with light text.

  <nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
  

  • .navbar-dark: Applies a dark color scheme to the navbar.
  • .bg-dark: Sets a dark background color.

b. Navbar With Background Colors

You can use various background utility classes to change the navbar's background color:

• Primary Background: Blue background with white text.

  <nav class="navbar navbar-expand-lg navbar-primary bg-primary">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
  

  • .bg-primary: Applies the primary color background.

• Secondary Background: Grey background with white text.

  <nav class="navbar navbar-expand-lg navbar-secondary bg-secondary">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
  

  • .bg-secondary: Applies the secondary color background.

• Custom Background: You can also use custom background colors.

  <nav class="navbar navbar-expand-lg" style="background-color: #f8f9fa;">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
  

  • style="background-color: #f8f9fa;": Applies a custom background color.

2. Navbar Positioning

Navbar Positioning allows you to place the navbar in different positions on the page, such as fixed to the top or bottom.

a. Fixed Top

Keeps the navbar fixed at the top of the viewport, regardless of scrolling.

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

• .fixed-top: Fixes the navbar to the top of the viewport.

b. Fixed Bottom

Keeps the navbar fixed at the bottom of the viewport.

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-bottom">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

• .fixed-bottom: Fixes the navbar to the bottom of the viewport.

c. Sticky Top

Keeps the navbar "sticky" at the top of the viewport, only when scrolling up, but allows it to scroll away when scrolling down.

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

• .sticky-top: Makes the navbar stick to the top of the viewport when scrolling.

d. Static Top

The default positioning, where the navbar scrolls with the rest of the page.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

• No additional class: The navbar will scroll with the page as it is the default behavior.

3. Responsive Navbar Variants

Bootstrap's navbar can be made responsive by using the appropriate expand classes. These classes determine at which breakpoint the navbar should be expanded or collapsed.

• Expand on Small Screens

  <nav class="navbar navbar-expand-sm navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
  

  • .navbar-expand-sm: Expands the navbar on small screens (≥576px).

• Expand on Medium Screens

  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
  

  • .navbar-expand-md: Expands the navbar on medium screens (≥768px).

• Expand on Large Screens

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
  

  • .navbar-expand-lg: Expands the navbar on large screens (≥992px).

• Expand on Extra-Large Screens

  <nav class="navbar navbar-expand-xl navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
  

  • .navbar-expand-xl: Expands the navbar on extra-large screens (≥1200px).

Summary of Navbar Variants and Positioning in Bootstrap

• Navbar Variants: Change the appearance of the navbar with classes like .navbar-light, .navbar-dark, and various background color classes.
• Navbar Positioning:
  • Fixed Top: Use .fixed-top to keep the navbar fixed at the top.
  • Fixed Bottom: Use .fixed-bottom to keep the navbar fixed at the bottom.
  • Sticky Top: Use .sticky-top to make the navbar stick to the top when scrolling up.
  • Static Top: Default scrolling behavior.
• Responsive Navbar: Use .navbar-expand-sm, .navbar-expand-md, .navbar-expand-lg, or .navbar-expand-xl to control when the navbar collapses based on screen size.