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.

What is new on our winter menu

We have been feeding this neighbourhood for over a decade, and we still love it.

Every dish is cooked to order, so tell us if you would like anything changed.

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

Private dining rooms seat up to forty guests for birthdays and business dinners.

Our terrace is open from spring to autumn, with heaters for cooler evenings.

Cooking classes on Saturday mornings teach you our favourite recipes.

Children are always welcome, with a menu made just for them.

Bread is baked every morning and pasta is rolled by hand in our kitchen.

<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> What is new on our winter menu
    </header>
    <div class="p-3">
      <p class="small mb-3">We have been feeding this neighbourhood for over a decade, and we still love it.</p>
      <p class="small mb-3">Every dish is cooked to order, so tell us if you would like anything changed.</p>
      <p class="small mb-3">Every detail is handled by people who care about getting it right.</p>
      <p class="small mb-3">Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
      <p class="small mb-3">Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
      <p class="small mb-3">Cooking classes on Saturday mornings teach you our favourite recipes.</p>
      <p class="small mb-3">Children are always welcome, with a menu made just for them.</p>
      <p class="small mb-3">Bread is baked every morning and pasta is rolled by hand in our kitchen.</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.

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

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

Order for pickup or delivery and enjoy the same dishes at home.

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

Thousands of guests 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.

<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">Start in minutes and get help from a real person whenever you need it.</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">Order for pickup or delivery and enjoy the same dishes at home.</p>
      <p class="small mb-3">We measure success by how many guests come back and tell their friends.</p>
      <p class="small mb-3">Thousands of guests 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>
    </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
Ivy Kowalski	Customer Success	Montreal
Sofia Brennan	Art Director	Austin
Hana Hughes	Art Director	Oslo
Nora Fischer	Sales Executive	Singapore
Aria Harlow	Operations Manager	Prague
Hana Varga	Marketing Lead	Auckland
Ivy Nguyen	Content Writer	Denver
Ethan Quinn	QA Engineer	Toronto
Liam Alvarez	Support Specialist	Toronto
Finn Okafor	Frontend Engineer	Copenhagen
Mateo Ortega	QA Engineer	Prague
Isla 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>Ivy Kowalski</td>
          <td>Customer Success</td>
          <td>Montreal</td>
        </tr>
        <tr>
          <td>Sofia Brennan</td>
          <td>Art Director</td>
          <td>Austin</td>
        </tr>
        <tr>
          <td>Hana Hughes</td>
          <td>Art Director</td>
          <td>Oslo</td>
        </tr>
        <tr>
          <td>Nora Fischer</td>
          <td>Sales Executive</td>
          <td>Singapore</td>
        </tr>
        <tr>
          <td>Aria Harlow</td>
          <td>Operations Manager</td>
          <td>Prague</td>
        </tr>
        <tr>
          <td>Hana Varga</td>
          <td>Marketing Lead</td>
          <td>Auckland</td>
        </tr>
        <tr>
          <td>Ivy Nguyen</td>
          <td>Content Writer</td>
          <td>Denver</td>
        </tr>
        <tr>
          <td>Ethan Quinn</td>
          <td>QA Engineer</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Liam Alvarez</td>
          <td>Support Specialist</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Finn Okafor</td>
          <td>Frontend Engineer</td>
          <td>Copenhagen</td>
        </tr>
        <tr>
          <td>Mateo Ortega</td>
          <td>QA Engineer</td>
          <td>Prague</td>
        </tr>
        <tr>
          <td>Isla 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.

A

Ashford, Chloe
Ashford, Mason

D

Duarte, Ava
Duarte, Maya

F

Fischer, Elena

H

Haddad, Leo

I

Ibrahim, Omar

K

Kim, Mia
Kowalski, Kai

L

Larsen, Ravi

M

Mensah, Lucas
Moreau, Amara
Morgan, Zoe

N

Nguyen, Priya
Novak, Aria

O

Okafor, Freya

Q

Quinn, Lea

R

Rossi, Jonah
Rossi, Ruby

S

Sato, Diego
Silva, Kenji
Silva, Luna

T

Tanaka, Tariq

W

Whitaker, Samir

<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">Ashford, Chloe</li>
        <li class="py-1">Ashford, Mason</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, Ava</li>
        <li class="py-1">Duarte, Maya</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, Elena</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, Leo</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, Omar</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, Mia</li>
        <li class="py-1">Kowalski, Kai</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, Ravi</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, Lucas</li>
        <li class="py-1">Moreau, Amara</li>
        <li class="py-1">Morgan, Zoe</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, Priya</li>
        <li class="py-1">Novak, Aria</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, Freya</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, Lea</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, Jonah</li>
        <li class="py-1">Rossi, Ruby</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, Kenji</li>
        <li class="py-1">Silva, Luna</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">W</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Whitaker, Samir</li>
      </ul>
    </section>
  </div>
</div>

5Sticky sidebar

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

Book a table online in seconds, or call us for groups of eight or more.

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

Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.

Our sommelier has paired each dish with wines from small family vineyards.

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