Category: HTML

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.

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 navbar content with Bootstrap 5.

Nav

We can add navigation links to our navbar.

To do that, we add a div with the collapse and navbar-collapse classes.

For example, we can write:

<nav class="navbar navbar-expand-lg navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">Navbar</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navbarNav">  
      <ul class="navbar-nav">  
        <li class="nav-item">  
          <a class="nav-link active" href="#">Home</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Profile</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Setting</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
        </li>  
      </ul>  
    </div>  
  </div>  
</nav>

We have a div with the collapse and navbar-collapse class to use as the container for the nav links.

Then we add the toggle icon by adding a span with the navbar-toggler-icon class.

We also have a button with the navbar-toggler class to add the navbar toggle.

Then in the navbar-nav we have the nav links in the li with the .nav-item class.

This together will create a responsive navbar that’s collapsed when the screen is narrow and expanded when it’s wide.

We can also add dropdowns into our navbar.

For example, 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="#navbarNavDropdown">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navbarNavDropdown">  
      <ul class="navbar-nav">  
        <li class="nav-item">  
          <a class="nav-link active"  href="#">Home</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Profile</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Settings</a>  
        </li>  
        <li class="nav-item dropdown">  
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" >  
            Dropdown link  
          </a>  
          <ul class="dropdown-menu">  
            <li><a class="dropdown-item" href="#">action</a></li>  
            <li><a class="dropdown-item" href="#">action 2</a></li>  
            <li><a class="dropdown-item" href="#">action 3</a></li>  
          </ul>  
        </li>  
      </ul>  
    </div>  
  </div>  
</nav>

We add our dropdown by creating an li element with the .nav-item and dropdown classes.

This way, it’ll fit in the menu.

Also, we have the .dropdown-menu class to display the menu.

.dropdown-item has the dropdown menu items.

Forms

We can also add forms to our navbars.

For example, we can write:

<nav class="navbar navbar-light bg-light">  
  <div class="container-fluid">  
    <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>  
</nav>

to add the form into the navbar.

We have a form with the d-flex class to make it display flex.

The input has mr-2 to add some right margins.

We can also add other items besides the form.

For example, we can write:

<nav class="navbar navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand">App</a>  
    <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>  
</nav>

We added an a element with the navbar-brand class to add the brand on the left side.

The input has the form-control class so that it has Bootstrap styles applied to it.

Input groups also work with navbars.

For example, we can write:

<nav class="navbar navbar-light bg-light">  
  <form class="container-fluid">  
    <div class="input-group">  
      <span class="input-group-text">@</span>  
      <input type="text" class="form-control" placeholder="Search">  
    </div>  
  </form>  
</nav>

We have the input-group class applied to the div.

And we have the span with the input-group-text to add the text.

Also, we can add buttons to our navbar.

For example, we can write:

<nav class="navbar navbar-light bg-light">  
  <form class="container-fluid justify-content-start">  
    <button class="btn btn-outline-success mr-2" type="button">big button</button>  
    <button class="btn btn-sm btn-outline-secondary" type="button">small button</button>  
  </form>  
</nav>

We have buttons of various sizes in the form element.

The form has the container-fluid and justify-content-start to lay out the buttons.

justify-content-start make them align to the left.

The left button has the mr-2 class to add some right margins to the button.

Conclusion

We can add forms, pictures, dropdowns, and buttons to our navbar.

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 customize navbars with Bootstrap 5.

Text

We can add text to our navbars.

For example, we can write:

<nav class="navbar navbar-light bg-light">  
  <div class="container-fluid">  
    <span class="navbar-text">  
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    </span>  
  </div>  
</nav>

to add the text.

We add the navbar-text class to style the text to fit the navbar.

Also, we can mix and match other utility classes as we wish:

<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="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navbarText">  
      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">  
        <li class="nav-item">  
          <a class="nav-link active" href="#">Home</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Profile</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Settings</a>  
        </li>  
      </ul>  
      <span class="navbar-text">  
        more text  
      </span>  
    </div>  
  </div>  
</nav>

We have a navbar with a brand and nav item.

We add the mr-auto to add right margin to our nav.

And we have the mb-2 and mb-lg-0 classes to change the bottom margin depending on the width of the screen.

If it’s large, then there’s no bottom margin.

Color Schemes

The color schemes of navbar can also change.

We can add the navbar-dark and bg-dark classes to make the navbar dark.

navbar-dark and bg-primary classes make the navbar blue.

We can also apply our own styles.

For example, we can write:

<nav class="navbar navbar-dark bg-dark">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">App</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navbarText">  
      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">  
        <li class="nav-item">  
          <a class="nav-link active" href="#">Home</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Profile</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Settings</a>  
        </li>  
      </ul>  
    </div>  
  </div>  
</nav>

to add a dark navbar.

The classes are applied to the root navbar element.

We can also apply our own navbar color:

<nav class="navbar navbar-light" style="background-color: lightblue">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">App</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navbarText">  
      <ul class="navbar-nav mr-auto mb-2 mb-lg-0">  
        <li class="nav-item">  
          <a class="nav-link active" href="#">Home</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Profile</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Settings</a>  
        </li>  
      </ul>  
    </div>  
  </div>  
</nav>

We added the style attribute to do that.

Containers

We can add a container class to center the nav bar on the page.

For example, we can write:

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

Then we’ll get some margins around the page.

Also, we can use any responsive containers to change the width of the navbar:

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

We added the navbar-expand-lg class to make it expand when the screen hits the lg breakpoint or wider.

Placement

The placement of the navbar can also be changed.

For example, we can write:

<nav class="navbar fixed-top navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">Fixed Navbar</a>  
  </div>  
</nav>

Then we have the fixed-top class to make the navbar stick to the top.

To keep the navbar at the bottom of the screen, we can write:

<nav class="navbar fixed-bottom navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">Fixed Navbar</a>  
  </div>  
</nav>

The fixed-bottom class keeps the navbar at the bottom.

We can also use the sticky-top class to make it stick to the top:

<nav class="navbar sticky-top navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">Fixed Navbar</a>  
  </div>  
</nav>

Conclusion

We can place our navbar and its content the way we want with various classes.