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.

How to choose the right product

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

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

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

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

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

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

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

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 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> How to choose the right product
    </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">Thousands of five-star reviews from customers who came back for more.</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">Members get early access to new drops and prices only they can see.</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">Gift wrapping and a handwritten note are free on every order.</p>
      <p class="small mb-4">Our team has done this many times, so you never have to guess.</p>
    </div>
  </div>
</div>

2Sticky save bar

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

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

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

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

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

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

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

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

<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">Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
      <p class="small mb-4">Our packaging is plastic-free and every delivery is carbon-neutral.</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">Clear prices, honest advice and no surprises along the way.</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">We measure success by how many shoppers come back and tell their friends.</p>
      <p class="small mb-4">We listen first, then build a plan around what you actually need.</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
Arjun Mensah	Sales Executive	Toronto
Ruby Moreau	QA Engineer	Dublin
Maya Brennan	HR Partner	Valencia
Ella Harlow	Art Director	Oslo
Ava Kim	Finance Lead	Prague
Nora Carter	Support Specialist	Dublin
Felix Novak	Marketing Lead	Prague
Finn Ashford	Marketing Lead	Oslo
Theo Lindqvist	Product Designer	Porto
Omar Fischer	Customer Success	Barcelona
Nadia Varga	Data Analyst	Vancouver
Sofia Duarte	Finance Lead	Oslo

<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>Arjun Mensah</td>
          <td>Sales Executive</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Ruby Moreau</td>
          <td>QA Engineer</td>
          <td>Dublin</td>
        </tr>
        <tr>
          <td>Maya Brennan</td>
          <td>HR Partner</td>
          <td>Valencia</td>
        </tr>
        <tr>
          <td>Ella Harlow</td>
          <td>Art Director</td>
          <td>Oslo</td>
        </tr>
        <tr>
          <td>Ava Kim</td>
          <td>Finance Lead</td>
          <td>Prague</td>
        </tr>
        <tr>
          <td>Nora Carter</td>
          <td>Support Specialist</td>
          <td>Dublin</td>
        </tr>
        <tr>
          <td>Felix Novak</td>
          <td>Marketing Lead</td>
          <td>Prague</td>
        </tr>
        <tr>
          <td>Finn Ashford</td>
          <td>Marketing Lead</td>
          <td>Oslo</td>
        </tr>
        <tr>
          <td>Theo Lindqvist</td>
          <td>Product Designer</td>
          <td>Porto</td>
        </tr>
        <tr>
          <td>Omar Fischer</td>
          <td>Customer Success</td>
          <td>Barcelona</td>
        </tr>
        <tr>
          <td>Nadia Varga</td>
          <td>Data Analyst</td>
          <td>Vancouver</td>
        </tr>
        <tr>
          <td>Sofia Duarte</td>
          <td>Finance Lead</td>
          <td>Oslo</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, Amara

H

Haddad, Ethan
Hughes, Arjun

I

Ibrahim, Ella
Ibrahim, Liam

K

Kowalski, Kenji

L

Larsen, Ivy
Larsen, Noah
Lindqvist, Luna

M

Mensah, Mason
Moreau, Ava

N

Nguyen, Elena
Nguyen, Mia
Novak, Maya

O

Okafor, Lucas
Ortega, Ravi
Ortega, Tariq

P

Patel, Freya

Q

Quinn, Owen

R

Rossi, Aria
Rossi, Mateo

S

Sato, Chloe

T

Tanaka, Lea

W

Whitaker, Ruby

<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, Amara</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, Ethan</li>
        <li class="py-1">Hughes, Arjun</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">I</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Ibrahim, Ella</li>
        <li class="py-1">Ibrahim, Liam</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, Kenji</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">Larsen, Ivy</li>
        <li class="py-1">Larsen, Noah</li>
        <li class="py-1">Lindqvist, Luna</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, Mason</li>
        <li class="py-1">Moreau, Ava</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, Elena</li>
        <li class="py-1">Nguyen, Mia</li>
        <li class="py-1">Novak, Maya</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, Lucas</li>
        <li class="py-1">Ortega, Ravi</li>
        <li class="py-1">Ortega, Tariq</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, Freya</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, Owen</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, Aria</li>
        <li class="py-1">Rossi, Mateo</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, Chloe</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, Lea</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">W</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Whitaker, Ruby</li>
      </ul>
    </section>
  </div>
</div>

5Sticky sidebar

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

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

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

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

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

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

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

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

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

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

<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">We work directly with makers, so prices stay fair for everyone.</p>
        <p class="small mb-4">Each product is checked by hand before it goes into the box.</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">New pieces arrive every month, and the best ones sell out fast.</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">Every piece is made in small batches from materials we test ourselves.</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">Our packaging is plastic-free and every delivery is carbon-neutral.</p>
        <p class="small mb-4">Every detail is handled by people who care about getting it right.</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