Category: Bootstrap

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add scrollspys with Bootstrap 5.

Scrollspy

Scrollspy lets us highlight links given that the content container has the same ID assigned to it.

It must be used with a Bootstrap nav component or list group.

Scrollspy needs to be position: relative on the element, we’re spying on.

If we spy on anything other than the body, we’ve to set the overflow-y to scroll .

For example, we can write:

<nav id="navbar-example" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#foo">foo</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#bar">bar</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu dropdown-menu-right">
        <li><a class="dropdown-item" href="#one">one</a></li>
        <li><a class="dropdown-item" href="#two">two</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#three">three</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" style='max-height: 100px; overflow: auto'>
  <h4 id="foo">@foo</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci.
  </p>
  <h4 id="bar">@bar</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci.
  </p>
  <h4 id="one">one</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci.
  </p>
  <h4 id="two">two</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci.
  </p>
  <h4 id="three">three</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci.
  </p>
</div>

We have a navbar with the content.

And we styled it as usual.

What we added is the href to the links and the IDs to the div.

If they match, then we can scroll to the item.

Also, we set the max-height to 100px and overflow to auto so that we see overflow content.

To add the scrollspy, we have the data-spy='scroll' attribute in our container div for the content.

With Nested Nav

We can use the scrollspy with nested navs.

For example, we can write:

<div class='row'>
  <div class='col-3'>
    <nav id="navbar-example" class="navbar navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <nav class="nav nav-pills flex-column">
        <a class="nav-link" href="#item-1">Item 1</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
          <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
        </nav>
        <a class="nav-link" href="#item-2">Item 2</a>
        <a class="nav-link" href="#item-3">Item 3</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
          <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
        </nav>
      </nav>
    </nav>
  </div>

<div data-spy="scroll" data-target="#navbar-example" data-offset="0" class='col-9' style='max-height: 300px; overflow-y: scroll'>
    <h4 id="item-1">Item 1</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci. Sed iaculis diam sit amet massa pulvinar, dictum viverra felis interdum. </p>
    <h5 id="item-1-1">Item 1-1</h5>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci. Sed iaculis diam sit amet massa pulvinar, dictum viverra felis interdum. </p>
    <h5 id="item-1-2">Item 1-2</h5>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci. Sed iaculis diam sit amet massa pulvinar, dictum viverra felis interdum. </p>
    <h4 id="item-2">Item 2</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci. Sed iaculis diam sit amet massa pulvinar, dictum viverra felis interdum. </p>
    <h4 id="item-3">Item 3</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci. Sed iaculis diam sit amet massa pulvinar, dictum viverra felis interdum. </p>
    <h5 id="item-3-1">Item 3-1</h5>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci. Sed iaculis diam sit amet massa pulvinar, dictum viverra felis interdum. </p>
    <h5 id="item-3-2">Item 3-2</h5>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. Vestibulum metus mi, tempus ut sapien at, vestibulum blandit orci. Sed iaculis diam sit amet massa pulvinar, dictum viverra felis interdum. </p>
  </div>
</div>

We have the nav that’s vertical.

Also, we have navs inside some of the navs.

Like the previous example, we have the data-spy='scroll' and the href in the navs matching the IDs of the divs.

overflow-y has to be set to scroll so that we scroll.

Conclusion

We can add scrollspys with the data-spy='scroll' attribute and set the overflow on the content we’re scrolling.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add progress bars with Bootstrap 5.

Progress Bar

Bootstrap 5 comes with its own progress bar styles.

We can use them in our app.

To use it, we use the progress class as the wrapper to indicate the max value of the progress.

The progress-bar class indicates the progress so far.

It requires an inline style, utility class, or custom CSS to set the width.

For example, we can write:

<div class="progress">
  <div class="progress-bar"></div>
</div>
<div class="progress">
  <div class="progress-bar" style="width: 20%"></div>
</div>
<div class="progress">
  <div class="progress-bar" style="width: 40%"></div>
</div>
<div class="progress">
  <div class="progress-bar" style="width: 60%"></div>
</div>
<div class="progress">
  <div class="progress-bar" style="width: 80%"></div>
</div>
<div class="progress">
  <div class="progress-bar" style="width: 100%"></div>
</div>

We add progress bar with various amount of it filled with the progress and progress-bar classes.

The progress-bar display a bar for the progress. We set the width style to adjust how much of it is filled.

Alternatively, we can use the width utility classes to set the width.

For instance, we can write:

<div class="progress">
  <div class="progress-bar"></div>
</div>
<div class="progress">
  <div class="progress-bar w-25"></div>
</div>
<div class="progress">
  <div class="progress-bar w-50"></div>
</div>
<div class="progress">
  <div class="progress-bar w-75"></div>
</div>
<div class="progress">
  <div class="progress-bar w-100"></div>
</div>

We use the w-* classes to set the width of the progress bar.

Labels

We can add labels inside the progress bar.

For example, we can write:

<div class="progress">
  <div class="progress-bar"></div>
</div>
<div class="progress">
  <div class="progress-bar w-25">25%</div>
</div>
<div class="progress">
  <div class="progress-bar w-50">50%</div>
</div>
<div class="progress">
  <div class="progress-bar w-75">75%</div>
</div>
<div class="progress">
  <div class="progress-bar w-100">100%</div>
</div>

to display the progress with text inside the bar.

Height

We can set the height style on the element with the progress class.

For example, we can write:

<div class="progress" style="height: 20px;">
  <div class="progress-bar"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar w-25">25%</div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar w-50">50%</div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar w-75">75%</div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar w-100">100%</div>
</div>

Now the height of each bar is 20px high.

Backgrounds

We can use Bootstrap 5 classes to change the background styles.

For example, we can write:

<div class="progress">
  <div class="progress-bar bg-success"></div>
</div>
<div class="progress">
  <div class="progress-bar w-25 bg-info"></div>
</div>
<div class="progress">
  <div class="progress-bar w-50 bg-warning"></div>
</div>
<div class="progress">
  <div class="progress-bar w-75 bg-danger"></div>
</div>
<div class="progress">
  <div class="progress-bar w-100 bg-secondary"></div>
</div>

to change the styles.

Multiple Bars

We can have multiple bars within one progress bar container.

For example, we can write:

<div class="progress">
  <div class="progress-bar" style="width: 15%"></div>
  <div class="progress-bar bg-success" style="width: 35%"></div>
  <div class="progress-bar bg-info" style="width: 20%"></div>
</div>

We set the width style to set the bar of the width.

They’ll automatically be placed side by side.

Striped

Progress bars can have stripes.

To add them, we add the progress-bar-striped class:

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width: 10%"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" style="width: 20%"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" style="width: 40%"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%" a></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-striped bg-secondary" style="width: 80%" a></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
</div>

We added progress bars with various styles.

They all have the progress-bar-striped class to add the stripes to the filled part of the progress bar.

Animated Stripes

The stripes can be animated.

For example, we can write:

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
</div>

to animate the stripes with the progress-bar-animated and progress-bar-striped classes.

Conclusion

We can add progress bars with various lengths and styles.

They can also have labels inside it.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add pagination buttons with Bootstrap 5.

Pagination

We can show pagination buttons to let users navigate to different pages if there’s a series of content spanning multiple pages.

For example, we can write:

<nav>  
  <ul class="pagination">  
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>  
    <li class="page-item"><a class="page-link" href="#">1</a></li>  
    <li class="page-item"><a class="page-link" href="#">2</a></li>  
    <li class="page-item"><a class="page-link" href="#">3</a></li>  
    <li class="page-item"><a class="page-link" href="#">Next</a></li>  
  </ul>  
</nav>

We have a nav element with a ul inside.

The li has the .page-item class to add borders to them.

Each pagination link has the .page-link class to style them.

Working with Icons

We can add icons to the a tags.

For example, we can write:

<nav>  
  <ul class="pagination">  
    <li class="page-item">  
      <a class="page-link" href="#">  
        <span>&laquo;</span>  
      </a>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">1</a></li>  
    <li class="page-item"><a class="page-link" href="#">2</a></li>  
    <li class="page-item"><a class="page-link" href="#">3</a></li>  
    <li class="page-item">  
      <a class="page-link" href="#">  
        <span>&raquo;</span>  
      </a>  
    </li>  
  </ul>  
</nav>

We have the first and last pagination links with icons instead of regular text inside.

Disabled and Active States

We can set the states of the links to be disabled or active.

For example, we can write:

<nav>  
  <ul class="pagination">  
    <li class="page-item disabled">  
      <a class="page-link" href="#" tabindex="-1">Previous</a>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">1</a></li>  
    <li class="page-item active">  
      <a class="page-link" href="#">2</a>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">3</a></li>  
    <li class="page-item">  
      <a class="page-link" href="#">Next</a>  
    </li>  
  </ul>  
</nav>

We disabled the Previous link with the disabled class.

And we set the 2 link to be active with the active class.

We can swap out active or disabled anchors for spans.

The anchor can be omitted in the previous or next arrows.

These all remove the click functionality and prevent keyboard focus while retaining the correct styles.

For example, we can write:

<nav>  
  <ul class="pagination">  
    <li class="page-item disabled">  
      <span class="page-link">Previous</span>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">1</a></li>  
    <li class="page-item active">  
      <span class="page-link">  
        2          
      </span>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">3</a></li>  
    <li class="page-item">  
      <a class="page-link" href="#">Next</a>  
    </li>  
  </ul>  
</nav>

We replace the anchor with the span in the Previous and 2 buttons.

Now we can’t click or focus on them.

Sizing

The size of the pagination bar can change with the pagination-lg or pagination-sm class.

For example, we can write:

<nav>  
  <ul class="pagination pagination-lg">  
    <li class="page-item disabled">  
      <span class="page-link">Previous</span>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">1</a></li>  
    <li class="page-item active" aria-current="page">  
      <span class="page-link">  
        2          
      </span>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">3</a></li>  
    <li class="page-item">  
      <a class="page-link" href="#">Next</a>  
    </li>  
  </ul>  
</nav>

to make it large, and:

<nav>  
  <ul class="pagination pagination-sm">  
    <li class="page-item disabled">  
      <span class="page-link">Previous</span>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">1</a></li>  
    <li class="page-item active" aria-current="page">  
      <span class="page-link">  
        2          
      </span>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">3</a></li>  
    <li class="page-item">  
      <a class="page-link" href="#">Next</a>  
    </li>  
  </ul>  
</nav>

to make it small.

Alignment

The alignment of the pagination bar can change.

For example, we can write:

<nav>  
  <ul class="pagination justify-content-center">  
    <li class="page-item disabled">  
      <span class="page-link">Previous</span>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">1</a></li>  
    <li class="page-item active" aria-current="page">  
      <span class="page-link">  
        2          
      </span>  
    </li>  
    <li class="page-item"><a class="page-link" href="#">3</a></li>  
    <li class="page-item">  
      <a class="page-link" href="#">Next</a>  
    </li>  
  </ul>  
</nav>

to center the pagination bar.

Conclusion

We can add a pagination bar to display links that navigate to various pages.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add navs with Bootstrap 5.

Navs

Navs are components that let users do navigation around our app.

For example, we can write:

<ul class="nav">  
  <li class="nav-item">  
    <a class="nav-link active" aria-current="page" href="#">foo</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">bar</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">baz</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
  </li>  
</ul>

We add the ul element with the .nav class to add the nav.

To add the nav items, we add li s with the .nav-item class to the items.

.nav is display: flex , so nav links behave the same as nav items without the extra markup:

<nav class="nav">  
  <a class="nav-link active" aria-current="page" href="#">foo</a>  
  <a class="nav-link" href="#">bar</a>  
  <a class="nav-link" href="#">baz</a>  
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
</nav>

Available Styles

There are various styles we can apply to navs.

Horizontal Alignment

We can center it with the .justify-content.center class:

<ul class="nav justify-content-center">  
  <li class="nav-item">  
    <a class="nav-link active" aria-current="page" href="#">foo</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">bar</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">baz</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
  </li>  
</ul>

Vertical

We can make navs vertical with the flex-column class:

<ul class="nav flex-column">  
  <li class="nav-item">  
    <a class="nav-link active" aria-current="page" href="#">foo</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">bar</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">baz</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
  </li>  
</ul>

This can also be done without ul s:

<nav class="nav flex-column">  
  <a class="nav-link active" aria-current="page" href="#">foo</a>  
  <a class="nav-link" href="#">bar</a>  
  <a class="nav-link" href="#">baz</a>  
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
</nav>

Tabs

We can make navs display as tabs with the .nav-tabs class:

<ul class="nav nav-tabs">  
  <li class="nav-item">  
    <a class="nav-link active" aria-current="page" href="#">foo</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">bar</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">baz</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
  </li>  
</ul>

Pills

To display nav items as buttons, we can use the .nav-pills class:

<ul class="nav nav-pills">  
  <li class="nav-item">  
    <a class="nav-link active" aria-current="page" href="#">foo</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">bar</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">baz</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
  </li>  
</ul>

Fill and Justify

We can use the .nav-fill class to make the nav fill the width of the viewport:

<ul class="nav nav-fill">  
  <li class="nav-item">  
    <a class="nav-link active" aria-current="page" href="#">foo</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">bar</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">baz</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
  </li>  
</ul>

We can omit the .nav-item since only .nav-link is required for styling a elements:

<nav class="nav nav-pills nav-fill">  
  <a class="nav-link active" aria-current="page" href="#">foo</a>  
  <a class="nav-link" href="#">bar</a>  
  <a class="nav-link" href="#">baz</a>  
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
</nav>

Working with Flex Utilities

We can use flexbox utilities to position and size items:

<nav class="nav nav-pills flex-column flex-sm-row">  
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">foo</a>  
  <a class="flex-sm-fill text-sm-center nav-link" href="#">bar</a>  
  <a class="flex-sm-fill text-sm-center nav-link" href="#">baz</a>  
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
</nav>

We added the flex-column and flex-sm-row classes to make the items responsive.

Also, we have the flex-sm-fill and text-sm-center classes to fill the width and center the text when the screen is sm or narrower.

Conclusion

We can add navs to add navigation to our app.

We can arrange various items in various ways.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add navbars with Bootstrap 5.

Navbar

Navbars let us add navigation to our app.

It’s responsive and has support for branding, navigation, and more.

We’ve to wrap the .navbar with the .navbar-expands-* classes for responsive collapsing.

The * can be replaced with one of sm , md , lg , xl , and xxl classes.

Color scheme classes can also be added.

Spacing and flex utility classes can be used to control spacing and alignment in navbars.

Navbars are responsive by default.

However, this can be overridden.

Supported Content

There are various kinds of content that can be added to a navbar.

.navbar-brand has a brand.

.navbar-nav has the nav.

.navbar-toggle lets us toggle a collapsed nav.

.navbar-text is used for adding vertically centered text.

.collapse-navbar-collapse is for grouping and hiding navbar contents by a parent breakpoint.

To add all that, we can write:

<nav class="navbar navbar-expand-lg navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">App</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navbarSupportedContent">  
      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">  
        <li class="nav-item">  
          <a class="nav-link active" aria-current="page" href="#">Home</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Link</a>  
        </li>  
        <li class="nav-item dropdown">  
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown">  
            Dropdown  
          </a>  
          <ul class="dropdown-menu">  
            <li><a class="dropdown-item" href="#">action 1</a></li>  
            <li><a class="dropdown-item" href="#">action 2</a></li>  
            <li>  
              <hr class="dropdown-divider">  
            </li>  
            <li><a class="dropdown-item" href="#">action 3</a></li>  
          </ul>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link disabled" href="#" tabindex="-1">disabled</a>  
        </li>  
      </ul>  
      <form class="d-flex">  
        <input class="form-control mr-2" type="search" placeholder="Search">  
        <button class="btn btn-outline-success" type="submit">Search</button>  
      </form>  
    </div>  
  </div>  
</nav>

We have all those classes in the example above.

The nav element has the navbar-expand-lg class to make it expand when it hits the lg breakpoint or wider.

navbar-light makes the content light.

bg-light makes the background light.

We have a div with the collapse and navbar-collapse classes to make the navbar collapse when the screen is narrow.

Also, we added a dropdown by adding an li element with the dropdown clas.

dropdown-menu has the menu.

dropdown-toggle has the toggle.

Brand

The .navbar-brand can be applied to most elements.

However, we may have to adjust the positioning ourselves.

For example, we can write:

<nav class="navbar navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">App</a>  
  </div>  
</nav>

to add a navbar with a brand.

We have a link for the brand item.

We can change that to a span:

<nav class="navbar navbar-light bg-light">  
  <div class="container-fluid">  
    <span class="navbar-brand mb-0 h1">App</span>  
  </div>  
</nav>

We changed the bottom margin to 0 with the mb-0 class.

And we added the h1 class to change the text to have a heading style.

We can also add an image as the brand instead of adding text:

<nav class="navbar navbar-light bg-light">  
  <div class="container">  
    <a class="navbar-brand" href="#">  
      <img src="http://placekitten.com/200/200" width="30" height="30" alt="cat" loading="lazy">  
    </a>  
  </div>  
</nav>

We add an image with the given width and height.

loading is set to lazy to make it load when it’s shown.

We can add text beside the image.

For example, we can write:

<nav class="navbar navbar-light bg-light">  
  <div class="container">  
    <a class="navbar-brand" href="#">  
      <img src="http://placekitten.com/200/200" width="30" height="30" class="d-inline-block align-top" alt="cat" loading="lazy">  
      Cat  
    </a>  
  </div>  
</nav>

We make the image display inline-block with the d-inline-block class so that it’ll display beside the text.

align-top make it align to the top.

Conclusion

We can add navbars with various kinds of content in it.

It can have forms, navbars, brand and dropdowns in it.