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 care for linen so it lasts for years

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

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

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

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

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

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

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

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

<div class="hp-pos">
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Sticky header demo">
    <header class="sticky-top bg-body border-bottom px-3 py-2 fw-semibold">
      <i class="bi bi-journal-text" aria-hidden="true"></i> How to care for linen so it lasts for years
    </header>
    <div class="p-3">
      <p class="small mb-3">Clear prices, honest advice and no surprises along the way.</p>
      <p class="small mb-3">Thousands of shoppers already trust us, and we work hard to keep it that way.</p>
      <p class="small mb-3">Start in minutes and get help from a real person whenever you need it.</p>
      <p class="small mb-3">Not sure about the size? Our fit guide and live chat help you choose.</p>
      <p class="small mb-3">Members get early access to new drops and prices only they can see.</p>
      <p class="small mb-3">Gift wrapping and a handwritten note are free on every order.</p>
      <p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</p>
      <p class="small mb-3">We measure success by how many shoppers come back and tell their friends.</p>
    </div>
  </div>
</div>

2Sticky save bar

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

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

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

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.

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

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

<div class="hp-pos">
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Sticky save bar demo">
    <div class="p-3">
      <p class="small mb-3">We work directly with makers, so prices stay fair for everyone.</p>
      <p class="small mb-3">Order before 2 pm and most items leave our warehouse the same day.</p>
      <p class="small mb-3">We listen first, then build a plan around what you actually need.</p>
      <p class="small mb-3">Free shipping on orders over $50 and easy returns within 30 days.</p>
      <p class="small mb-3">Every detail is handled by people who care about getting it right.</p>
      <p class="small mb-3">Pay securely with card, wallet or in three interest-free instalments.</p>
      <p class="small mb-3">Thousands of five-star reviews from customers who came back for more.</p>
    </div>
    <div class="sticky-bottom bg-body-tertiary border-top p-2 d-flex justify-content-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
Luna Okafor	Product Designer	Seoul
Leo Larsen	HR Partner	Cape Town
Mateo Rossi	Marketing Lead	Melbourne
Hana Quinn	Backend Engineer	Melbourne
Chloe Delgado	Project Manager	Lisbon
Lucas Ashford	Support Specialist	Montreal
Mason Patel	Operations Manager	Valencia
Maya Whitaker	Operations Manager	Denver
Freya Kim	Project Manager	Kyoto
Omar Brennan	Frontend Engineer	Edinburgh
Zoe Varga	HR Partner	Dublin
Ethan Kowalski	Frontend Engineer	Austin

<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>Luna Okafor</td>
          <td>Product Designer</td>
          <td>Seoul</td>
        </tr>
        <tr>
          <td>Leo Larsen</td>
          <td>HR Partner</td>
          <td>Cape Town</td>
        </tr>
        <tr>
          <td>Mateo Rossi</td>
          <td>Marketing Lead</td>
          <td>Melbourne</td>
        </tr>
        <tr>
          <td>Hana Quinn</td>
          <td>Backend Engineer</td>
          <td>Melbourne</td>
        </tr>
        <tr>
          <td>Chloe Delgado</td>
          <td>Project Manager</td>
          <td>Lisbon</td>
        </tr>
        <tr>
          <td>Lucas Ashford</td>
          <td>Support Specialist</td>
          <td>Montreal</td>
        </tr>
        <tr>
          <td>Mason Patel</td>
          <td>Operations Manager</td>
          <td>Valencia</td>
        </tr>
        <tr>
          <td>Maya Whitaker</td>
          <td>Operations Manager</td>
          <td>Denver</td>
        </tr>
        <tr>
          <td>Freya Kim</td>
          <td>Project Manager</td>
          <td>Kyoto</td>
        </tr>
        <tr>
          <td>Omar Brennan</td>
          <td>Frontend Engineer</td>
          <td>Edinburgh</td>
        </tr>
        <tr>
          <td>Zoe Varga</td>
          <td>HR Partner</td>
          <td>Dublin</td>
        </tr>
        <tr>
          <td>Ethan Kowalski</td>
          <td>Frontend Engineer</td>
          <td>Austin</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, Ravi
Alvarez, Ruby
Ashford, Ivy

C

Carter, Hana
Carter, Noah

D

Duarte, Isla
Duarte, Samir

F

Fischer, Arjun
Fischer, Jonah

H

Haddad, Chloe
Haddad, Felix
Harlow, Liam
Hughes, Amara

I

Ibrahim, Mateo

K

Kim, Nadia

L

Larsen, Mia

M

Mensah, Aria
Moreau, Sofia

N

Nguyen, Nora
Novak, Ella

O

Ortega, Lea

S

Silva, Ava

T

Tanaka, Kai

W

Whitaker, Theo

<div class="hp-pos">
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Contacts">
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">A</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Alvarez, Ravi</li>
        <li class="py-1">Alvarez, Ruby</li>
        <li class="py-1">Ashford, Ivy</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">C</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Carter, Hana</li>
        <li class="py-1">Carter, Noah</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">D</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Duarte, Isla</li>
        <li class="py-1">Duarte, Samir</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">F</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Fischer, Arjun</li>
        <li class="py-1">Fischer, Jonah</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">H</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Haddad, Chloe</li>
        <li class="py-1">Haddad, Felix</li>
        <li class="py-1">Harlow, Liam</li>
        <li class="py-1">Hughes, Amara</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">I</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Ibrahim, Mateo</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">K</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Kim, Nadia</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">L</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Larsen, Mia</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">M</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Mensah, Aria</li>
        <li class="py-1">Moreau, Sofia</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">N</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Nguyen, Nora</li>
        <li class="py-1">Novak, Ella</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">O</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Ortega, Lea</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">S</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Silva, Ava</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">T</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Tanaka, Kai</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">W</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Whitaker, Theo</li>
      </ul>
    </section>
  </div>
</div>

5Sticky sidebar

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

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.

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

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

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

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

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

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

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

<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-end">
        <nav class="sticky-top p-2 small" aria-label="On this page">
          <div class="fw-semibold mb-1">
            On this page
          </div>
          <a class="d-block" href="#">Overview</a><a class="d-block" href="#">Setup</a><a class="d-block" href="#">FAQ</a>
        </nav>
      </div>
      <div class="col-8 p-3">
        <p class="small mb-3">Every piece is made in small batches from materials we test ourselves.</p>
        <p class="small mb-3">We keep things simple, so you can focus on what matters to you.</p>
        <p class="small mb-3">Thousands of five-star reviews from customers who came back for more.</p>
        <p class="small mb-3">Free shipping on orders over $50 and easy returns within 30 days.</p>
        <p class="small mb-3">New pieces arrive every month, and the best ones sell out fast.</p>
        <p class="small mb-3">Gift wrapping and a handwritten note are free on every order.</p>
        <p class="small mb-3">Our packaging is plastic-free and every delivery is carbon-neutral.</p>
        <p class="small mb-3">Our team has done this many times, so you never have to guess.</p>
        <p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</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