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 three-step skincare routine that works

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

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

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

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

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

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

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

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

<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> A three-step skincare routine that works
    </header>
    <div class="p-3">
      <p class="small mb-3">New pieces arrive every month, and the best ones sell out fast.</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 listen first, then build a plan around what you actually need.</p>
      <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">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">Pay securely with card, wallet or in three interest-free instalments.</p>
    </div>
  </div>
</div>

2Sticky save bar

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

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

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

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

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

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

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.

<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">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">We measure success by how many shoppers come back and tell their friends.</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">Thousands of shoppers already trust us, and we work hard to keep it that way.</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>
    </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
Freya Patel	QA Engineer	Austin
Ella Ibrahim	Support Specialist	Montreal
Noah Nguyen	Backend Engineer	Lisbon
Nora Moreau	Art Director	Austin
Diego Okafor	HR Partner	Edinburgh
Mateo Novak	Support Specialist	Valencia
Liam Ortega	Sales Executive	Lisbon
Theo Brennan	Finance Lead	Montreal
Jonah Silva	Support Specialist	Seoul
Isla Whitaker	Product Designer	Prague
Elena Tanaka	Sales Executive	Prague
Luna Delgado	Project Manager	Barcelona

<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>Freya Patel</td>
          <td>QA Engineer</td>
          <td>Austin</td>
        </tr>
        <tr>
          <td>Ella Ibrahim</td>
          <td>Support Specialist</td>
          <td>Montreal</td>
        </tr>
        <tr>
          <td>Noah Nguyen</td>
          <td>Backend Engineer</td>
          <td>Lisbon</td>
        </tr>
        <tr>
          <td>Nora Moreau</td>
          <td>Art Director</td>
          <td>Austin</td>
        </tr>
        <tr>
          <td>Diego Okafor</td>
          <td>HR Partner</td>
          <td>Edinburgh</td>
        </tr>
        <tr>
          <td>Mateo Novak</td>
          <td>Support Specialist</td>
          <td>Valencia</td>
        </tr>
        <tr>
          <td>Liam Ortega</td>
          <td>Sales Executive</td>
          <td>Lisbon</td>
        </tr>
        <tr>
          <td>Theo Brennan</td>
          <td>Finance Lead</td>
          <td>Montreal</td>
        </tr>
        <tr>
          <td>Jonah Silva</td>
          <td>Support Specialist</td>
          <td>Seoul</td>
        </tr>
        <tr>
          <td>Isla Whitaker</td>
          <td>Product Designer</td>
          <td>Prague</td>
        </tr>
        <tr>
          <td>Elena Tanaka</td>
          <td>Sales Executive</td>
          <td>Prague</td>
        </tr>
        <tr>
          <td>Luna Delgado</td>
          <td>Project Manager</td>
          <td>Barcelona</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, Omar
Alvarez, Ruby
Ashford, Nora

C

Carter, Kai
Carter, Leo

D

Duarte, Lea

F

Fischer, Kenji

H

Haddad, Priya
Harlow, Chloe
Hughes, Lucas

I

Ibrahim, Noah

K

Kim, Maya
Kowalski, Sofia

L

Larsen, Ethan
Larsen, Samir
Lindqvist, Finn
Lindqvist, Mason

M

Moreau, Ivy
Morgan, Ava
Morgan, Ravi

O

Ortega, Owen

R

Rossi, Hana

S

Sato, Zoe

V

Varga, 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, Omar</li>
        <li class="py-1">Alvarez, Ruby</li>
        <li class="py-1">Ashford, Nora</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, Kai</li>
        <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, Lea</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, Kenji</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, Priya</li>
        <li class="py-1">Harlow, Chloe</li>
        <li class="py-1">Hughes, Lucas</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, Noah</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, Maya</li>
        <li class="py-1">Kowalski, Sofia</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, Ethan</li>
        <li class="py-1">Larsen, Samir</li>
        <li class="py-1">Lindqvist, Finn</li>
        <li class="py-1">Lindqvist, Mason</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, Ivy</li>
        <li class="py-1">Morgan, Ava</li>
        <li class="py-1">Morgan, Ravi</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, Owen</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, Hana</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, Zoe</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, Aria</li>
      </ul>
    </section>
  </div>
</div>

5Sticky sidebar

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

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

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

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

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

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

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

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

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

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="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">Members get early access to new drops and prices only they can see.</p>
        <p class="small mb-3">Our packaging is plastic-free and every delivery is carbon-neutral.</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">We listen first, then build a plan around what you actually need.</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">Thousands of five-star reviews from customers who came back for more.</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>
      </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 team has done this many times, so you never have to guess.

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

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

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.

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.

<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-fill" 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 team has done this many times, so you never have to guess.</p>
      <p class="small mb-3">Free shipping on orders over $50 and easy returns within 30 days.</p>
      <p class="small mb-3">Pay securely with card, wallet or in three interest-free instalments.</p>
      <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">Not sure about the size? Our fit guide and live chat help you choose.</p>
      <p class="small mb-3">We measure success by how many shoppers come back and tell their friends.</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.

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

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

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.

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

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

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

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

<div class="hp-pos">
  <nav class="navbar fixed-top bg-body border-bottom px-3 py-2" aria-label="Demo">
    <span class="navbar-brand mb-0 h6"><i class="bi bi-lightning-charge-fill" aria-hidden="true"></i> Coraeon</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-3 pb-3" style="padding-top:4rem">
      <p class="small mb-3">Members get early access to new drops and prices only they can see.</p>
      <p class="small mb-3">Each product is checked by hand before it goes into the box.</p>
      <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">Start in minutes and get help from a real person whenever you need it.</p>
      <p class="small mb-3">Thousands of five-star reviews from customers who came back for more.</p>
      <p class="small mb-3">Each product is checked by hand before it goes into the box.</p>
      <p class="small mb-3">Thousands of shoppers already trust us, and we work hard to keep it that way.</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.

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

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

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

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

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

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

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

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

<div class="hp-pos">
  <nav class="fixed-bottom d-flex bg-body border-top" aria-label="App">
    <a href="#" class="flex-fill text-center small py-2 text-decoration-none text-primary" aria-current="page"><i class="bi bi-house-fill" aria-hidden="true"></i><span class="d-block">Home</span></a><a href="#" class="flex-fill text-center small py-2 text-decoration-none text-body-secondary"><i class="bi bi-search" aria-hidden="true"></i><span class="d-block">Search</span></a><a href="#" class="flex-fill text-center small py-2 text-decoration-none text-body-secondary"><i class="bi bi-heart-fill" aria-hidden="true"></i><span class="d-block">Saved</span></a><a href="#" class="flex-fill text-center small py-2 text-decoration-none text-body-secondary"><i class="bi bi-person-fill" aria-hidden="true"></i><span class="d-block">Profile</span></a>
  </nav>
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Mobile tab bar demo">
    <div class="px-3 pt-3" style="padding-bottom:4.5rem">
      <p class="small mb-3">Our packaging is plastic-free and every delivery is carbon-neutral.</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 listen first, then build a plan around what you actually need.</p>
      <p class="small mb-3">Gift wrapping and a handwritten note are free on every order.</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">We measure success by how many shoppers come back and tell their friends.</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">Clear prices, honest advice and no surprises along the way.</p>
    </div>
  </div>
</div>

9App shell: fixed top and bottom

A fixed-top title bar plus a fixed-bottom status line around a scrolling list.

Inbox

Synced just now

Ella PatelStyling one piece three different ways
Nadia WhitakerHow we choose sustainable materials
Diego HughesThe small habits that make a big difference
Mia NovakHow to care for linen so it lasts for years
Arjun VargaHow to choose the right product
Tariq RossiOur favourite tips for busy weeks
Felix MensahWhat our shoppers asked us most
Amara HarlowFive pieces for a capsule wardrobe
Freya DelgadoWhat to pack for a rainy weekend outdoors

<div class="hp-pos">
  <div class="fixed-top text-bg-dark px-3 py-2 small fw-semibold">
    <i class="bi bi-inbox-fill" aria-hidden="true"></i> Inbox
  </div>
  <div class="fixed-bottom bg-body-tertiary border-top px-3 py-1 small text-body-secondary">
    Synced just now
  </div>
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="App shell demo">
    <ul class="list-group list-group-flush" style="padding-top:2.5rem;padding-bottom:2rem">
      <li class="list-group-item small"><strong class="d-block">Ella Patel</strong>Styling one piece three different ways</li>
      <li class="list-group-item small"><strong class="d-block">Nadia Whitaker</strong>How we choose sustainable materials</li>
      <li class="list-group-item small"><strong class="d-block">Diego Hughes</strong>The small habits that make a big difference</li>
      <li class="list-group-item small"><strong class="d-block">Mia Novak</strong>How to care for linen so it lasts for years</li>
      <li class="list-group-item small"><strong class="d-block">Arjun Varga</strong>How to choose the right product</li>
      <li class="list-group-item small"><strong class="d-block">Tariq Rossi</strong>Our favourite tips for busy weeks</li>
      <li class="list-group-item small"><strong class="d-block">Felix Mensah</strong>What our shoppers asked us most</li>
      <li class="list-group-item small"><strong class="d-block">Amara Harlow</strong>Five pieces for a capsule wardrobe</li>
      <li class="list-group-item small"><strong class="d-block">Freya Delgado</strong>What to pack for a rainy weekend outdoors</li>
    </ul>
  </div>
</div>

10Sticky chat composer

The message input uses sticky-bottom so it is always at hand below the conversation.

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

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

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.

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

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="Chat demo">
    <div class="p-3">
      <div class="d-flex  mb-2">
        <div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
          Members get early access to new drops and prices only they can see.
        </div>
      </div>
      <div class="d-flex justify-content-end mb-2">
        <div class="px-3 py-2 rounded-3 small text-bg-primary" style="max-width:75%">
          We keep things simple, so you can focus on what matters to you.
        </div>
      </div>
      <div class="d-flex  mb-2">
        <div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
          Not sure about the size? Our fit guide and live chat help you choose.
        </div>
      </div>
      <div class="d-flex justify-content-end mb-2">
        <div class="px-3 py-2 rounded-3 small text-bg-primary" style="max-width:75%">
          Every piece is made in small batches from materials we test ourselves.
        </div>
      </div>
      <div class="d-flex  mb-2">
        <div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
          New pieces arrive every month, and the best ones sell out fast.
        </div>
      </div>
      <div class="d-flex justify-content-end mb-2">
        <div class="px-3 py-2 rounded-3 small text-bg-primary" style="max-width:75%">
          Friendly people answer your questions quickly, by phone, chat or email.
        </div>
      </div>
    </div>
    <form class="sticky-bottom bg-body border-top p-2 d-flex gap-2">
      <label class="visually-hidden" for="hp-msg-1234">Message</label>
      <input class="form-control form-control-sm" id="hp-msg-1234" type="text" placeholder="Write a message">
      <button type="submit" class="btn btn-sm btn-primary" aria-label="Send"><i class="bi bi-send-fill" aria-hidden="true"></i></button>
    </form>
  </div>
</div>

11Sticky cart total

The order total sticks to the bottom of a long basket list.

Total $366.97

<div class="hp-pos">
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Basket">
    <ul class="list-group list-group-flush">
      <li class="list-group-item d-flex justify-content-between small"><span>Ceramic mug</span><span>$22.00</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Rain jacket</span><span>$128.99</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Hand cream</span><span>$17.00</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Desk lamp</span><span>$85.99</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Leather wallet</span><span>$56.99</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Face oil</span><span>$34.00</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Glass bottle</span><span>$22.00</span></li>
    </ul>
    <div class="sticky-bottom text-bg-light border-top d-flex justify-content-between align-items-center px-3 py-2">
      <strong>Total $366.97</strong>
      <button type="button" class="btn btn-sm btn-success">Checkout</button>
    </div>
  </div>
</div>

12Sticky filters on large screens

sticky-lg-top keeps the filter row in view on wide screens only.

Sort by