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

Group tickets include a private meeting room for your team.

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

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

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

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

Every attendee receives a certificate of participation.

Group tickets include a private meeting room for your team.

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="Sticky header demo">
    <header class="sticky-top bg-page border-b px-4 py-2 font-semibold">
      <i class="bi bi-journal-text" aria-hidden="true"></i> A beginner&#39;s guide to getting started
    </header>
    <div class="p-4">
      <p class="small mb-4">Group tickets include a private meeting room for your team.</p>
      <p class="small mb-4">We keep things simple, so you can focus on what matters to you.</p>
      <p class="small mb-4">Thousands of attendees already trust us, and we work hard to keep it that way.</p>
      <p class="small mb-4">Friendly people answer your questions quickly, by phone, chat or email.</p>
      <p class="small mb-4">Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
      <p class="small mb-4">Every attendee receives a certificate of participation.</p>
      <p class="small mb-4">Group tickets include a private meeting room for your team.</p>
      <p class="small mb-4">Early bird tickets save you up to forty percent until the end of the month.</p>
    </div>
  </div>
</div>

2Sticky save bar

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

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

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

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

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

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

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

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="Sticky save bar demo">
    <div class="p-4">
      <p class="small mb-4">Start in minutes and get help from a real person whenever you need it.</p>
      <p class="small mb-4">Virtual passes let you join the main stage live from anywhere.</p>
      <p class="small mb-4">We listen first, then build a plan around what you actually need.</p>
      <p class="small mb-4">The networking app helps you meet the right people before you arrive.</p>
      <p class="small mb-4">More than eighty speakers share what they have learned the hard way.</p>
      <p class="small mb-4">We keep things simple, so you can focus on what matters to you.</p>
      <p class="small mb-4">Three days of keynotes, hands-on workshops and evening meetups.</p>
    </div>
    <div class="sticky-bottom bg-surface-3 border-t p-2 flex justify-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
Felix Mensah	QA Engineer	Kyoto
Aria Nguyen	Operations Manager	Porto
Samir Harlow	Sales Executive	Oslo
Ella Haddad	Support Specialist	Kyoto
Amara Ibrahim	QA Engineer	Melbourne
Theo Fischer	Backend Engineer	Austin
Finn Ashford	Operations Manager	Toronto
Tariq Duarte	Backend Engineer	Barcelona
Nadia Rossi	HR Partner	Montreal
Isla Okafor	Project Manager	Prague
Elena Alvarez	Data Analyst	Dublin
Amara Quinn	Content Writer	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>Felix Mensah</td>
          <td>QA Engineer</td>
          <td>Kyoto</td>
        </tr>
        <tr>
          <td>Aria Nguyen</td>
          <td>Operations Manager</td>
          <td>Porto</td>
        </tr>
        <tr>
          <td>Samir Harlow</td>
          <td>Sales Executive</td>
          <td>Oslo</td>
        </tr>
        <tr>
          <td>Ella Haddad</td>
          <td>Support Specialist</td>
          <td>Kyoto</td>
        </tr>
        <tr>
          <td>Amara Ibrahim</td>
          <td>QA Engineer</td>
          <td>Melbourne</td>
        </tr>
        <tr>
          <td>Theo Fischer</td>
          <td>Backend Engineer</td>
          <td>Austin</td>
        </tr>
        <tr>
          <td>Finn Ashford</td>
          <td>Operations Manager</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Tariq Duarte</td>
          <td>Backend Engineer</td>
          <td>Barcelona</td>
        </tr>
        <tr>
          <td>Nadia Rossi</td>
          <td>HR Partner</td>
          <td>Montreal</td>
        </tr>
        <tr>
          <td>Isla Okafor</td>
          <td>Project Manager</td>
          <td>Prague</td>
        </tr>
        <tr>
          <td>Elena Alvarez</td>
          <td>Data Analyst</td>
          <td>Dublin</td>
        </tr>
        <tr>
          <td>Amara Quinn</td>
          <td>Content Writer</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

Ashford, Samir

B

Brennan, Diego
Brennan, Mason

C

Carter, Chloe

D

Delgado, Aria

K

Kim, Ava
Kowalski, Ella

L

Larsen, Ivy
Larsen, Omar
Lindqvist, Ravi

M

Mensah, Lucas
Moreau, Liam

N

Novak, Arjun
Novak, Kenji

O

Ortega, Priya

P

Patel, Noah

Q

Quinn, Kai

R

Rossi, Mia

S

Sato, Ethan
Sato, Hana
Silva, Sofia

V

Varga, Felix
Varga, Nora

W

Whitaker, Owen

<div class="hp-pos">
  <div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Contacts">
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">A</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Ashford, Samir</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">B</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Brennan, Diego</li>
        <li class="py-1">Brennan, Mason</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">C</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Carter, Chloe</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">D</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Delgado, Aria</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">K</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Kim, Ava</li>
        <li class="py-1">Kowalski, Ella</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">L</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Larsen, Ivy</li>
        <li class="py-1">Larsen, Omar</li>
        <li class="py-1">Lindqvist, Ravi</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">M</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Mensah, Lucas</li>
        <li class="py-1">Moreau, Liam</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">N</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Novak, Arjun</li>
        <li class="py-1">Novak, Kenji</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">O</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Ortega, Priya</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">P</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Patel, Noah</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">Q</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Quinn, Kai</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">R</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Rossi, Mia</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">S</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Sato, Ethan</li>
        <li class="py-1">Sato, Hana</li>
        <li class="py-1">Silva, Sofia</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">V</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Varga, Felix</li>
        <li class="py-1">Varga, Nora</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">W</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Whitaker, Owen</li>
      </ul>
    </section>
  </div>
</div>

5Sticky sidebar

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

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

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.

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

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

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

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

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.

<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-e">
        <nav class="sticky-top p-2 small" aria-label="On this page">
          <div class="font-semibold mb-1">
            On this page
          </div>
          <a class="block" href="#">Overview</a><a class="block" href="#">Setup</a><a class="block" href="#">FAQ</a>
        </nav>
      </div>
      <div class="col-8 p-4">
        <p class="small mb-4">Our team has done this many times, so you never have to guess.</p>
        <p class="small mb-4">Our evening party is the best place to turn talks into friendships.</p>
        <p class="small mb-4">Every session is recorded, so you can catch up on anything you missed.</p>
        <p class="small mb-4">Sponsors meet decision-makers in a relaxed, friendly setting.</p>
        <p class="small mb-4">Every detail is handled by people who care about getting it right.</p>
        <p class="small mb-4">Clear prices, honest advice and no surprises along the way.</p>
        <p class="small mb-4">We measure success by how many attendees come back and tell their friends.</p>
        <p class="small mb-4">The venue is a short walk from the station and fully accessible.</p>
        <p class="small mb-4">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

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

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

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

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

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

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

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

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="Responsive sticky demo">
    <div class="sticky-md-top text-bg-primary px-4 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-4">
      <p class="small mb-4">Our evening party is the best place to turn talks into friendships.</p>
      <p class="small mb-4">The networking app helps you meet the right people before you arrive.</p>
      <p class="small mb-4">Every detail is handled by people who care about getting it right.</p>
      <p class="small mb-4">Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
      <p class="small mb-4">We measure success by how many attendees come back and tell their friends.</p>
      <p class="small mb-4">Clear prices, honest advice and no surprises along the way.</p>
      <p class="small mb-4">We listen first, then build a plan around what you actually need.</p>
      <p class="small mb-4">The venue is a short walk from the station and fully accessible.</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.

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

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

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

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

Every attendee receives a certificate of participation.

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

Group tickets include a private meeting room for your team.

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

<div class="hp-pos">
  <nav class="navbar fixed-top bg-page border-b px-4 py-2" aria-label="Demo">
    <span class="navbar-brand mb-0 h6"><i class="bi bi-lightning-charge-fill" aria-hidden="true"></i> Bloomix Nest</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-4 pb-4" style="padding-top:4rem">
      <p class="small mb-4">Friendly people answer your questions quickly, by phone, chat or email.</p>
      <p class="small mb-4">Sponsors meet decision-makers in a relaxed, friendly setting.</p>
      <p class="small mb-4">Virtual passes let you join the main stage live from anywhere.</p>
      <p class="small mb-4">Every session is recorded, so you can catch up on anything you missed.</p>
      <p class="small mb-4">Every attendee receives a certificate of participation.</p>
      <p class="small mb-4">Thousands of attendees already trust us, and we work hard to keep it that way.</p>
      <p class="small mb-4">Group tickets include a private meeting room for your team.</p>
      <p class="small mb-4">We keep things simple, so you can focus on what matters to you.</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.