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

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

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

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

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

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

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

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

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

<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">Pay securely with card, wallet or in three interest-free instalments.</p>
      <p class="small mb-3">Every detail is handled by people who care about getting it right.</p>
      <p class="small mb-3">Gift wrapping and a handwritten note are free on every order.</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">Every detail is handled by people who care about getting it right.</p>
      <p class="small mb-3">Thousands of five-star reviews from customers who came back for more.</p>
      <p class="small mb-3">Clear prices, honest advice and no surprises along the way.</p>
      <p class="small mb-3">Start in minutes and get help from a real person whenever you need it.</p>
    </div>
  </div>
</div>

2Sticky save bar

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

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

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

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

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

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

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

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

<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 keep things simple, so you can focus on what matters to you.</p>
      <p class="small mb-3">Free shipping on orders over $50 and easy returns within 30 days.</p>
      <p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</p>
      <p class="small mb-3">We work directly with makers, so prices stay fair for everyone.</p>
      <p class="small mb-3">New pieces arrive every month, and the best ones sell out fast.</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">Each product is checked by hand before it goes into the box.</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
Ravi Duarte	Marketing Lead	Copenhagen
Ruby Tanaka	Operations Manager	Austin
Felix Novak	Finance Lead	Singapore
Chloe Haddad	Support Specialist	Austin
Nadia Brennan	Customer Success	Kyoto
Finn Nguyen	QA Engineer	Kyoto
Maya Rossi	Finance Lead	Lisbon
Aria Okafor	Finance Lead	Singapore
Ruby Fischer	QA Engineer	Montreal
Freya Kowalski	QA Engineer	Edinburgh
Lea Larsen	Data Analyst	Barcelona
Omar Hughes	Content Writer	Dublin

<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>Ravi Duarte</td>
          <td>Marketing Lead</td>
          <td>Copenhagen</td>
        </tr>
        <tr>
          <td>Ruby Tanaka</td>
          <td>Operations Manager</td>
          <td>Austin</td>
        </tr>
        <tr>
          <td>Felix Novak</td>
          <td>Finance Lead</td>
          <td>Singapore</td>
        </tr>
        <tr>
          <td>Chloe Haddad</td>
          <td>Support Specialist</td>
          <td>Austin</td>
        </tr>
        <tr>
          <td>Nadia Brennan</td>
          <td>Customer Success</td>
          <td>Kyoto</td>
        </tr>
        <tr>
          <td>Finn Nguyen</td>
          <td>QA Engineer</td>
          <td>Kyoto</td>
        </tr>
        <tr>
          <td>Maya Rossi</td>
          <td>Finance Lead</td>
          <td>Lisbon</td>
        </tr>
        <tr>
          <td>Aria Okafor</td>
          <td>Finance Lead</td>
          <td>Singapore</td>
        </tr>
        <tr>
          <td>Ruby Fischer</td>
          <td>QA Engineer</td>
          <td>Montreal</td>
        </tr>
        <tr>
          <td>Freya Kowalski</td>
          <td>QA Engineer</td>
          <td>Edinburgh</td>
        </tr>
        <tr>
          <td>Lea Larsen</td>
          <td>Data Analyst</td>
          <td>Barcelona</td>
        </tr>
        <tr>
          <td>Omar Hughes</td>
          <td>Content Writer</td>
          <td>Dublin</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, Nadia
Alvarez, Noah
Ashford, Priya

B

Brennan, Lucas

C

Carter, Zoe

H

Haddad, Kenji
Harlow, Leo
Harlow, Theo
Hughes, Arjun

I

Ibrahim, Tariq

K

Kim, Jonah
Kim, Mason

L

Larsen, Diego
Lindqvist, Kai

M

Moreau, Mateo
Morgan, Ethan
Morgan, Hana

P

Patel, Ella

Q

Quinn, Sofia

R

Rossi, Mia

S

Sato, Owen

V

Varga, Felix
Varga, Luna

W

Whitaker, Chloe

<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, Nadia</li>
        <li class="py-1">Alvarez, Noah</li>
        <li class="py-1">Ashford, Priya</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">B</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Brennan, Lucas</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, Zoe</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, Kenji</li>
        <li class="py-1">Harlow, Leo</li>
        <li class="py-1">Harlow, Theo</li>
        <li class="py-1">Hughes, Arjun</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, Tariq</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, Jonah</li>
        <li class="py-1">Kim, Mason</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, Diego</li>
        <li class="py-1">Lindqvist, Kai</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">Moreau, Mateo</li>
        <li class="py-1">Morgan, Ethan</li>
        <li class="py-1">Morgan, Hana</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">P</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Patel, Ella</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">Q</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Quinn, Sofia</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">R</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Rossi, Mia</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">Sato, Owen</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">V</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Varga, Felix</li>
        <li class="py-1">Varga, Luna</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, Chloe</li>
      </ul>
    </section>
  </div>
</div>

5Sticky sidebar

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

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

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

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

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

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

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

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

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

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

<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">Our packaging is plastic-free and every delivery is carbon-neutral.</p>
        <p class="small mb-3">Pay securely with card, wallet or in three interest-free instalments.</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 measure success by how many shoppers come back and tell their friends.</p>
        <p class="small mb-3">Every piece is made in small batches from materials we test ourselves.</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">Members get early access to new drops and prices only they can see.</p>
        <p class="small mb-3">We listen first, then build a plan around what you actually need.</p>
        <p class="small mb-3">New pieces arrive every month, and the best ones sell out fast.</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