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.

Our favourite tips for busy weeks

Family rooms, adults-only retreats and pet-friendly stays in one search.

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

From city breaks to safaris, we plan trips around how you like to travel.

We find the best price, and if you see it cheaper we match it.

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

Our travel experts are on call around the clock while you are away.

Free cancellation on most stays means you can book now and decide later.

Every hotel on our list is visited and reviewed by our own travel team.

<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> Our favourite tips for busy weeks
    </header>
    <div class="p-4">
      <p class="small mb-4">Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
      <p class="small mb-4">Every detail is handled by people who care about getting it right.</p>
      <p class="small mb-4">From city breaks to safaris, we plan trips around how you like to travel.</p>
      <p class="small mb-4">We find the best price, and if you see it cheaper we match it.</p>
      <p class="small mb-4">Clear prices, honest advice and no surprises along the way.</p>
      <p class="small mb-4">Our travel experts are on call around the clock while you are away.</p>
      <p class="small mb-4">Free cancellation on most stays means you can book now and decide later.</p>
      <p class="small mb-4">Every hotel on our list is visited and reviewed by our own travel team.</p>
    </div>
  </div>
</div>

2Sticky save bar

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

Travel insurance and car rental can be added in a single click.

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

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

Flexible dates help you find quieter weeks and better prices.

Airport transfers, tours and dinners are arranged before you arrive.

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

Local guides show you the places that never make it into guidebooks.

<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">Travel insurance and car rental can be added in a single click.</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">We listen first, then build a plan around what you actually need.</p>
      <p class="small mb-4">Flexible dates help you find quieter weeks and better prices.</p>
      <p class="small mb-4">Airport transfers, tours and dinners are arranged before you arrive.</p>
      <p class="small mb-4">Our team has done this many times, so you never have to guess.</p>
      <p class="small mb-4">Local guides show you the places that never make it into guidebooks.</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
Ava Delgado	Frontend Engineer	Denver
Ivy Hughes	Product Designer	Seoul
Samir Mensah	Support Specialist	Oslo
Hana Sato	Data Analyst	Edinburgh
Leo Rossi	Frontend Engineer	Porto
Chloe Ashford	Marketing Lead	Kyoto
Lucas Brennan	Finance Lead	Copenhagen
Priya Morgan	Marketing Lead	Montreal
Theo Carter	Art Director	Vancouver
Ella Quinn	Content Writer	Copenhagen
Liam Novak	HR Partner	Toronto
Zoe Larsen	Content Writer	Auckland

<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>Ava Delgado</td>
          <td>Frontend Engineer</td>
          <td>Denver</td>
        </tr>
        <tr>
          <td>Ivy Hughes</td>
          <td>Product Designer</td>
          <td>Seoul</td>
        </tr>
        <tr>
          <td>Samir Mensah</td>
          <td>Support Specialist</td>
          <td>Oslo</td>
        </tr>
        <tr>
          <td>Hana Sato</td>
          <td>Data Analyst</td>
          <td>Edinburgh</td>
        </tr>
        <tr>
          <td>Leo Rossi</td>
          <td>Frontend Engineer</td>
          <td>Porto</td>
        </tr>
        <tr>
          <td>Chloe Ashford</td>
          <td>Marketing Lead</td>
          <td>Kyoto</td>
        </tr>
        <tr>
          <td>Lucas Brennan</td>
          <td>Finance Lead</td>
          <td>Copenhagen</td>
        </tr>
        <tr>
          <td>Priya Morgan</td>
          <td>Marketing Lead</td>
          <td>Montreal</td>
        </tr>
        <tr>
          <td>Theo Carter</td>
          <td>Art Director</td>
          <td>Vancouver</td>
        </tr>
        <tr>
          <td>Ella Quinn</td>
          <td>Content Writer</td>
          <td>Copenhagen</td>
        </tr>
        <tr>
          <td>Liam Novak</td>
          <td>HR Partner</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Zoe Larsen</td>
          <td>Content Writer</td>
          <td>Auckland</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, Isla

D

Delgado, Noah

F

Fischer, Kai
Fischer, Nadia

H

Haddad, Hana
Haddad, Tariq
Harlow, Felix
Hughes, Ruby

I

Ibrahim, Kenji
Ibrahim, Sofia

K

Kowalski, Samir

L

Lindqvist, Aria
Lindqvist, Ravi

M

Moreau, Ava
Morgan, Mason

N

Novak, Amara

O

Ortega, Freya
Ortega, Nora

P

Patel, Arjun

S

Sato, Mateo
Silva, Diego
Silva, Finn

T

Tanaka, Ethan

V

Varga, Mia

<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">Alvarez, Isla</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, Noah</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">F</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Fischer, Kai</li>
        <li class="py-1">Fischer, Nadia</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">H</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Haddad, Hana</li>
        <li class="py-1">Haddad, Tariq</li>
        <li class="py-1">Harlow, Felix</li>
        <li class="py-1">Hughes, Ruby</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">I</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Ibrahim, Kenji</li>
        <li class="py-1">Ibrahim, Sofia</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">Kowalski, Samir</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">Lindqvist, Aria</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">Moreau, Ava</li>
        <li class="py-1">Morgan, Mason</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, Amara</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, Freya</li>
        <li class="py-1">Ortega, Nora</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, Arjun</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, Mateo</li>
        <li class="py-1">Silva, Diego</li>
        <li class="py-1">Silva, Finn</li>
      </ul>
    </section>
    <section>
      <h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">T</h3>
      <ul class="list-unstyled px-4 py-2 mb-0">
        <li class="py-1">Tanaka, Ethan</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, Mia</li>
      </ul>
    </section>
  </div>
</div>

5Sticky sidebar

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

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

Every trip supports local businesses and responsible tourism.

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

Family rooms, adults-only retreats and pet-friendly stays in one search.

Members get room upgrades and late check-out at selected hotels.

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

Our travel experts are on call around the clock while you are away.

Flexible dates help you find quieter weeks and better prices.

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

<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">We measure success by how many travellers come back and tell their friends.</p>
        <p class="small mb-4">Every trip supports local businesses and responsible tourism.</p>
        <p class="small mb-4">Our team has done this many times, so you never have to guess.</p>
        <p class="small mb-4">Family rooms, adults-only retreats and pet-friendly stays in one search.</p>
        <p class="small mb-4">Members get room upgrades and late check-out at selected hotels.</p>
        <p class="small mb-4">Clear prices, honest advice and no surprises along the way.</p>
        <p class="small mb-4">Our travel experts are on call around the clock while you are away.</p>
        <p class="small mb-4">Flexible dates help you find quieter weeks and better prices.</p>
        <p class="small mb-4">Thousands of travellers already trust us, and we work hard to keep it that way.</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

We find the best price, and if you see it cheaper we match it.

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

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

Travel insurance and car rental can be added in a single click.

From city breaks to safaris, we plan trips around how you like to travel.

Every hotel on our list is visited and reviewed by our own travel team.

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

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="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">We find the best price, and if you see it cheaper we match it.</p>
      <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">We listen first, then build a plan around what you actually need.</p>
      <p class="small mb-4">Travel insurance and car rental can be added in a single click.</p>
      <p class="small mb-4">From city breaks to safaris, we plan trips around how you like to travel.</p>
      <p class="small mb-4">Every hotel on our list is visited and reviewed by our own travel team.</p>
      <p class="small mb-4">Friendly people answer your questions quickly, by phone, chat or email.</p>
      <p class="small mb-4">Every detail is handled by people who care about getting it right.</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.