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 beginner's guide to getting started

Plan projects, track progress and share updates without another status meeting.

Onboarding guides and live chat help new colleagues get going on day one.

Teams report saving around five hours a week after the first month.

Every update lands in one place, so nothing gets lost in email threads.

Clear reports turn weekly numbers into decisions in minutes, not days.

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

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

Your data is encrypted, backed up daily and hosted in the region you choose.

<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 beginner&#39;s guide to getting started
    </header>
    <div class="p-3">
      <p class="small mb-3">Plan projects, track progress and share updates without another status meeting.</p>
      <p class="small mb-3">Onboarding guides and live chat help new colleagues get going on day one.</p>
      <p class="small mb-3">Teams report saving around five hours a week after the first month.</p>
      <p class="small mb-3">Every update lands in one place, so nothing gets lost in email threads.</p>
      <p class="small mb-3">Clear reports turn weekly numbers into decisions in minutes, not 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 measure success by how many customers come back and tell their friends.</p>
      <p class="small mb-3">Your data is encrypted, backed up daily and hosted in the region you choose.</p>
    </div>
  </div>
</div>

2Sticky save bar

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

Granular roles keep sensitive work private while everyone else stays informed.

Real-time dashboards show what is on track and what needs attention.

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

Our open API and ready-made integrations fit into the stack you already have.

Start free, upgrade when you grow and cancel any time with one click.

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

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

<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">Granular roles keep sensitive work private while everyone else stays informed.</p>
      <p class="small mb-3">Real-time dashboards show what is on track and what needs attention.</p>
      <p class="small mb-3">Clear prices, honest advice and no surprises along the way.</p>
      <p class="small mb-3">Our open API and ready-made integrations fit into the stack you already have.</p>
      <p class="small mb-3">Start free, upgrade when you grow and cancel any time with one click.</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">Every detail is handled by people who care about getting it right.</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
Nadia Duarte	Marketing Lead	Austin
Samir Patel	HR Partner	Copenhagen
Felix Moreau	Content Writer	Auckland
Nora Kowalski	Frontend Engineer	Montreal
Mason Lindqvist	Marketing Lead	Toronto
Lucas Fischer	Content Writer	Toronto
Jonah Ibrahim	Support Specialist	Valencia
Luna Nguyen	QA Engineer	Melbourne
Maya Novak	HR Partner	Porto
Sofia Ortega	Operations Manager	Copenhagen
Theo Ashford	Project Manager	Auckland
Omar Morgan	Content Writer	Kyoto

<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>Nadia Duarte</td>
          <td>Marketing Lead</td>
          <td>Austin</td>
        </tr>
        <tr>
          <td>Samir Patel</td>
          <td>HR Partner</td>
          <td>Copenhagen</td>
        </tr>
        <tr>
          <td>Felix Moreau</td>
          <td>Content Writer</td>
          <td>Auckland</td>
        </tr>
        <tr>
          <td>Nora Kowalski</td>
          <td>Frontend Engineer</td>
          <td>Montreal</td>
        </tr>
        <tr>
          <td>Mason Lindqvist</td>
          <td>Marketing Lead</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Lucas Fischer</td>
          <td>Content Writer</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Jonah Ibrahim</td>
          <td>Support Specialist</td>
          <td>Valencia</td>
        </tr>
        <tr>
          <td>Luna Nguyen</td>
          <td>QA Engineer</td>
          <td>Melbourne</td>
        </tr>
        <tr>
          <td>Maya Novak</td>
          <td>HR Partner</td>
          <td>Porto</td>
        </tr>
        <tr>
          <td>Sofia Ortega</td>
          <td>Operations Manager</td>
          <td>Copenhagen</td>
        </tr>
        <tr>
          <td>Theo Ashford</td>
          <td>Project Manager</td>
          <td>Auckland</td>
        </tr>
        <tr>
          <td>Omar Morgan</td>
          <td>Content Writer</td>
          <td>Kyoto</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, Kai
Ashford, Ella

B

Brennan, Nadia

F

Fischer, Mateo

H

Haddad, Owen
Haddad, Ravi
Harlow, Ava

I

Ibrahim, Ethan

K

Kim, Zoe
Kowalski, Lea

L

Larsen, Aria
Larsen, Hana

M

Mensah, Amara
Morgan, Chloe

N

Nguyen, Finn
Novak, Mason

O

Okafor, Mia

R

Rossi, Freya

S

Sato, Leo
Silva, Isla
Silva, Nora

T

Tanaka, Tariq

V

Varga, Liam
Varga, 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, Kai</li>
        <li class="py-1">Ashford, Ella</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">F</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Fischer, Mateo</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, Owen</li>
        <li class="py-1">Haddad, Ravi</li>
        <li class="py-1">Harlow, Ava</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, Ethan</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, Zoe</li>
        <li class="py-1">Kowalski, Lea</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, Aria</li>
        <li class="py-1">Larsen, Hana</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, Amara</li>
        <li class="py-1">Morgan, Chloe</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, Finn</li>
        <li class="py-1">Novak, Mason</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, Mia</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, Freya</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, Leo</li>
        <li class="py-1">Silva, Isla</li>
        <li class="py-1">Silva, Nora</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, Tariq</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>
        <li class="py-1">Varga, Noah</li>
      </ul>
    </section>
  </div>
</div>

5Sticky sidebar

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

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

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

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

Teams report saving around five hours a week after the first month.

Real-time dashboards show what is on track and what needs attention.

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

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

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.

<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">Thousands of customers already trust us, and we work hard to keep it that way.</p>
        <p class="small mb-3">We listen first, then build a plan around what you actually need.</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">Teams report saving around five hours a week after the first month.</p>
        <p class="small mb-3">Real-time dashboards show what is on track and what needs attention.</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>
        <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>
      </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

Automations take care of the repetitive steps, so people can focus on real work.

Plan projects, track progress and share updates without another status meeting.

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

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

Clear reports turn weekly numbers into decisions in minutes, not days.

Granular roles keep sensitive work private while everyone else stays informed.

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

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" aria-hidden="true"></i> Sticky from md, normal flow on small screens
    </div>
    <div class="p-3">
      <p class="small mb-3">Automations take care of the repetitive steps, so people can focus on real work.</p>
      <p class="small mb-3">Plan projects, track progress and share updates without another status meeting.</p>
      <p class="small mb-3">We measure success by how many customers come back and tell their friends.</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">Clear reports turn weekly numbers into decisions in minutes, not days.</p>
      <p class="small mb-3">Granular roles keep sensitive work private while everyone else stays informed.</p>
      <p class="small mb-3">Thousands of customers already trust us, and we work hard to keep it that way.</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.

Your data is encrypted, backed up daily and hosted in the region you choose.

Onboarding guides and live chat help new colleagues get going on day one.

Our open API and ready-made integrations fit into the stack you already have.

Start free, upgrade when you grow and cancel any time with one click.

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

Every update lands in one place, so nothing gets lost in email threads.

Set up in an afternoon, connect the tools you use and invite your team.

Thousands of customers 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" aria-hidden="true"></i> Brio</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">Your data is encrypted, backed up daily and hosted in the region you choose.</p>
      <p class="small mb-3">Onboarding guides and live chat help new colleagues get going on day one.</p>
      <p class="small mb-3">Our open API and ready-made integrations fit into the stack you already have.</p>
      <p class="small mb-3">Start free, upgrade when you grow and cancel any time with 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 update lands in one place, so nothing gets lost in email threads.</p>
      <p class="small mb-3">Set up in an afternoon, connect the tools you use and invite your team.</p>
      <p class="small mb-3">Thousands of customers 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.

Granular roles keep sensitive work private while everyone else stays informed.

Start free, upgrade when you grow and cancel any time with one click.

Your data is encrypted, backed up daily and hosted in the region you choose.

Automations take care of the repetitive steps, so people can focus on real work.

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

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

Clear reports turn weekly numbers into decisions in minutes, not days.

Set up in an afternoon, connect the tools you use and invite your team.

<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" 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" 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" 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">Granular roles keep sensitive work private while everyone else stays informed.</p>
      <p class="small mb-3">Start free, upgrade when you grow and cancel any time with one click.</p>
      <p class="small mb-3">Your data is encrypted, backed up daily and hosted in the region you choose.</p>
      <p class="small mb-3">Automations take care of the repetitive steps, so people can focus on real work.</p>
      <p class="small mb-3">We listen first, then build a plan around what you actually need.</p>
      <p class="small mb-3">Clear prices, honest advice and no surprises along the way.</p>
      <p class="small mb-3">Clear reports turn weekly numbers into decisions in minutes, not days.</p>
      <p class="small mb-3">Set up in an afternoon, connect the tools you use and invite your team.</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 5 hours ago

Kenji SatoLooking back at a busy season
Diego KimHow we cut our release cycle in half
Ruby QuinnSeven automations every team should set up
Arjun WhitakerHow to choose the right plan
Ivy BrennanThe real cost of switching between tools
Elena HughesFive things we learned this year
Samir CarterWhat our customers asked us most
Felix DuarteWhat we learned shipping 200 releases
Priya MoreauWriting status updates people actually read

<div class="hp-pos">
  <div class="fixed-top text-bg-dark px-3 py-2 small fw-semibold">
    <i class="bi bi-inbox" aria-hidden="true"></i> Inbox
  </div>
  <div class="fixed-bottom bg-body-tertiary border-top px-3 py-1 small text-body-secondary">
    Synced 5 hours 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">Kenji Sato</strong>Looking back at a busy season</li>
      <li class="list-group-item small"><strong class="d-block">Diego Kim</strong>How we cut our release cycle in half</li>
      <li class="list-group-item small"><strong class="d-block">Ruby Quinn</strong>Seven automations every team should set up</li>
      <li class="list-group-item small"><strong class="d-block">Arjun Whitaker</strong>How to choose the right plan</li>
      <li class="list-group-item small"><strong class="d-block">Ivy Brennan</strong>The real cost of switching between tools</li>
      <li class="list-group-item small"><strong class="d-block">Elena Hughes</strong>Five things we learned this year</li>
      <li class="list-group-item small"><strong class="d-block">Samir Carter</strong>What our customers asked us most</li>
      <li class="list-group-item small"><strong class="d-block">Felix Duarte</strong>What we learned shipping 200 releases</li>
      <li class="list-group-item small"><strong class="d-block">Priya Moreau</strong>Writing status updates people actually read</li>
    </ul>
  </div>
</div>

10Sticky chat composer

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

Teams report saving around five hours a week after the first month.

Every update lands in one place, so nothing gets lost in email threads.

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

Real-time dashboards show what is on track and what needs attention.

Plan projects, track progress and share updates without another status meeting.

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="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%">
          Teams report saving around five hours a week after the first month.
        </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 update lands in one place, so nothing gets lost in email threads.
        </div>
      </div>
      <div class="d-flex  mb-2">
        <div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
          We keep things simple, so you can focus on what matters to you.
        </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%">
          Real-time dashboards show what is on track and what needs attention.
        </div>
      </div>
      <div class="d-flex  mb-2">
        <div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
          Plan projects, track progress and share updates without another status meeting.
        </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%">
          Our team has done this many times, so you never have to guess.
        </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" aria-hidden="true"></i></button>
    </form>
  </div>
</div>

11Sticky cart total

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

Total $138.99

<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>Analytics add-on</span><span>$12.00</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Storage pack</span><span>$9.00</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>API boost</span><span>$38.00</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Team plan</span><span>$21.00</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Sales pipeline add-on</span><span>$18.00</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Priority support</span><span>$25.99</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Automation pack</span><span>$15.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 $138.99</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