Bootstrap 5 — Navs

Image for post
Image for post
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:

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:

Available Styles

There are various styles we can apply to navs.

Horizontal Alignment

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

Vertical

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

This can also be done without ul s:

Tabs

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

Pills

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

Fill and Justify

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

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

Working with Flex Utilities

We can use flexbox utilities to position and size items:

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.

Image for post
Image for post
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!

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/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