Bootstrap 5 TutorialLesson 22Free preview

BS5 Navs

This lesson is part of Bootstrap · All levels

Summary

Navs organize navigation links in a row, such as tabs or menu tabs. The basic class is .nav with .nav-item and .nav-link, while the tab or pill display is specified .nav-tabs and .nav-pills. The Bootstrap tab 5 works directly with data-bs-toggle="tab" without custom JavaScript.

Key points

Structure: then P1, then P2.
It makes the tab style, it makes the pill style round. (.nav-pills) (.nav-tabs)
.nav-fill and .nav-justified set the width distribution of the item.
.active on .nav-link marks the selected tab.
Data-bs-toggle="tab" with data-bs-target enables tab shift.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.