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

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

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

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

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

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

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

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.

<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">Not sure about the size? Our fit guide and live chat help you choose.</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>
      <p class="small mb-3">Pay securely with card, wallet or in three interest-free instalments.</p>
      <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">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>
    </div>
  </div>
</div>

2Sticky save bar

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

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 work directly with makers, so prices stay fair for everyone.

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

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

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

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">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 work directly with makers, so prices stay fair for everyone.</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">New pieces arrive every month, and the best ones sell out fast.</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
Nora Ibrahim	Art Director	Copenhagen
Arjun Haddad	Sales Executive	Toronto
Elena Duarte	Backend Engineer	Prague
Jonah Sato	Operations Manager	Edinburgh
Ava Rossi	Product Designer	Singapore
Hana Lindqvist	Customer Success	Prague
Ruby Varga	Customer Success	Montreal
Ivy Tanaka	Data Analyst	Dublin
Omar Quinn	Marketing Lead	Lisbon
Ethan Carter	Operations Manager	Porto
Maya Larsen	QA Engineer	Copenhagen
Mia Moreau	QA Engineer	Seoul

<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>Nora Ibrahim</td>
          <td>Art Director</td>
          <td>Copenhagen</td>
        </tr>
        <tr>
          <td>Arjun Haddad</td>
          <td>Sales Executive</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Elena Duarte</td>
          <td>Backend Engineer</td>
          <td>Prague</td>
        </tr>
        <tr>
          <td>Jonah Sato</td>
          <td>Operations Manager</td>
          <td>Edinburgh</td>
        </tr>
        <tr>
          <td>Ava Rossi</td>
          <td>Product Designer</td>
          <td>Singapore</td>
        </tr>
        <tr>
          <td>Hana Lindqvist</td>
          <td>Customer Success</td>
          <td>Prague</td>
        </tr>
        <tr>
          <td>Ruby Varga</td>
          <td>Customer Success</td>
          <td>Montreal</td>
        </tr>
        <tr>
          <td>Ivy Tanaka</td>
          <td>Data Analyst</td>
          <td>Dublin</td>
        </tr>
        <tr>
          <td>Omar Quinn</td>
          <td>Marketing Lead</td>
          <td>Lisbon</td>
        </tr>
        <tr>
          <td>Ethan Carter</td>
          <td>Operations Manager</td>
          <td>Porto</td>
        </tr>
        <tr>
          <td>Maya Larsen</td>
          <td>QA Engineer</td>
          <td>Copenhagen</td>
        </tr>
        <tr>
          <td>Mia Moreau</td>
          <td>QA Engineer</td>
          <td>Seoul</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, Ava
Alvarez, Chloe

B

Brennan, Nadia

C

Carter, Amara

D

Delgado, Priya
Duarte, Freya

F

Fischer, Theo

H

Harlow, Aria
Harlow, Mason
Hughes, Owen

K

Kim, Ella
Kim, Kai
Kowalski, Finn

L

Larsen, Zoe

M

Morgan, Felix

N

Nguyen, Tariq
Novak, Lucas

O

Okafor, Jonah
Okafor, Ravi
Ortega, Elena

P

Patel, Isla

Q

Quinn, Leo

S

Silva, Kenji

V

Varga, Liam

<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, Ava</li>
        <li class="py-1">Alvarez, Chloe</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, Nadia</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, Amara</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">Delgado, Priya</li>
        <li class="py-1">Duarte, Freya</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, 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, Aria</li>
        <li class="py-1">Harlow, Mason</li>
        <li class="py-1">Hughes, Owen</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, Ella</li>
        <li class="py-1">Kim, Kai</li>
        <li class="py-1">Kowalski, Finn</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, Zoe</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">Morgan, Felix</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, Tariq</li>
        <li class="py-1">Novak, Lucas</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, Jonah</li>
        <li class="py-1">Okafor, Ravi</li>
        <li class="py-1">Ortega, Elena</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, Isla</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, Leo</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, Kenji</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, Liam</li>
      </ul>
    </section>
  </div>
</div>

5Sticky sidebar

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

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.

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

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

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

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

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

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

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="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">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">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">Clear prices, honest advice and no surprises along the way.</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">Order before 2 pm and most items leave our warehouse the same day.</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">Thousands of five-star reviews from customers who came back for more.</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

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

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

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

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

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

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

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

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="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">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">Our packaging is plastic-free and every delivery is carbon-neutral.</p>
      <p class="small mb-3">Every piece is made in small batches from materials we test ourselves.</p>
      <p class="small mb-3">Gift wrapping and a handwritten note are free on every order.</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 work directly with makers, so prices stay fair for everyone.</p>
      <p class="small mb-3">We listen first, then build a plan around what you actually need.</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.

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

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

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

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

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

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.

<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> Novao Hub</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">Each product is checked by hand before it goes into the box.</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">We work directly with makers, so prices stay fair for everyone.</p>
      <p class="small mb-3">Gift wrapping and a handwritten note are free on every order.</p>
      <p class="small mb-3">Every detail is handled by people who care about getting it right.</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>
    </div>
  </div>
</div>

8Fixed-bottom tab bar

A mobile style tab bar with fixed-bottom; content gets bottom padding so nothing hides behind it.

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.

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

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

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

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.

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

<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">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">Order before 2 pm and most items leave our warehouse the same day.</p>
      <p class="small mb-3">Clear prices, honest advice and no surprises along the way.</p>
      <p class="small mb-3">Thousands of five-star reviews from customers who came back for more.</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">Friendly people answer your questions quickly, by phone, chat or email.</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 4 days ago

Nora FischerInside our new autumn collection
Noah RossiThe small habits that make a big difference
Luna SatoOur guide to gifts under $50
Samir WhitakerOur favourite tips for busy weeks
Arjun PatelHow to choose the right product
Lea TanakaHow we choose sustainable materials
Mateo IbrahimWhat to pack for a rainy weekend outdoors
Diego MorganMeet the makers behind our ceramics
Sofia MensahStyling one piece three different ways

<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 4 days ago
  </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">Nora Fischer</strong>Inside our new autumn collection</li>
      <li class="list-group-item small"><strong class="d-block">Noah Rossi</strong>The small habits that make a big difference</li>
      <li class="list-group-item small"><strong class="d-block">Luna Sato</strong>Our guide to gifts under $50</li>
      <li class="list-group-item small"><strong class="d-block">Samir Whitaker</strong>Our favourite tips for busy weeks</li>
      <li class="list-group-item small"><strong class="d-block">Arjun Patel</strong>How to choose the right product</li>
      <li class="list-group-item small"><strong class="d-block">Lea Tanaka</strong>How we choose sustainable materials</li>
      <li class="list-group-item small"><strong class="d-block">Mateo Ibrahim</strong>What to pack for a rainy weekend outdoors</li>
      <li class="list-group-item small"><strong class="d-block">Diego Morgan</strong>Meet the makers behind our ceramics</li>
      <li class="list-group-item small"><strong class="d-block">Sofia Mensah</strong>Styling one piece three different ways</li>
    </ul>
  </div>
</div>

10Sticky chat composer

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

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

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

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

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

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

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="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%">
          Our team has done this many times, so you never have to guess.
        </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 listen first, then build a plan around what you actually need.
        </div>
      </div>
      <div class="d-flex  mb-2">
        <div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
          Each product is checked by hand before it goes into the box.
        </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 measure success by how many shoppers come back and tell their friends.
        </div>
      </div>
      <div class="d-flex  mb-2">
        <div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
          Our packaging is plastic-free and every delivery is carbon-neutral.
        </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%">
          New pieces arrive every month, and the best ones sell out fast.
        </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 $392.98

<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>Leather wallet</span><span>$54.00</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Wool scarf</span><span>$47.99</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Running cap</span><span>$28.00</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Canvas tote</span><span>$37.00</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Ceramic mug</span><span>$19.99</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Rain jacket</span><span>$119.00</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Cotton throw</span><span>$87.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 $392.98</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