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 really affects the value of your home

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

Sellers get professional photos, floor plans and a marketing plan included.

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

Our local agents know every street, school and coffee shop in the area.

Mortgage advisors help you understand what you can afford before you start.

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

Most of our homes sell within six weeks, often above the asking price.

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 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 really affects the value of your home
    </header>
    <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">Sellers get professional photos, floor plans and a marketing plan included.</p>
      <p class="small mb-3">Thousands of buyers already trust us, and we work hard to keep it that way.</p>
      <p class="small mb-3">Our local agents know every street, school and coffee shop in the area.</p>
      <p class="small mb-3">Mortgage advisors help you understand what you can afford before you start.</p>
      <p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</p>
      <p class="small mb-3">Most of our homes sell within six weeks, often above the asking price.</p>
      <p class="small mb-3">Our team has done this many times, so you never have to guess.</p>
    </div>
  </div>
</div>

2Sticky save bar

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

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

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

We handle the paperwork, so you can focus on planning the move.

Honest advice comes first, even when it means waiting for the right home.

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

Get a free, no-obligation valuation of your home within 48 hours.

Neighbourhood guides cover transport, schools and things to do.

<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">We listen first, then build a plan around what you actually need.</p>
      <p class="small mb-3">Clear prices, honest advice and no surprises along the way.</p>
      <p class="small mb-3">We handle the paperwork, so you can focus on planning the move.</p>
      <p class="small mb-3">Honest advice comes first, even when it means waiting for the right home.</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">Get a free, no-obligation valuation of your home within 48 hours.</p>
      <p class="small mb-3">Neighbourhood guides cover transport, schools and things to do.</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 Morgan	Frontend Engineer	Melbourne
Theo Alvarez	Frontend Engineer	Melbourne
Ella Kowalski	Finance Lead	Edinburgh
Hana Novak	Finance Lead	Toronto
Sofia Varga	Operations Manager	Denver
Ruby Ibrahim	Data Analyst	Copenhagen
Ravi Silva	Content Writer	Oslo
Tariq Patel	Content Writer	Valencia
Freya Kim	Content Writer	Auckland
Nora Tanaka	Customer Success	Kyoto
Nadia Nguyen	Art Director	Copenhagen
Maya Okafor	Customer Success	Edinburgh

<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 Morgan</td>
          <td>Frontend Engineer</td>
          <td>Melbourne</td>
        </tr>
        <tr>
          <td>Theo Alvarez</td>
          <td>Frontend Engineer</td>
          <td>Melbourne</td>
        </tr>
        <tr>
          <td>Ella Kowalski</td>
          <td>Finance Lead</td>
          <td>Edinburgh</td>
        </tr>
        <tr>
          <td>Hana Novak</td>
          <td>Finance Lead</td>
          <td>Toronto</td>
        </tr>
        <tr>
          <td>Sofia Varga</td>
          <td>Operations Manager</td>
          <td>Denver</td>
        </tr>
        <tr>
          <td>Ruby Ibrahim</td>
          <td>Data Analyst</td>
          <td>Copenhagen</td>
        </tr>
        <tr>
          <td>Ravi Silva</td>
          <td>Content Writer</td>
          <td>Oslo</td>
        </tr>
        <tr>
          <td>Tariq Patel</td>
          <td>Content Writer</td>
          <td>Valencia</td>
        </tr>
        <tr>
          <td>Freya Kim</td>
          <td>Content Writer</td>
          <td>Auckland</td>
        </tr>
        <tr>
          <td>Nora Tanaka</td>
          <td>Customer Success</td>
          <td>Kyoto</td>
        </tr>
        <tr>
          <td>Nadia Nguyen</td>
          <td>Art Director</td>
          <td>Copenhagen</td>
        </tr>
        <tr>
          <td>Maya Okafor</td>
          <td>Customer Success</td>
          <td>Edinburgh</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, Omar
Ashford, Ella

B

Brennan, Kenji

D

Delgado, Finn
Delgado, Luna
Duarte, Amara

F

Fischer, Ava
Fischer, Owen

H

Haddad, Chloe
Haddad, Diego
Harlow, Ethan
Harlow, Jonah
Hughes, Theo

L

Larsen, Mia
Larsen, Priya
Lindqvist, Liam
Lindqvist, Sofia

M

Mensah, Felix

N

Novak, Arjun

O

Okafor, Lucas
Ortega, Ivy

Q

Quinn, Lea

V

Varga, Mason

W

Whitaker, Aria

<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, Omar</li>
        <li class="py-1">Ashford, Ella</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, Kenji</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, Finn</li>
        <li class="py-1">Delgado, Luna</li>
        <li class="py-1">Duarte, Amara</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, Ava</li>
        <li class="py-1">Fischer, Owen</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, Chloe</li>
        <li class="py-1">Haddad, Diego</li>
        <li class="py-1">Harlow, Ethan</li>
        <li class="py-1">Harlow, Jonah</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, Mia</li>
        <li class="py-1">Larsen, Priya</li>
        <li class="py-1">Lindqvist, Liam</li>
        <li class="py-1">Lindqvist, Sofia</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, Felix</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, Arjun</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, Lucas</li>
        <li class="py-1">Ortega, Ivy</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">V</h3>
      <ul class="list-unstyled px-3 py-2 mb-0">
        <li class="py-1">Varga, Mason</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, Aria</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 rental team manages repairs, payments and tenants for landlords.

Book viewings online and take a 3D tour before you leave the house.

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

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

We handle the paperwork, so you can focus on planning the move.

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

Price alerts tell you the moment a home that fits your search comes on the market.

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="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 rental team manages repairs, payments and tenants for landlords.</p>
        <p class="small mb-3">Book viewings online and take a 3D tour before you leave the house.</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">Start in minutes and get help from a real person whenever you need it.</p>
        <p class="small mb-3">We handle the paperwork, so you can focus on planning the move.</p>
        <p class="small mb-3">We listen first, then build a plan around what you actually need.</p>
        <p class="small mb-3">Price alerts tell you the moment a home that fits your search comes on the market.</p>
        <p class="small mb-3">Every detail is handled by people who care about getting it right.</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

Honest advice comes first, even when it means waiting for the right home.

Sellers get professional photos, floor plans and a marketing plan included.

Book viewings online and take a 3D tour before you leave the house.

Mortgage advisors help you understand what you can afford before you start.

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

Get a free, no-obligation valuation of your home within 48 hours.

Our rental team manages repairs, payments and tenants for landlords.

Most of our homes sell within six weeks, often above the asking price.

<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">Honest advice comes first, even when it means waiting for the right home.</p>
      <p class="small mb-3">Sellers get professional photos, floor plans and a marketing plan included.</p>
      <p class="small mb-3">Book viewings online and take a 3D tour before you leave the house.</p>
      <p class="small mb-3">Mortgage advisors help you understand what you can afford before you start.</p>
      <p class="small mb-3">Clear prices, honest advice and no surprises along the way.</p>
      <p class="small mb-3">Get a free, no-obligation valuation of your home within 48 hours.</p>
      <p class="small mb-3">Our rental team manages repairs, payments and tenants for landlords.</p>
      <p class="small mb-3">Most of our homes sell within six weeks, often above the asking price.</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.

Every listing is checked by our team, so the photos match what you see in person.

Our local agents know every street, school and coffee shop in the area.

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

Neighbourhood guides cover transport, schools and things to do.

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

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

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

<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> Vivid Studio</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">Friendly people answer your questions quickly, by phone, chat or email.</p>
      <p class="small mb-3">Every listing is checked by our team, so the photos match what you see in person.</p>
      <p class="small mb-3">Our local agents know every street, school and coffee shop in the area.</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">Neighbourhood guides cover transport, schools and things to do.</p>
      <p class="small mb-3">Thousands of buyers already trust us, and we work hard to keep it that way.</p>
      <p class="small mb-3">We measure success by how many buyers come back and tell their friends.</p>
      <p class="small mb-3">Thousands of buyers already trust us, and we work hard to keep it that way.</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.

Our rental team manages repairs, payments and tenants for landlords.

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

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

Every listing is checked by our team, so the photos match what you see in person.

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

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

Neighbourhood guides cover transport, schools and things to do.

Sellers get professional photos, floor plans and a marketing plan included.

<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-fill" 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-fill" 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-fill" 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">Our rental team manages repairs, payments and tenants for landlords.</p>
      <p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</p>
      <p class="small mb-3">We measure success by how many buyers come back and tell their friends.</p>
      <p class="small mb-3">Every listing is checked by our team, so the photos match what you see in person.</p>
      <p class="small mb-3">Every detail is handled by people who care about getting it right.</p>
      <p class="small mb-3">Clear prices, honest advice and no surprises along the way.</p>
      <p class="small mb-3">Neighbourhood guides cover transport, schools and things to do.</p>
      <p class="small mb-3">Sellers get professional photos, floor plans and a marketing plan included.</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 37 min ago

Mateo NguyenA first-time buyer's checklist
Leo AshfordStaging tips that help homes sell faster
Zoe PatelThe small habits that make a big difference
Elena DuarteHow our valuations work
Isla CarterA beginner's guide to getting started
Hana KowalskiBuying a building plot: what to check first
Samir OrtegaHow we sold a lake cottage in nine days
Kai WhitakerLooking back at a busy season
Noah MorganHow to choose the right property

<div class="hp-pos">
  <div class="fixed-top text-bg-dark px-3 py-2 small fw-semibold">
    <i class="bi bi-inbox-fill" aria-hidden="true"></i> Inbox
  </div>
  <div class="fixed-bottom bg-body-tertiary border-top px-3 py-1 small text-body-secondary">
    Synced 37 min ago
  </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">Mateo Nguyen</strong>A first-time buyer&#39;s checklist</li>
      <li class="list-group-item small"><strong class="d-block">Leo Ashford</strong>Staging tips that help homes sell faster</li>
      <li class="list-group-item small"><strong class="d-block">Zoe Patel</strong>The small habits that make a big difference</li>
      <li class="list-group-item small"><strong class="d-block">Elena Duarte</strong>How our valuations work</li>
      <li class="list-group-item small"><strong class="d-block">Isla Carter</strong>A beginner&#39;s guide to getting started</li>
      <li class="list-group-item small"><strong class="d-block">Hana Kowalski</strong>Buying a building plot: what to check first</li>
      <li class="list-group-item small"><strong class="d-block">Samir Ortega</strong>How we sold a lake cottage in nine days</li>
      <li class="list-group-item small"><strong class="d-block">Kai Whitaker</strong>Looking back at a busy season</li>
      <li class="list-group-item small"><strong class="d-block">Noah Morgan</strong>How to choose the right property</li>
    </ul>
  </div>
</div>

10Sticky chat composer

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

Honest advice comes first, even when it means waiting for the right home.

Get a free, no-obligation valuation of your home within 48 hours.

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

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

Our local agents know every street, school and coffee shop in the area.

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="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%">
          Honest advice comes first, even when it means waiting for the right home.
        </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%">
          Get a free, no-obligation valuation of your home within 48 hours.
        </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 keep things simple, so you can focus on what matters to you.
        </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%">
          Our team has done this many times, so you never have to guess.
        </div>
      </div>
      <div class="d-flex  mb-2">
        <div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
          Our local agents know every street, school and coffee shop in the area.
        </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%">
          We listen first, then build a plan around what you actually need.
        </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-fill" aria-hidden="true"></i></button>
    </form>
  </div>
</div>

11Sticky cart total

The order total sticks to the bottom of a long basket list.

Total $8,090,000.00

<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>Studio apartment</span><span>$325,000</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Penthouse</span><span>$1,850,000</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Country farmhouse</span><span>$905,000</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Townhouse</span><span>$685,000</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Corner office</span><span>$940,000</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Seaside villa</span><span>$2,185,000</span></li>
      <li class="list-group-item d-flex justify-content-between small"><span>Garden villa</span><span>$1,200,000</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 $8,090,000.00</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