Scribd
Upload
40 views5 pages

Navigation Bars: Example

The document discusses different types of navigation bars that can be created using Bootstrap. It explains that a basic navbar is created with the .navbar class and includes responsive stacking behavior. Links can be added with an <ul> or <div> using the .navbar-nav class. Additional classes like .navbar-expand control responsiveness, .bg-color changes the background, and .navbar-dark/.navbar-light set the text color. Examples are provided for basic, vertical, centered, and colored navbars.

Uploaded by

Bogdan Chindris
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
40 views5 pages

Navigation Bars: Example

The document discusses different types of navigation bars that can be created using Bootstrap. It explains that a basic navbar is created with the .navbar class and includes responsive stacking behavior. Links can be added with an <ul> or <div> using the .navbar-nav class. Additional classes like .navbar-expand control responsiveness, .bg-color changes the background, and .navbar-dark/.navbar-light set the text color. Examples are provided for basic, vertical, centered, and colored navbars.

Uploaded by

Bogdan Chindris
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Navigation Bars

A navigation bar is a navigation header that is placed at the top of the page:

Logo

 Link

 Link

 Link

Search

Basic Navbar
With Bootstrap, a navigation bar can extend or collapse, depending on the
screen size.

A standard navigation bar is created with the .navbar class, followed by a


responsive collapsing class: .navbar-expand-xxl|xl|lg|md|sm  (stacks the
navbar vertically on xxlarge, extra large, large, medium or small screens).

To add links inside the navbar, use either an <ul> element (or a <div>)
with class="navbar-nav". Then add <li> elements with a .nav-item class
followed by an <a> element with a .nav-link class:

 Link 1

 Link 2

 Link 3

Example
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">

  <div class="container-fluid">
    <!-- Links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>

</nav>

Try it Yourself »

Vertical Navbar
Remove the .navbar-expand-* class to create a navigation bar that will always
be vertical:

 Link 1

 Link 2

 Link 3

Example
<!-- A grey vertical navbar -->
<nav class="navbar bg-light">
  ...
</nav>

Try it Yourself »
Centered Navbar
Add the .justify-content-center class to center the navigation bar:

 Link 1

 Link 2

 Link 3

Example
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

Try it Yourself »

Colored Navbar
 Active

 Link

 Link

 Disabled

 Active

 Link

 Link

 Disabled
 Active

 Link

 Link

 Disabled

Use any of the .bg-color classes to change the background color of the navbar


(.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-
secondary, .bg-dark and .bg-light)

Tip: Add a white text color to all links in the navbar with the .navbar-


dark class, or use the .navbar-light class to add a black text color.

Example
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
     <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<!-- Black background with white text -->


<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue background with white text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

Try it Yourself »

You might also like