Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
BrandNavFormsTextColorsTogglerResponsivenessExternal contentAdvanced exampleScrolling

Navbar

Brand

Link

Heading

Image

Image and text

<h4 class="h5 text-muted mt-3">Link</h4>
<nav>
  <div>
    <a href="#">Navbar</a>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Heading</h4>
<nav>
  <div>
    <span>Navbar</span>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Image</h4>
<nav>
  <div>
    <a href="#">
      <img src="../img/50x50.png" alt="">
    </a>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Image and text</h4>
<nav>
  <div>
    <a href="#">
      <img src="../img/50x50.png" alt=""> <span>Navbar</span>
    </a>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Link</h4> <nav> <div> <a href="#">Navbar</a> </div> </nav> <h4 class="h5 text-muted mt-3">Heading</h4> <nav> <div> <span>Navbar</span> </div> </nav> <h4 class="h5 text-muted mt-3">Image</h4> <nav> <div> <a href="#"> <img src="../img/50x50.png" alt=""> </a> </div> </nav> <h4 class="h5 text-muted mt-3">Image and text</h4> <nav> <div> <a href="#"> <img src="../img/50x50.png" alt=""> <span>Navbar</span> </a> </div> </nav>

Nav

Unordered list

Links

Dropdown

<h4 class="h5 text-muted mt-3">Unordered list</h4>
<nav>
  <div>
    <a href="#">Navbar</a>
    <div>
      <ul>
        <li>
          <a href="#">Active</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Links</h4>
<nav>
  <div>
    <a href="#">Navbar</a>
    <div>
      <div>
        <a href="#">Active</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Disabled</a>
      </div>
    </div>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Dropdown</h4>
<nav>
  <div>
    <a href="#">Navbar</a>
    <div>
      <ul>
        <li>
          <a href="#">Active</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" id="navbarWithDropdown" data-bs-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu" aria-labelledby="navbarWithDropdown">
            <li>
              <a href="#" class="dropdown-item">First item</a>
            </li>
            <li>
              <a href="#" class="dropdown-item">Second item</a>
            </li>
            <li>
              <a href="#" class="dropdown-item">Third item</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Unordered list</h4> <nav> <div> <a href="#">Navbar</a> <div> <ul> <li> <a href="#">Active</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Disabled</a> </li> </ul> </div> </div> </nav> <h4 class="h5 text-muted mt-3">Links</h4> <nav> <div> <a href="#">Navbar</a> <div> <div> <a href="#">Active</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Disabled</a> </div> </div> </div> </nav> <h4 class="h5 text-muted mt-3">Dropdown</h4> <nav> <div> <a href="#">Navbar</a> <div> <ul> <li> <a href="#">Active</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" id="navbarWithDropdown" data-bs-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="navbarWithDropdown"> <li> <a href="#" class="dropdown-item">First item</a> </li> <li> <a href="#" class="dropdown-item">Second item</a> </li> <li> <a href="#" class="dropdown-item">Third item</a> </li> </ul> </li> <li> <a href="#">Disabled</a> </li> </ul> </div> </div> </nav>

Forms

<nav>
  <div>
    <a href="#">Navbar</a>
    <form>
      <div>
        <input type="search" placeholder="Search text here">
        <button type="submit">Search</button>
      </div>
    </form>
  </div>
</nav>
<nav> <div> <a href="#">Navbar</a> <form> <div> <input type="search" placeholder="Search text here"> <button type="submit">Search</button> </div> </form> </div> </nav>

Text

<nav>
  <div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
</nav>
<nav> <div> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> </div> </nav>

Colors

Dark navbar

Light navbar

<h4 class="h5 text-muted mt-3">Dark navbar</h4>
<nav>
  <div>
    <a href="#">Primary</a>
  </div>
</nav>
<nav>
  <div>
    <a href="#">Secondary</a>
  </div>
</nav>
<nav>
  <div>
    <a href="#">Success</a>
  </div>
</nav>
<nav>
  <div>
    <a href="#">Danger</a>
  </div>
</nav>
<nav>
  <div>
    <a href="#">Warning</a>
  </div>
</nav>
<nav>
  <div>
    <a href="#">Info</a>
  </div>
</nav>
<nav>
  <div>
    <a href="#">Dark</a>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Light navbar</h4>
<nav>
  <div>
    <a href="#">Light</a>
  </div>
</nav>
<nav>
  <div>
    <a href="#">White</a>
  </div>
</nav>
<nav>
  <div>
    <a href="#">Transparent</a>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Dark navbar</h4> <nav> <div> <a href="#">Primary</a> </div> </nav> <nav> <div> <a href="#">Secondary</a> </div> </nav> <nav> <div> <a href="#">Success</a> </div> </nav> <nav> <div> <a href="#">Danger</a> </div> </nav> <nav> <div> <a href="#">Warning</a> </div> </nav> <nav> <div> <a href="#">Info</a> </div> </nav> <nav> <div> <a href="#">Dark</a> </div> </nav> <h4 class="h5 text-muted mt-3">Light navbar</h4> <nav> <div> <a href="#">Light</a> </div> </nav> <nav> <div> <a href="#">White</a> </div> </nav> <nav> <div> <a href="#">Transparent</a> </div> </nav>

Toggler

Left-aligned toggler

Right-aligned toggler

<h4 class="h5 text-muted mt-3">Left-aligned toggler</h4>
<nav>
  <div>
    <button>
      <span></span>
    </button>
    <a href="#">Navbar</a>
    <div id="navbarResponsiveLeft">
      <ul>
        <li>
          <a href="#">Active</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Right-aligned toggler</h4>
<nav>
  <div>
    <a href="#">Navbar</a>
    <button>
      <span></span>
    </button>
    <div id="navbarResponsiveRight">
      <ul>
        <li>
          <a href="#">Active</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Left-aligned toggler</h4> <nav> <div> <button> <span></span> </button> <a href="#">Navbar</a> <div id="navbarResponsiveLeft"> <ul> <li> <a href="#">Active</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Disabled</a> </li> </ul> </div> </div> </nav> <h4 class="h5 text-muted mt-3">Right-aligned toggler</h4> <nav> <div> <a href="#">Navbar</a> <button> <span></span> </button> <div id="navbarResponsiveRight"> <ul> <li> <a href="#">Active</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Disabled</a> </li> </ul> </div> </div> </nav>

Responsiveness

Small

Medium

Large

Extra large

Extra extra large

<h4 class="h5 text-muted mt-3">Small</h4>
<nav>
  <div>
    <a href="#">Navbar</a>
    <button>
      <span></span>
    </button>
    <div id="navbarResponsiveSmall">
      <ul>
        <li>
          <a href="#">Active</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Medium</h4>
<nav>
  <div>
    <a href="#">Navbar</a>
    <button>
      <span></span>
    </button>
    <div id="navbarResponsiveMedium">
      <ul>
        <li>
          <a href="#">Active</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Large</h4>
<nav>
  <div>
    <a href="#">Navbar</a>
    <button>
      <span></span>
    </button>
    <div id="navbarResponsiveLarge">
      <ul>
        <li>
          <a href="#">Active</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Extra large</h4>
<nav>
  <div>
    <a href="#">Navbar</a>
    <button>
      <span></span>
    </button>
    <div id="navbarResponsiveExtraLarge">
      <ul>
        <li>
          <a href="#">Active</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Extra extra large</h4>
<nav>
  <div>
    <a href="#">Navbar</a>
    <button>
      <span></span>
    </button>
    <div id="navbarResponsiveExtraExtraLarge">
      <ul>
        <li>
          <a href="#">Active</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Small</h4> <nav> <div> <a href="#">Navbar</a> <button> <span></span> </button> <div id="navbarResponsiveSmall"> <ul> <li> <a href="#">Active</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Disabled</a> </li> </ul> </div> </div> </nav> <h4 class="h5 text-muted mt-3">Medium</h4> <nav> <div> <a href="#">Navbar</a> <button> <span></span> </button> <div id="navbarResponsiveMedium"> <ul> <li> <a href="#">Active</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Disabled</a> </li> </ul> </div> </div> </nav> <h4 class="h5 text-muted mt-3">Large</h4> <nav> <div> <a href="#">Navbar</a> <button> <span></span> </button> <div id="navbarResponsiveLarge"> <ul> <li> <a href="#">Active</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Disabled</a> </li> </ul> </div> </div> </nav> <h4 class="h5 text-muted mt-3">Extra large</h4> <nav> <div> <a href="#">Navbar</a> <button> <span></span> </button> <div id="navbarResponsiveExtraLarge"> <ul> <li> <a href="#">Active</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Disabled</a> </li> </ul> </div> </div> </nav> <h4 class="h5 text-muted mt-3">Extra extra large</h4> <nav> <div> <a href="#">Navbar</a> <button> <span></span> </button> <div id="navbarResponsiveExtraExtraLarge"> <ul> <li> <a href="#">Active</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Disabled</a> </li> </ul> </div> </div> </nav>

External content

<div id="navbarExternalContent">
  <div class="p-4">
    <h5>Collapsed content</h5>
    <p class="mb-0">Toggleable via the navbar toggler.</p>
  </div>
</div>
<nav>
  <div>
    <button>
      <span></span>
    </button>
  </div>
</nav>
<div id="navbarExternalContent"> <div class="p-4"> <h5>Collapsed content</h5> <p class="mb-0">Toggleable via the navbar toggler.</p> </div> </div> <nav> <div> <button> <span></span> </button> </div> </nav>

Advanced example

<nav>
  <div>
    <a href="#">Navbar</a>
    <button>
      <span></span>
    </button>
    <div id="navbarAdvanced">
      <ul>
        <li>
          <a href="#">Active</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" id="navbarAdvancedDropdown" data-bs-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu" aria-labelledby="navbarAdvancedDropdown">
            <li>
              <a href="#" class="dropdown-item">First item</a>
            </li>
            <li>
              <a href="#" class="dropdown-item">Second item</a>
            </li>
            <li>
              <a href="#" class="dropdown-item">Third item</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Disabled</a>
        </li>
      </ul>
      <form>
        <div>
          <input type="search" placeholder="Search text here" "="">
          <button type="submit">Search</button>
        </div>
      </form>
    </div>
  </div>
</nav>
<nav> <div> <a href="#">Navbar</a> <button> <span></span> </button> <div id="navbarAdvanced"> <ul> <li> <a href="#">Active</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" id="navbarAdvancedDropdown" data-bs-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="navbarAdvancedDropdown"> <li> <a href="#" class="dropdown-item">First item</a> </li> <li> <a href="#" class="dropdown-item">Second item</a> </li> <li> <a href="#" class="dropdown-item">Third item</a> </li> </ul> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Disabled</a> </li> </ul> <form> <div> <input type="search" placeholder="Search text here" "=""> <button type="submit">Search</button> </div> </form> </div> </div> </nav>

Scrolling

Default

Custom max-height

<h4 class="h5 text-muted mt-3">Default</h4>
<nav>
  <div>
    <a href="#">Navbar</a>
    <button>
      <span></span>
    </button>
    <div id="navbarScrollingDefault">
      <ul>
        <li>
          <a href="#">Active</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Custom max-height</h4>
<nav>
  <div>
    <a href="#">Navbar</a>
    <button>
      <span></span>
    </button>
    <div id="navbarScrollingCustom">
      <ul>
        <li>
          <a href="#">Active</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<h4 class="h5 text-muted mt-3">Default</h4> <nav> <div> <a href="#">Navbar</a> <button> <span></span> </button> <div id="navbarScrollingDefault"> <ul> <li> <a href="#">Active</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> </ul> </div> </div> </nav> <h4 class="h5 text-muted mt-3">Custom max-height</h4> <nav> <div> <a href="#">Navbar</a> <button> <span></span> </button> <div id="navbarScrollingCustom"> <ul> <li> <a href="#">Active</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Disabled</a> </li> </ul> </div> </div> </nav>