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.

Five pieces for a capsule wardrobe

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

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

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.

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.

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

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

<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> Five pieces for a capsule wardrobe
    </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">Not sure about the size? Our fit guide and live chat help you choose.</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">Gift wrapping and a handwritten note are free on every order.</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">Our packaging is plastic-free and every delivery is carbon-neutral.</p>
      <p class="small mb-3">Free shipping on orders over $50 and easy returns within 30 days.</p>
      <p class="small mb-3">We work directly with makers, so prices stay fair for everyone.</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.

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.

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

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.

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

<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 listen first, then build a plan around what you actually need.</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">Pay securely with card, wallet or in three interest-free instalments.</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">New pieces arrive every month, and the best ones sell out fast.</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">Members get early access to new drops and prices only they can see.</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
Aria Mensah	Customer Success	Vancouver
Tariq Lindqvist	QA Engineer	Lisbon
Theo Delgado	Data Analyst	Denver
Kai Tanaka	Marketing Lead	Toronto
Elena Haddad	Operations Manager	Kyoto
Ethan Nguyen	Content Writer	Copenhagen
Priya Kim	Customer Success	Singapore
Maya Silva	Art Director	Prague
Kai Moreau	Sales Executive	Austin
Mason Fischer	Support Specialist	Seoul
Freya Ashford	Product Designer	Edinburgh
Ava Rossi	Backend 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>Aria Mensah</td>
          <td>Customer Success</td>
          <td>Vancouver</td>
        </tr>
        <tr>
          <td>Tariq Lindqvist</td>
          <td>QA Engineer</td>
          <td>Lisbon</td>
        </tr>
        <tr>
          <td>Theo Delgado</td>
          <td>Data Analyst</td>
          <td>Denver</td>
        </tr>
        <tr>
          <td>Kai Tanaka</td>
          <td>Marketing Lead</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Elena Haddad</td>
          <td>Operations Manager</td>
          <td>Kyoto</td>
        </tr>
        <tr>
          <td>Ethan Nguyen</td>
          <td>Content Writer</td>
          <td>Copenhagen</td>
        </tr>
        <tr>
          <td>Priya Kim</td>
          <td>Customer Success</td>
          <td>Singapore</td>
        </tr>
        <tr>
          <td>Maya Silva</td>
          <td>Art Director</td>
          <td>Prague</td>
        </tr>
        <tr>
          <td>Kai Moreau</td>
          <td>Sales Executive</td>
          <td>Austin</td>
        </tr>
        <tr>
          <td>Mason Fischer</td>
          <td>Support Specialist</td>
          <td>Seoul</td>
        </tr>
        <tr>
          <td>Freya Ashford</td>
          <td>Product Designer</td>
          <td>Edinburgh</td>
        </tr>
        <tr>
          <td>Ava Rossi</td>
          <td>Backend 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, Kenji
Ashford, Felix

B

Brennan, Amara

C

Carter, Leo

D

Duarte, Theo

H

Harlow, Diego
Harlow, Zoe
Hughes, Omar

I

Ibrahim, Ravi

K

Kowalski, Arjun
Kowalski, Samir

L

Larsen, Lea

M

Moreau, Hana
Morgan, Liam

N

Nguyen, Nora
Novak, Ivy

O

Okafor, Chloe
Okafor, Mia

P

Patel, Jonah

R

Rossi, Ella

S

Sato, Luna

T

Tanaka, Nadia

V

Varga, Tariq

W

Whitaker, Aria

<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, Kenji</li>
        <li class="py-1">Ashford, Felix</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, Amara</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, Leo</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, Theo</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">Harlow, Diego</li>
        <li class="py-1">Harlow, Zoe</li>
        <li class="py-1">Hughes, Omar</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, Ravi</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">Kowalski, Arjun</li>
        <li class="py-1">Kowalski, Samir</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, Lea</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, Hana</li>
        <li class="py-1">Morgan, Liam</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, Ivy</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">Okafor, Chloe</li>
        <li class="py-1">Okafor, Mia</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, Jonah</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, Ella</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, Luna</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, Nadia</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, Tariq</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, Aria</li>
      </ul>
    </section>
  </div>
</div>

5Sticky sidebar

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

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

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.

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

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

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

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

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

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="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">Gift wrapping and a handwritten note are free on every order.</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">Clear prices, honest advice and no surprises along the way.</p>
        <p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</p>
        <p class="small mb-3">Thousands of five-star reviews from customers who came back for more.</p>
        <p class="small mb-3">Every piece is made in small batches from materials we test ourselves.</p>
        <p class="small mb-3">Each product is checked by hand before it goes into the box.</p>
        <p class="small mb-3">Start in minutes and get help from a real person whenever you need it.</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

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

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

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

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

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

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

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

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="Responsive sticky demo">
    <div class="sticky-md-top text-bg-primary px-3 py-2 small">
      <i class="bi bi-phone" aria-hidden="true"></i> Sticky from md, normal flow on small screens
    </div>
    <div class="p-3">
      <p class="small mb-3">Every detail is handled by people who care about getting it right.</p>
      <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">Every detail is handled by people who care about getting it right.</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">We measure success by how many shoppers come back and tell their friends.</p>
      <p class="small mb-3">Free shipping on orders over $50 and easy returns within 30 days.</p>
      <p class="small mb-3">Thousands of five-star reviews from customers who came back for more.</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.