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 a coffee roaster cut card fees by a third

Send and receive money in more than 30 currencies at fair exchange rates.

Real people answer your questions around the clock, every day of the year.

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

Invoices go out with a payment link, so customers can pay you in one click.

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

Every payment appears instantly, with receipts matched automatically.

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.

<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 a coffee roaster cut card fees by a third
    </header>
    <div class="p-3">
      <p class="small mb-3">Send and receive money in more than 30 currencies at fair exchange rates.</p>
      <p class="small mb-3">Real people answer your questions around the clock, every day of the year.</p>
      <p class="small mb-3">Every detail is handled by people who care about getting it right.</p>
      <p class="small mb-3">Invoices go out with a payment link, so customers can pay you in one click.</p>
      <p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</p>
      <p class="small mb-3">Every payment appears instantly, with receipts matched automatically.</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>
    </div>
  </div>
</div>

2Sticky save bar

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

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

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

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

Issue virtual and physical cards to your team with limits you control.

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

Send and receive money in more than 30 currencies at fair exchange rates.

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

<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">Our team has done this many times, so you never have to guess.</p>
      <p class="small mb-3">Thousands of members already trust us, and we work hard to keep it that way.</p>
      <p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</p>
      <p class="small mb-3">Issue virtual and physical cards to your team with limits you control.</p>
      <p class="small mb-3">We measure success by how many members come back and tell their friends.</p>
      <p class="small mb-3">Send and receive money in more than 30 currencies at fair exchange rates.</p>
      <p class="small mb-3">Clear prices, honest advice and no surprises along the way.</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
Lea Alvarez	Backend Engineer	Cape Town
Ravi Patel	Product Designer	Edinburgh
Leo Sato	Finance Lead	Lisbon
Hana Larsen	Support Specialist	Valencia
Owen Tanaka	QA Engineer	Valencia
Lucas Rossi	Customer Success	Denver
Priya Morgan	Content Writer	Toronto
Hana Ortega	Project Manager	Copenhagen
Amara Moreau	Support Specialist	Austin
Jonah Varga	Content Writer	Porto
Lea Mensah	QA Engineer	Denver
Kenji Novak	Finance Lead	Porto

<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>Lea Alvarez</td>
          <td>Backend Engineer</td>
          <td>Cape Town</td>
        </tr>
        <tr>
          <td>Ravi Patel</td>
          <td>Product Designer</td>
          <td>Edinburgh</td>
        </tr>
        <tr>
          <td>Leo Sato</td>
          <td>Finance Lead</td>
          <td>Lisbon</td>
        </tr>
        <tr>
          <td>Hana Larsen</td>
          <td>Support Specialist</td>
          <td>Valencia</td>
        </tr>
        <tr>
          <td>Owen Tanaka</td>
          <td>QA Engineer</td>
          <td>Valencia</td>
        </tr>
        <tr>
          <td>Lucas Rossi</td>
          <td>Customer Success</td>
          <td>Denver</td>
        </tr>
        <tr>
          <td>Priya Morgan</td>
          <td>Content Writer</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Hana Ortega</td>
          <td>Project Manager</td>
          <td>Copenhagen</td>
        </tr>
        <tr>
          <td>Amara Moreau</td>
          <td>Support Specialist</td>
          <td>Austin</td>
        </tr>
        <tr>
          <td>Jonah Varga</td>
          <td>Content Writer</td>
          <td>Porto</td>
        </tr>
        <tr>
          <td>Lea Mensah</td>
          <td>QA Engineer</td>
          <td>Denver</td>
        </tr>
        <tr>
          <td>Kenji Novak</td>
          <td>Finance Lead</td>
          <td>Porto</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, Ethan
Ashford, Ivy

C

Carter, Leo

D

Delgado, Ava
Delgado, Felix
Duarte, Chloe

F

Fischer, Ruby

H

Haddad, Finn
Haddad, Luna
Harlow, Mateo
Hughes, Mia

I

Ibrahim, Mason

K

Kim, Maya
Kim, Sofia

L

Larsen, Arjun
Lindqvist, Nora
Lindqvist, Omar

M

Mensah, Samir
Moreau, Liam
Morgan, Elena

O

Okafor, Freya

Q

Quinn, Theo

T

Tanaka, Aria

W

Whitaker, Noah

<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, Ethan</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, 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">Delgado, Ava</li>
        <li class="py-1">Delgado, Felix</li>
        <li class="py-1">Duarte, Chloe</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, Ruby</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, Finn</li>
        <li class="py-1">Haddad, Luna</li>
        <li class="py-1">Harlow, Mateo</li>
        <li class="py-1">Hughes, Mia</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, Mason</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">Kim, 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, Arjun</li>
        <li class="py-1">Lindqvist, Nora</li>
        <li class="py-1">Lindqvist, Omar</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, Samir</li>
        <li class="py-1">Moreau, Liam</li>
        <li class="py-1">Morgan, Elena</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, Freya</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, Theo</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, Aria</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, Noah</li>
      </ul>
    </section>
  </div>
</div>

5Sticky sidebar

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

Accounting sync keeps your books up to date without manual exports.

Cash flow forecasts show where you will be next month, not just today.

Your money is protected by bank-grade security and regulated partners.

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

Open a business account online in about ten minutes, with no branch visit.

No monthly fees on the basic plan and no hidden charges on transfers.

Real people answer your questions around the clock, every day of the year.

Set approval rules for large payments and see who spent what, and why.

Payroll runs on time, with tax and pension payments handled for you.

<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">Accounting sync keeps your books up to date without manual exports.</p>
        <p class="small mb-3">Cash flow forecasts show where you will be next month, not just today.</p>
        <p class="small mb-3">Your money is protected by bank-grade security and regulated partners.</p>
        <p class="small mb-3">We listen first, then build a plan around what you actually need.</p>
        <p class="small mb-3">Open a business account online in about ten minutes, with no branch visit.</p>
        <p class="small mb-3">No monthly fees on the basic plan and no hidden charges on transfers.</p>
        <p class="small mb-3">Real people answer your questions around the clock, every day of the year.</p>
        <p class="small mb-3">Set approval rules for large payments and see who spent what, and why.</p>
        <p class="small mb-3">Payroll runs on time, with tax and pension payments handled for you.</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