Position

Position helpers pin an element to the top or bottom (fixed-top, fixed-bottom) or keep it in view while its container scrolls (sticky-top, sticky-bottom and the responsive sticky-*-top variants). Every example runs inside its own scrollable frame, so scroll the frames to watch the bars stay put.

1Sticky page header

sticky-top keeps a section header visible while the content below it scrolls. Scroll the frame.

A small guide to a calmer home

Pay securely with card, wallet or in three interest-free instalments.

Free shipping on orders over $50 and easy returns within 30 days.

New pieces arrive every month, and the best ones sell out fast.

We keep things simple, so you can focus on what matters to you.

We work directly with makers, so prices stay fair for everyone.

New pieces arrive every month, and the best ones sell out fast.

Pay securely with card, wallet or in three interest-free instalments.

We keep things simple, so you can focus on what matters to you.

<div class="hp-pos">
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Sticky header demo">
    <header class="sticky-top bg-page border-b px-4 py-2 font-semibold">
      <i class="bi bi-journal-text" aria-hidden="true"></i> A small guide to a calmer home
    </header>
    <div class="p-4">
      <p class="small mb-4">Pay securely with card, wallet or in three interest-free instalments.</p>
      <p class="small mb-4">Free shipping on orders over $50 and easy returns within 30 days.</p>
      <p class="small mb-4">New pieces arrive every month, and the best ones sell out fast.</p>
      <p class="small mb-4">We keep things simple, so you can focus on what matters to you.</p>
      <p class="small mb-4">We work directly with makers, so prices stay fair for everyone.</p>
      <p class="small mb-4">New pieces arrive every month, and the best ones sell out fast.</p>
      <p class="small mb-4">Pay securely with card, wallet or in three interest-free instalments.</p>
      <p class="small mb-4">We keep things simple, so you can focus on what matters to you.</p>
    </div>
  </div>
</div>

2Sticky save bar

sticky-bottom keeps form actions at the bottom edge of the scrolling area.

We listen first, then build a plan around what you actually need.

Free shipping on orders over $50 and easy returns within 30 days.

Every detail is handled by people who care about getting it right.

Start in minutes and get help from a real person whenever you need it.

Gift wrapping and a handwritten note are free on every order.

Members get early access to new drops and prices only they can see.

Our team has done this many times, so you never have to guess.

<div class="hp-pos">
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Sticky save bar demo">
    <div class="p-4">
      <p class="small mb-4">We listen first, then build a plan around what you actually need.</p>
      <p class="small mb-4">Free shipping on orders over $50 and easy returns within 30 days.</p>
      <p class="small mb-4">Every detail is handled by people who care about getting it right.</p>
      <p class="small mb-4">Start in minutes and get help from a real person whenever you need it.</p>
      <p class="small mb-4">Gift wrapping and a handwritten note are free on every order.</p>
      <p class="small mb-4">Members get early access to new drops and prices only they can see.</p>
      <p class="small mb-4">Our team has done this many times, so you never have to guess.</p>
    </div>
    <div class="sticky-bottom bg-surface-3 border-t p-2 flex justify-end gap-2">
      <button type="button" class="btn btn-sm btn-light">Discard</button>
      <button type="button" class="btn btn-sm btn-primary">Save changes</button>
    </div>
  </div>
</div>

3Sticky table header

Put sticky-top on the thead so the column names stay visible in a long table.

Name	Role	City
Theo Larsen	Customer Success	Prague
Owen Kim	Product Designer	Denver
Maya Morgan	Data Analyst	Kyoto
Ava Carter	Content Writer	Melbourne
Diego Whitaker	Backend Engineer	Valencia
Luna Okafor	Marketing Lead	Toronto
Kenji Mensah	Operations Manager	Kyoto
Priya Quinn	Marketing Lead	Toronto
Ava Novak	Frontend Engineer	Prague
Isla Duarte	Data Analyst	Barcelona
Amara Ashford	Support Specialist	Denver
Ella Fischer	Backend Engineer	Melbourne

<div class="hp-pos">
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Team table">
    <table class="table table-sm table-striped mb-0">
      <thead class="sticky-top">
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Role</th>
          <th scope="col">City</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Theo Larsen</td>
          <td>Customer Success</td>
          <td>Prague</td>
        </tr>
        <tr>
          <td>Owen Kim</td>
          <td>Product Designer</td>
          <td>Denver</td>
        </tr>
        <tr>
          <td>Maya Morgan</td>
          <td>Data Analyst</td>
          <td>Kyoto</td>
        </tr>
        <tr>
          <td>Ava Carter</td>
          <td>Content Writer</td>
          <td>Melbourne</td>
        </tr>
        <tr>
          <td>Diego Whitaker</td>
          <td>Backend Engineer</td>
          <td>Valencia</td>
        </tr>
        <tr>
          <td>Luna Okafor</td>
          <td>Marketing Lead</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Kenji Mensah</td>
          <td>Operations Manager</td>
          <td>Kyoto</td>
        </tr>
        <tr>
          <td>Priya Quinn</td>
          <td>Marketing Lead</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Ava Novak</td>
          <td>Frontend Engineer</td>
          <td>Prague</td>
        </tr>
        <tr>
          <td>Isla Duarte</td>
          <td>Data Analyst</td>
          <td>Barcelona</td>
        </tr>
        <tr>
          <td>Amara Ashford</td>
          <td>Support Specialist</td>
          <td>Denver</td>
        </tr>
        <tr>
          <td>Ella Fischer</td>
          <td>Backend Engineer</td>
          <td>Melbourne</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

4Alphabet section headings

Each letter heading is sticky inside its own section, so the next letter pushes the previous one away.

A

Alvarez, Owen
Ashford, Omar

B

Brennan, Samir

D

Delgado, Theo

H

Haddad, Mateo
Haddad, Noah
Harlow, Freya
Hughes, Jonah

K

Kowalski, Kai

L

Lindqvist, Ruby

M

Mensah, Ravi
Moreau, Nora
Morgan, Arjun

N

Nguyen, Leo

O

Okafor, Sofia
Ortega, Mason

P

Patel, Aria

Q

Quinn, Elena

R

Rossi, Ivy
Rossi, Zoe

S

Sato, Nadia
Silva, Chloe
Silva, Ethan

T

Tanaka, Lucas

<div class="hp-pos">
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Contacts">
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">A</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Alvarez, Owen</li>
        <li class="py-1">Ashford, Omar</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">B</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Brennan, Samir</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">D</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Delgado, Theo</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">H</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Haddad, Mateo</li>
        <li class="py-1">Haddad, Noah</li>
        <li class="py-1">Harlow, Freya</li>
        <li class="py-1">Hughes, Jonah</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">K</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Kowalski, Kai</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">L</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Lindqvist, Ruby</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">M</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Mensah, Ravi</li>
        <li class="py-1">Moreau, Nora</li>
        <li class="py-1">Morgan, Arjun</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">N</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Nguyen, Leo</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">O</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Okafor, Sofia</li>
        <li class="py-1">Ortega, Mason</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">P</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Patel, Aria</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">Q</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Quinn, Elena</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">R</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Rossi, Ivy</li>
        <li class="py-1">Rossi, Zoe</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">S</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Sato, Nadia</li>
        <li class="py-1">Silva, Chloe</li>
        <li class="py-1">Silva, Ethan</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">T</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Tanaka, Lucas</li>
      </ul>
    </section>
  </div>
</div>

5Sticky sidebar

A column with a sticky-top block stays in view next to a long content column.

Thousands of five-star reviews from customers who came back for more.

Friendly people answer your questions quickly, by phone, chat or email.

Our packaging is plastic-free and every delivery is carbon-neutral.

Each product is checked by hand before it goes into the box.

We measure success by how many shoppers come back and tell their friends.

Not sure about the size? Our fit guide and live chat help you choose.

Order before 2 pm and most items leave our warehouse the same day.

Every piece is made in small batches from materials we test ourselves.

Clear prices, honest advice and no surprises along the way.

<div class="hp-pos">
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Article with sidebar">
    <div class="row g-0">
      <div class="col-4 border-e">
        <nav class="sticky-top p-2 small" aria-label="On this page">
          <div class="font-semibold mb-1">
            On this page
          </div>
          <a class="block" href="#">Overview</a><a class="block" href="#">Setup</a><a class="block" href="#">FAQ</a>
        </nav>
      </div>
      <div class="col-8 p-4">
        <p class="small mb-4">Thousands of five-star reviews from customers who came back for more.</p>
        <p class="small mb-4">Friendly people answer your questions quickly, by phone, chat or email.</p>
        <p class="small mb-4">Our packaging is plastic-free and every delivery is carbon-neutral.</p>
        <p class="small mb-4">Each product is checked by hand before it goes into the box.</p>
        <p class="small mb-4">We measure success by how many shoppers come back and tell their friends.</p>
        <p class="small mb-4">Not sure about the size? Our fit guide and live chat help you choose.</p>
        <p class="small mb-4">Order before 2 pm and most items leave our warehouse the same day.</p>
        <p class="small mb-4">Every piece is made in small batches from materials we test ourselves.</p>
        <p class="small mb-4">Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </div>
</div>

6Responsive sticky (md and up)

sticky-md-top only sticks from the md breakpoint; on phones the bar scrolls away with the page.

Sticky from md, normal flow on small screens

Thousands of shoppers already trust us, and we work hard to keep it that way.

Free shipping on orders over $50 and easy returns within 30 days.

Friendly people answer your questions quickly, by phone, chat or email.

We listen first, then build a plan around what you actually need.

New pieces arrive every month, and the best ones sell out fast.

We keep things simple, so you can focus on what matters to you.

Every piece is made in small batches from materials we test ourselves.

Our packaging is plastic-free and every delivery is carbon-neutral.

<div class="hp-pos">
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Responsive sticky demo">
    <div class="sticky-md-top text-bg-primary px-4 py-2 small">
      <i class="bi bi-phone-fill" aria-hidden="true"></i> Sticky from md, normal flow on small screens
    </div>
    <div class="p-4">
      <p class="small mb-4">Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
      <p class="small mb-4">Free shipping on orders over $50 and easy returns within 30 days.</p>
      <p class="small mb-4">Friendly people answer your questions quickly, by phone, chat or email.</p>
      <p class="small mb-4">We listen first, then build a plan around what you actually need.</p>
      <p class="small mb-4">New pieces arrive every month, and the best ones sell out fast.</p>
      <p class="small mb-4">We keep things simple, so you can focus on what matters to you.</p>
      <p class="small mb-4">Every piece is made in small batches from materials we test ourselves.</p>
      <p class="small mb-4">Our packaging is plastic-free and every delivery is carbon-neutral.</p>
    </div>
  </div>
</div>

7Fixed-top navbar

fixed-top pins a navbar to the top edge; the frame acts as the viewport, so the bar stays inside the example.

Clear prices, honest advice and no surprises along the way.

Every detail is handled by people who care about getting it right.

Not sure about the size? Our fit guide and live chat help you choose.

Pay securely with card, wallet or in three interest-free instalments.

Thousands of five-star reviews from customers who came back for more.

We measure success by how many shoppers come back and tell their friends.

Members get early access to new drops and prices only they can see.

Gift wrapping and a handwritten note are free on every order.

<div class="hp-pos">
  <nav class="navbar fixed-top bg-page border-b px-4 py-2" aria-label="Demo">
    <span class="navbar-brand mb-0 h6"><i class="bi bi-lightning-charge-fill" aria-hidden="true"></i> Mira Point</span>
    <button type="button" class="btn btn-sm btn-outline-primary">Sign up</button>
  </nav>
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Fixed navbar demo">
    <div class="px-4 pb-4" style="padding-top:4rem">
      <p class="small mb-4">Clear prices, honest advice and no surprises along the way.</p>
      <p class="small mb-4">Every detail is handled by people who care about getting it right.</p>
      <p class="small mb-4">Not sure about the size? Our fit guide and live chat help you choose.</p>
      <p class="small mb-4">Pay securely with card, wallet or in three interest-free instalments.</p>
      <p class="small mb-4">Thousands of five-star reviews from customers who came back for more.</p>
      <p class="small mb-4">We measure success by how many shoppers come back and tell their friends.</p>
      <p class="small mb-4">Members get early access to new drops and prices only they can see.</p>
      <p class="small mb-4">Gift wrapping and a handwritten note are free on every order.</p>
    </div>
  </div>
</div>

8Fixed-bottom tab bar

A mobile style tab bar with fixed-bottom; content gets bottom padding so nothing hides behind it.