Bootstrap Navs
Navs are Bootstrap's flexible set of styles for building navigation menus, tabs, and pill groups. They are the foundation the more complex Navbar component is built on, so learning them first pays off. In this lesson you will create a basic nav, style it as tabs and pills, control its layout, and wire up tab panels that swap content without reloading the page.
The Basic Nav
Every nav starts the same way: a list or container with the .nav class, holding items styled with .nav-link. Each link can be an anchor or a button. Add .active to the link representing the current page, and .disabled to make a link non-clickable.
A simple nav
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="nav">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Soon</a></li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Tabs and Pills
By adding one extra class to the .nav container you change its whole look. Use .nav-tabs for a classic bordered tab bar, or .nav-pills for rounded, filled buttons. These two styles cover the vast majority of navigation designs.
Tabs and pills side by side
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#">Overview</a></li>
<li class="nav-item"><a class="nav-link" href="#">Reviews</a></li>
</ul>
<ul class="nav nav-pills mt-3">
<li class="nav-item"><a class="nav-link active" href="#">Day</a></li>
<li class="nav-item"><a class="nav-link" href="#">Week</a></li>
<li class="nav-item"><a class="nav-link" href="#">Month</a></li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Layout and Alignment
Navs are built on flexbox, so alignment utilities work directly on the container. Center a nav with .justify-content-center, push it to the right with .justify-content-end, or make every item share the width equally with .nav-fill and .nav-justified.
- .nav-tabs — bordered tab appearance
- .nav-pills — rounded, filled pill buttons
- .flex-column — stack the nav vertically
- .nav-fill — items fill available width proportionally
- .nav-justified — every item gets equal width
A vertical, centered nav
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="nav nav-pills flex-column">
<li class="nav-item"><a class="nav-link active" href="#">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="#">Orders</a></li>
<li class="nav-item"><a class="nav-link" href="#">Customers</a></li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Toggleable Tab Panels
Navs can swap content in place using Bootstrap's tab JavaScript. Give each link data-bs-toggle="tab" and point data-bs-target at a matching pane. Wrap the panes in a .tab-content container, mark each with .tab-pane, and add .show .active to the one that should show first.
Tabs that switch content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#about" type="button" role="tab">About</button>
</li>
</ul>
<div class="tab-content mt-3">
<div class="tab-pane fade show active" id="home" role="tabpanel">Welcome to the home tab.</div>
<div class="tab-pane fade" id="about" role="tabpanel">This is the about tab.</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>With navs you can build tab bars, side menus, and filter groups from the same handful of classes. Master them here and the Navbar lesson will feel familiar.
Exercise: Bootstrap Navs
Which class gives a .nav component a tab-style, bordered appearance?
