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.

Joining online: how the virtual pass works

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

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

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

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.

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

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

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="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> Joining online: how the virtual pass works
    </header>
    <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">Sponsors meet decision-makers in a relaxed, friendly setting.</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">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">The venue is a short walk from the station and fully accessible.</p>
      <p class="small mb-3">Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
      <p class="small mb-3">We listen first, then build a plan around what you actually need.</p>
    </div>
  </div>
</div>

2Sticky save bar

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

Group tickets include a private meeting room for your team.

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

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

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.

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

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

<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">Group tickets include a private meeting room for your team.</p>
      <p class="small mb-3">The networking app helps you meet the right people before you arrive.</p>
      <p class="small mb-3">Our evening party is the best place to turn talks into friendships.</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">Every session is recorded, so you can catch up on anything you missed.</p>
      <p class="small mb-3">We measure success by how many attendees come back and tell their friends.</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
Jonah Brennan	Project Manager	Dublin
Finn Lindqvist	Backend Engineer	Singapore
Arjun Ortega	Sales Executive	Toronto
Lucas Tanaka	Project Manager	Montreal
Zoe Patel	Frontend Engineer	Singapore
Felix Ashford	Project Manager	Cape Town
Maya Duarte	Art Director	Denver
Ethan Kowalski	Support Specialist	Kyoto
Jonah Alvarez	HR Partner	Montreal
Ruby Moreau	Operations Manager	Auckland
Liam Whitaker	Product Designer	Valencia
Leo Novak	Product Designer	Copenhagen

<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>Jonah Brennan</td>
          <td>Project Manager</td>
          <td>Dublin</td>
        </tr>
        <tr>
          <td>Finn Lindqvist</td>
          <td>Backend Engineer</td>
          <td>Singapore</td>
        </tr>
        <tr>
          <td>Arjun Ortega</td>
          <td>Sales Executive</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Lucas Tanaka</td>
          <td>Project Manager</td>
          <td>Montreal</td>
        </tr>
        <tr>
          <td>Zoe Patel</td>
          <td>Frontend Engineer</td>
          <td>Singapore</td>
        </tr>
        <tr>
          <td>Felix Ashford</td>
          <td>Project Manager</td>
          <td>Cape Town</td>
        </tr>
        <tr>
          <td>Maya Duarte</td>
          <td>Art Director</td>
          <td>Denver</td>
        </tr>
        <tr>
          <td>Ethan Kowalski</td>
          <td>Support Specialist</td>
          <td>Kyoto</td>
        </tr>
        <tr>
          <td>Jonah Alvarez</td>
          <td>HR Partner</td>
          <td>Montreal</td>
        </tr>
        <tr>
          <td>Ruby Moreau</td>
          <td>Operations Manager</td>
          <td>Auckland</td>
        </tr>
        <tr>
          <td>Liam Whitaker</td>
          <td>Product Designer</td>
          <td>Valencia</td>
        </tr>
        <tr>
          <td>Leo Novak</td>
          <td>Product Designer</td>
          <td>Copenhagen</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.

B

Brennan, Lea

C

Carter, Nadia

D

Delgado, Kai

F

Fischer, Lucas

H

Haddad, Ravi
Hughes, Sofia
Hughes, Theo

L

Larsen, Ava
Larsen, Tariq

M

Mensah, Aria
Mensah, Elena
Morgan, Ella

N

Nguyen, Kenji
Nguyen, Owen
Novak, Luna

O

Okafor, Noah
Okafor, Priya
Ortega, Omar

P

Patel, Hana

Q

Quinn, Mia

R

Rossi, Nora

S

Sato, Diego
Silva, Mason

V

Varga, Arjun

<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">B</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Brennan, Lea</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, Nadia</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, Kai</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, Lucas</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, Ravi</li>
        <li class="py-1">Hughes, Sofia</li>
        <li class="py-1">Hughes, Theo</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">Larsen, Tariq</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, Aria</li>
        <li class="py-1">Mensah, Elena</li>
        <li class="py-1">Morgan, Ella</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, Kenji</li>
        <li class="py-1">Nguyen, Owen</li>
        <li class="py-1">Novak, Luna</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, Noah</li>
        <li class="py-1">Okafor, Priya</li>
        <li class="py-1">Ortega, Omar</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, Hana</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, Nora</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, Diego</li>
        <li class="py-1">Silva, Mason</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, Arjun</li>
      </ul>
    </section>
  </div>
</div>

5Sticky sidebar

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

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

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

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

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

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

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

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

Clear prices, honest advice and no surprises along the 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="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">Virtual passes let you join the main stage live from anywhere.</p>
        <p class="small mb-3">The networking app helps you meet the right people before you arrive.</p>
        <p class="small mb-3">More than eighty speakers share what they have learned the hard 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 session is recorded, so you can catch up on anything you missed.</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 team has done this many times, so you never have to guess.</p>
        <p class="small mb-3">Clear prices, honest advice and no surprises along the way.</p>
        <p class="small mb-3">We listen first, then build a plan around what you actually need.</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.

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

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

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.

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

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.

<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">Virtual passes let you join the main stage live from anywhere.</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">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">Start in minutes and get help from a real person whenever you need it.</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>
    </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.

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

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

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

Group tickets include a private meeting room for your team.

Every attendee receives a certificate of participation.

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

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

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

<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> Sageis Flow</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">Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
      <p class="small mb-3">Sponsors meet decision-makers in a relaxed, friendly setting.</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">Group tickets include a private meeting room for your team.</p>
      <p class="small mb-3">Every attendee receives a certificate of participation.</p>
      <p class="small mb-3">Sponsors meet decision-makers in a relaxed, friendly setting.</p>
      <p class="small mb-3">Virtual passes let you join the main stage live from anywhere.</p>
      <p class="small mb-3">Workshops are limited to thirty seats, so everyone gets hands-on time.</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.