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 things we learned this year

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

More than eighty speakers share what they have learned the hard way.

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

Three days of keynotes, hands-on workshops and evening meetups.

Virtual passes let you join the main stage live from anywhere.

Group tickets include a private meeting room for your team.

Sponsors meet decision-makers in a relaxed, friendly setting.

The venue is a short walk from the station and fully accessible.

<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 things we learned this year
    </header>
    <div class="p-3">
      <p class="small mb-3">Clear prices, honest advice and no surprises along the way.</p>
      <p class="small mb-3">More than eighty speakers share what they have learned the hard 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">Three days of keynotes, hands-on workshops and evening meetups.</p>
      <p class="small mb-3">Virtual passes let you join the main stage live from anywhere.</p>
      <p class="small mb-3">Group tickets include a private meeting room for your team.</p>
      <p class="small mb-3">Sponsors meet decision-makers in a relaxed, friendly setting.</p>
      <p class="small mb-3">The venue is a short walk from the station and fully accessible.</p>
    </div>
  </div>
</div>

2Sticky save bar

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

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

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

Our evening party is the best place to turn talks into friendships.

Every attendee receives a certificate of participation.

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

The networking app helps you meet the right people before you arrive.

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 save bar demo">
    <div class="p-3">
      <p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</p>
      <p class="small mb-3">Thousands of attendees already trust us, and we work hard to keep it that way.</p>
      <p class="small mb-3">Our evening party is the best place to turn talks into friendships.</p>
      <p class="small mb-3">Every attendee receives a certificate of participation.</p>
      <p class="small mb-3">We measure success by how many attendees come back and tell their friends.</p>
      <p class="small mb-3">The networking app helps you meet the right people before you arrive.</p>
      <p class="small mb-3">We keep things simple, so you can focus on what matters to you.</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
Mia Tanaka	Marketing Lead	Valencia
Liam Carter	HR Partner	Toronto
Leo Mensah	QA Engineer	Dublin
Lucas Patel	Operations Manager	Lisbon
Sofia Whitaker	Finance Lead	Copenhagen
Luna Ashford	Support Specialist	Dublin
Chloe Harlow	Content Writer	Austin
Ivy Ibrahim	Customer Success	Cape Town
Felix Kowalski	Product Designer	Edinburgh
Freya Ortega	Data Analyst	Barcelona
Sofia Hughes	Backend Engineer	Porto
Zoe Nguyen	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>Mia Tanaka</td>
          <td>Marketing Lead</td>
          <td>Valencia</td>
        </tr>
        <tr>
          <td>Liam Carter</td>
          <td>HR Partner</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Leo Mensah</td>
          <td>QA Engineer</td>
          <td>Dublin</td>
        </tr>
        <tr>
          <td>Lucas Patel</td>
          <td>Operations Manager</td>
          <td>Lisbon</td>
        </tr>
        <tr>
          <td>Sofia Whitaker</td>
          <td>Finance Lead</td>
          <td>Copenhagen</td>
        </tr>
        <tr>
          <td>Luna Ashford</td>
          <td>Support Specialist</td>
          <td>Dublin</td>
        </tr>
        <tr>
          <td>Chloe Harlow</td>
          <td>Content Writer</td>
          <td>Austin</td>
        </tr>
        <tr>
          <td>Ivy Ibrahim</td>
          <td>Customer Success</td>
          <td>Cape Town</td>
        </tr>
        <tr>
          <td>Felix Kowalski</td>
          <td>Product Designer</td>
          <td>Edinburgh</td>
        </tr>
        <tr>
          <td>Freya Ortega</td>
          <td>Data Analyst</td>
          <td>Barcelona</td>
        </tr>
        <tr>
          <td>Sofia Hughes</td>
          <td>Backend Engineer</td>
          <td>Porto</td>
        </tr>
        <tr>
          <td>Zoe Nguyen</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, Kai

B

Brennan, Nora
Brennan, Samir

D

Duarte, Omar

F

Fischer, Theo

H

Haddad, Nadia

K

Kowalski, Diego

L

Larsen, Ava
Lindqvist, Jonah
Lindqvist, Priya

M

Mensah, Finn
Moreau, Hana
Morgan, Ethan

N

Novak, Mateo

O

Okafor, Elena
Okafor, Ravi

Q

Quinn, Mia

R

Rossi, Arjun
Rossi, Kenji

S

Sato, Ruby
Silva, Isla

T

Tanaka, Leo

V

Varga, Lea

W

Whitaker, 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, Kai</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, Nora</li>
        <li class="py-1">Brennan, Samir</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, Omar</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">Haddad, Nadia</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, Diego</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, Ava</li>
        <li class="py-1">Lindqvist, Jonah</li>
        <li class="py-1">Lindqvist, Priya</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, Finn</li>
        <li class="py-1">Moreau, Hana</li>
        <li class="py-1">Morgan, Ethan</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">Novak, Mateo</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, Elena</li>
        <li class="py-1">Okafor, Ravi</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, 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, Arjun</li>
        <li class="py-1">Rossi, Kenji</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, Ruby</li>
        <li class="py-1">Silva, Isla</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, Leo</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, Lea</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, Liam</li>
      </ul>
    </section>
  </div>
</div>

5Sticky sidebar

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

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.

Workshops are limited to thirty seats, so everyone gets hands-on time.

Early bird tickets save you up to forty percent until the end of the month.

Every session is recorded, so you can catch up on anything you missed.

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

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

Every session is recorded, so you can catch up on anything you missed.

Three days of keynotes, hands-on workshops and evening meetups.

<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">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">Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
        <p class="small mb-3">Early bird tickets save you up to forty percent until the end of the month.</p>
        <p class="small mb-3">Every session is recorded, so you can catch up on anything you missed.</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">Our team has done this many times, so you never have to guess.</p>
        <p class="small mb-3">Every session is recorded, so you can catch up on anything you missed.</p>
        <p class="small mb-3">Three days of keynotes, hands-on workshops and evening meetups.</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.

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

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

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

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

Every attendee receives a certificate of participation.

The venue is a short walk from the station and fully accessible.

Our evening party is the best place to turn talks into friendships.

<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">Friendly people answer your questions quickly, by phone, chat or email.</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 attendees 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">Every attendee receives a certificate of participation.</p>
      <p class="small mb-3">The venue is a short walk from the station and fully accessible.</p>
      <p class="small mb-3">Our evening party is the best place to turn talks into friendships.</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.

Sponsors meet decision-makers in a relaxed, friendly setting.

Group tickets include a private meeting room for your team.

Workshops are limited to thirty seats, so everyone gets hands-on time.

The networking app helps you meet the right people before you arrive.

Early bird tickets save you up to forty percent until the end of the month.

Virtual passes let you join the main stage live from anywhere.

More than eighty speakers share what they have learned the hard way.

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

<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> Solais Labs</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">Sponsors meet decision-makers in a relaxed, friendly setting.</p>
      <p class="small mb-3">Group tickets include a private meeting room for your team.</p>
      <p class="small mb-3">Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
      <p class="small mb-3">The networking app helps you meet the right people before you arrive.</p>
      <p class="small mb-3">Early bird tickets save you up to forty percent until the end of the month.</p>
      <p class="small mb-3">Virtual passes let you join the main stage live from anywhere.</p>
      <p class="small mb-3">More than eighty speakers share what they have learned the hard way.</p>
      <p class="small mb-3">Start in minutes and get help from a real person whenever you need it.</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 listen first, then build a plan around what you actually need.

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

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

Three days of keynotes, hands-on workshops and evening meetups.

Early bird tickets save you up to forty percent until the end of the month.

Virtual passes let you join the main stage live from anywhere.

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

The venue is a short walk from the station and fully accessible.

<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">We listen first, then build a plan around what you actually need.</p>
      <p class="small mb-3">Thousands of attendees already trust us, and we work hard to keep it that 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">Three days of keynotes, hands-on workshops and evening meetups.</p>
      <p class="small mb-3">Early bird tickets save you up to forty percent until the end of the month.</p>
      <p class="small mb-3">Virtual passes let you join the main stage live from anywhere.</p>
      <p class="small mb-3">Clear prices, honest advice and no surprises along the way.</p>
      <p class="small mb-3">The venue is a short walk from the station and fully accessible.</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

Lucas OrtegaOur favourite tips for busy weeks
Tariq CarterWhat we learned from last year's feedback
Maya SatoJoining online: how the virtual pass works
Ella HarlowWhat makes a panel worth watching
Amara KimAnnouncing our first keynote speakers
Owen DelgadoTen talks you should not miss this year
Mason HaddadHow to get the most out of a conference
Noah DuarteLooking back at a busy season
Aria AshfordHow to choose the right ticket

<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 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">Lucas Ortega</strong>Our favourite tips for busy weeks</li>
      <li class="list-group-item small"><strong class="d-block">Tariq Carter</strong>What we learned from last year&#39;s feedback</li>
      <li class="list-group-item small"><strong class="d-block">Maya Sato</strong>Joining online: how the virtual pass works</li>
      <li class="list-group-item small"><strong class="d-block">Ella Harlow</strong>What makes a panel worth watching</li>
      <li class="list-group-item small"><strong class="d-block">Amara Kim</strong>Announcing our first keynote speakers</li>
      <li class="list-group-item small"><strong class="d-block">Owen Delgado</strong>Ten talks you should not miss this year</li>
      <li class="list-group-item small"><strong class="d-block">Mason Haddad</strong>How to get the most out of a conference</li>
      <li class="list-group-item small"><strong class="d-block">Noah Duarte</strong>Looking back at a busy season</li>
      <li class="list-group-item small"><strong class="d-block">Aria Ashford</strong>How to choose the right ticket</li>
    </ul>
  </div>
</div>

10Sticky chat composer

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

Group tickets include a private meeting room for your team.

More than eighty speakers share what they have learned the hard way.

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

Every attendee receives a certificate of participation.

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

The networking app helps you meet the right people before you arrive.

<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%">
          Group tickets include a private meeting room for your team.
        </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%">
          More than eighty speakers share what they have learned the hard way.
        </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 listen first, then build a plan around what you actually need.
        </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 attendee receives a certificate of participation.
        </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 measure success by how many attendees come back and tell their friends.
        </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%">
          The networking app helps you meet the right people before you arrive.
        </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 $3,502.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>Student pass</span><span>$137.00</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Speaker dinner</span><span>$115.00</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Masterclass</span><span>$247.00</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Full access pass</span><span>$538.99</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Early bird pass</span><span>$308.00</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Group bundle</span><span>$2,100</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Recording pass</span><span>$56.99</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 $3,502.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