Photo by Brian Chan on Unsplash

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.

Photo by Randy Fath on Unsplash

Conclusion

We can add navs to add navigation to our app.

We can arrange various items in various ways.

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store