Nav tabs and pills in Bootsrap - Browser Rendering Trace

Render Flow - Nav tabs and pills

Load HTML with nav container

↓

Create nav element with role=navigation

↓

Create list of nav items

↓

Apply Bootstrap CSS classes for tabs or pills

↓

Browser calculates layout and styles

↓

Render clickable nav items with active state

↓

Handle user interaction for active tab/pill

The browser reads the nav HTML structure, applies Bootstrap's CSS classes for tabs or pills styling, calculates layout and colors, then renders interactive navigation items with an active highlight.

Render Steps - 3 Steps

Code Added:<nav> with <ul class="nav nav-tabs"> and <li> items

Before

[Empty page]

→

After

[nav]
  [ul.nav-tabs]
    [li.nav-item]
      [a.nav-link active] Home
    [li.nav-item]
      [a.nav-link] Profile

The nav container and list items appear as plain text links stacked vertically with no special styling.

🔧 Browser Action:Creates DOM nodes and applies default browser styles

Code Sample

This code produces a horizontal navigation bar with tab-style clickable items, where the active tab is visually highlighted with a white background and border.

Bootsrap

<nav role="navigation">
  <ul class="nav nav-tabs">
    <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>
  </ul>
</nav>

Bootsrap

.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}
.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.nav-tabs .nav-link.active {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}

Render Quiz - 3 Questions

After applying step 2, how are the nav items visually arranged?

A Horizontally with no borders or highlights

B Horizontally with a bottom border and active tab highlighted

C Vertically stacked with no borders

D Vertically stacked with active tab highlighted

Common Confusions - 3 Topics

Why do my nav links stack vertically instead of horizontally?

You might be missing the 'nav' and 'nav-tabs' or 'nav-pills' classes on the <ul> element. These classes tell Bootstrap to display the items horizontally.

💡 Always add 'nav' plus 'nav-tabs' or 'nav-pills' classes to the <ul> for horizontal nav.

Why doesn't the active tab highlight show up?

The active tab needs the 'active' class on the <a> element inside the nav item. Without it, Bootstrap won't apply the highlight styles.

💡 Add 'active' class to the <a> link of the selected tab.

Why does the border appear around all tabs instead of just the active one?

Bootstrap sets transparent borders on inactive tabs to keep layout consistent. Only the active tab has visible colored borders.

💡 Transparent borders keep tabs aligned; only active tab's border is colored.

Property Reference

Property	Value Applied	Visual Effect	Common Use
nav	nav-tabs	Horizontal list with bottom border	Create tab-style navigation
nav-link	active	Highlighted tab with white background and border	Show selected tab
nav	nav-pills	Horizontal or vertical list with rounded pill-shaped links	Create pill-style navigation
nav-link	disabled	Greyed out link, not clickable	Show inactive or unavailable tabs

Concept Snapshot

Bootstrap nav tabs create horizontal navigation bars. Use 'nav' and 'nav-tabs' classes on <ul> for tabs style. Add 'active' class to <a> for the selected tab highlight. Tabs have bottom border; active tab has white background and border. Without 'nav-tabs', nav items stack vertically by default.