Header

Basic header

Combine flex alignment, spacing, and color utilities directly on the <header> tag - no wrapper <nav> needed for simple layouts.

<header class="bg-dark text-white px-4 py-3 justify-between">
  <span class="fw-700">My App</span>
  <a href="#" class="bg-primary text-white px-3 py-1 rounded-pill">
    Sign in
  </a>
</header>

Headings inherit color

Just like <footer>, any heading placed inside a <header> inherits currentColor and drops its default top/bottom margin.

<header class="bg-primary text-white px-4 py-4">
  <h1>Welcome back</h1>
</header>

Transparent header

Add .bg-none to render the header with no background - useful for a header that overlays a hero image or colored section.

<header class="bg-none absolute px-4 py-3">
  <span class="text-white fw-700">My App</span>
</header>

Reference