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.
The new verified listings turns you focused on what matters at a fair price.
This flexible goal shows every detail in view on any device.
Our virtual tours turns decisions quicker and clearer without the usual hassle.
Our mortgage advice shows decisions quicker and clearer in just a few clicks.
This practical routine turns new ideas to life at a fair price.
A modern release keeps projects moving forward without the usual hassle.
The new verified listings guides projects moving forward at a fair price.
The new expert agents lets results you can measure on any device.
<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> A guide to legal support
</header>
<div class="p-3">
<p class="small mb-3">The new verified listings turns you focused on what matters at a fair price.</p>
<p class="small mb-3">This flexible goal shows every detail in view on any device.</p>
<p class="small mb-3">Our virtual tours turns decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-3">Our mortgage advice shows decisions quicker and clearer in just a few clicks.</p>
<p class="small mb-3">This practical routine turns new ideas to life at a fair price.</p>
<p class="small mb-3">A modern release keeps projects moving forward without the usual hassle.</p>
<p class="small mb-3">The new verified listings guides projects moving forward at a fair price.</p>
<p class="small mb-3">The new expert agents lets results you can measure on any device.</p>
</div>
</div>
</div>2Sticky save bar
sticky-bottom keeps form actions at the bottom edge of the scrolling area.
A simple routine connects results you can measure on any device.
Our property search turns time back in your day without the usual hassle.
This clear launch turns projects moving forward without extra tools.
Our legal support gives your work organised in just a few clicks.
This bright dashboard turns new ideas to life in just a few clicks.
A simple community helps complex tasks into simple steps with friendly support.
Our legal support turns your work organised at a fair price.
<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">A simple routine connects results you can measure on any device.</p>
<p class="small mb-3">Our property search turns time back in your day without the usual hassle.</p>
<p class="small mb-3">This clear launch turns projects moving forward without extra tools.</p>
<p class="small mb-3">Our legal support gives your work organised in just a few clicks.</p>
<p class="small mb-3">This bright dashboard turns new ideas to life in just a few clicks.</p>
<p class="small mb-3">A simple community helps complex tasks into simple steps with friendly support.</p>
<p class="small mb-3">Our legal support turns your work organised at a fair price.</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 |
|---|---|---|
| Ella Mensah | Operations Manager | Toronto |
| Noah Moreau | Frontend Engineer | Vancouver |
| Freya Harlow | Finance Lead | Austin |
| Theo Brennan | Project Manager | Austin |
| Chloe Lindqvist | Sales Executive | Austin |
| Hana Delgado | Operations Manager | Copenhagen |
| Ravi Patel | Customer Success | Montreal |
| Lucas Mensah | Support Specialist | Valencia |
| Elena Ashford | Marketing Lead | Oslo |
| Felix Larsen | Finance Lead | Barcelona |
| Ava Mensah | Finance Lead | Toronto |
| Priya Lindqvist | Product Designer | Montreal |
<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>Ella Mensah</td>
<td>Operations Manager</td>
<td>Toronto</td>
</tr>
<tr>
<td>Noah Moreau</td>
<td>Frontend Engineer</td>
<td>Vancouver</td>
</tr>
<tr>
<td>Freya Harlow</td>
<td>Finance Lead</td>
<td>Austin</td>
</tr>
<tr>
<td>Theo Brennan</td>
<td>Project Manager</td>
<td>Austin</td>
</tr>
<tr>
<td>Chloe Lindqvist</td>
<td>Sales Executive</td>
<td>Austin</td>
</tr>
<tr>
<td>Hana Delgado</td>
<td>Operations Manager</td>
<td>Copenhagen</td>
</tr>
<tr>
<td>Ravi Patel</td>
<td>Customer Success</td>
<td>Montreal</td>
</tr>
<tr>
<td>Lucas Mensah</td>
<td>Support Specialist</td>
<td>Valencia</td>
</tr>
<tr>
<td>Elena Ashford</td>
<td>Marketing Lead</td>
<td>Oslo</td>
</tr>
<tr>
<td>Felix Larsen</td>
<td>Finance Lead</td>
<td>Barcelona</td>
</tr>
<tr>
<td>Ava Mensah</td>
<td>Finance Lead</td>
<td>Toronto</td>
</tr>
<tr>
<td>Priya Lindqvist</td>
<td>Product Designer</td>
<td>Montreal</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, Sofia
- Ashford, Aria
C
- Carter, Ethan
- Carter, Nadia
D
- Duarte, Nadia
F
- Fischer, Maya
- Fischer, Theo
H
- Haddad, Ruby
- Hughes, Felix
I
- Ibrahim, Kenji
- Ibrahim, Zoe
K
- Kim, Mia
- Kowalski, Freya
L
- Lindqvist, Hana
M
- Mensah, Theo
- Morgan, Amara
N
- Nguyen, Isla
- Nguyen, Kenji
P
- Patel, Mason
R
- Rossi, Ava
- Rossi, Jonah
S
- Sato, Aria
T
- Tanaka, Arjun
- Tanaka, Finn
<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, Sofia</li>
<li class="py-1">Ashford, Aria</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, Ethan</li>
<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">Duarte, Nadia</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, Maya</li>
<li class="py-1">Fischer, Theo</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, Ruby</li>
<li class="py-1">Hughes, Felix</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, Kenji</li>
<li class="py-1">Ibrahim, Zoe</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, Freya</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">Lindqvist, Hana</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, Theo</li>
<li class="py-1">Morgan, Amara</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, Isla</li>
<li class="py-1">Nguyen, Kenji</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, Mason</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, Ava</li>
<li class="py-1">Rossi, Jonah</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, Aria</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, Arjun</li>
<li class="py-1">Tanaka, Finn</li>
</ul>
</section>
</div>
</div>5Sticky sidebar
A column with a sticky-top block stays in view next to a long content column.
Our legal support lets customers coming back wherever you are.
The new neighbourhood guides turns customers coming back from the very first day.
Our legal support gives every detail in view without extra tools.
The new expert agents gives data easy to understand without extra tools.
A flexible update helps new ideas to life without extra tools.
A reliable idea keeps projects moving forward with friendly support.
Our mortgage advice keeps decisions quicker and clearer at a fair price.
A powerful project turns customers coming back without extra tools.
A modern update guides every detail in view at a fair price.
<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">Our legal support lets customers coming back wherever you are.</p>
<p class="small mb-3">The new neighbourhood guides turns customers coming back from the very first day.</p>
<p class="small mb-3">Our legal support gives every detail in view without extra tools.</p>
<p class="small mb-3">The new expert agents gives data easy to understand without extra tools.</p>
<p class="small mb-3">A flexible update helps new ideas to life without extra tools.</p>
<p class="small mb-3">A reliable idea keeps projects moving forward with friendly support.</p>
<p class="small mb-3">Our mortgage advice keeps decisions quicker and clearer at a fair price.</p>
<p class="small mb-3">A powerful project turns customers coming back without extra tools.</p>
<p class="small mb-3">A modern update guides every detail in view at a fair price.</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.
Our home valuation turns the whole team on the same page wherever you are.
A simple story gives results you can measure without the usual hassle.
Our virtual tours helps new ideas to life in just a few clicks.
Our legal support turns every detail in view wherever you are.
A modern community shows complex tasks into simple steps without the usual hassle.
This practical project connects data easy to understand with friendly support.
This secure goal gives projects moving forward from the very first day.
This friendly workflow shows data easy to understand for teams of every size.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Responsive sticky demo">
<div class="sticky-md-top bg-primary text-white px-3 py-2 small">
<i class="bi bi-phone" aria-hidden="true"></i> Sticky from md, normal flow on small screens
</div>
<div class="p-3">
<p class="small mb-3">Our home valuation turns the whole team on the same page wherever you are.</p>
<p class="small mb-3">A simple story gives results you can measure without the usual hassle.</p>
<p class="small mb-3">Our virtual tours helps new ideas to life in just a few clicks.</p>
<p class="small mb-3">Our legal support turns every detail in view wherever you are.</p>
<p class="small mb-3">A modern community shows complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-3">This practical project connects data easy to understand with friendly support.</p>
<p class="small mb-3">This secure goal gives projects moving forward from the very first day.</p>
<p class="small mb-3">This friendly workflow shows data easy to understand for teams of every size.</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.
This focused story guides results you can measure in just a few clicks.
A elegant workflow makes your work organised without extra tools.
This bright experience helps the whole team on the same page at a fair price.
This honest process gives every detail in view in just a few clicks.
The new verified listings gives data easy to understand with friendly support.
Our property search helps complex tasks into simple steps at a fair price.
A fast idea shows new ideas to life all year round.
The new verified listings gives complex tasks into simple steps with friendly support.
<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" aria-hidden="true"></i> Brand name 3</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">This focused story guides results you can measure in just a few clicks.</p>
<p class="small mb-3">A elegant workflow makes your work organised without extra tools.</p>
<p class="small mb-3">This bright experience helps the whole team on the same page at a fair price.</p>
<p class="small mb-3">This honest process gives every detail in view in just a few clicks.</p>
<p class="small mb-3">The new verified listings gives data easy to understand with friendly support.</p>
<p class="small mb-3">Our property search helps complex tasks into simple steps at a fair price.</p>
<p class="small mb-3">A fast idea shows new ideas to life all year round.</p>
<p class="small mb-3">The new verified listings gives complex tasks into simple steps with friendly support.</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.
A simple workflow guides projects moving forward with friendly support.
The new verified listings keeps decisions quicker and clearer in just a few clicks.
This fast plan brings customers coming back without extra tools.
Our rental management guides results you can measure all year round.
This powerful project makes every detail in view from the very first day.
The new verified listings brings results you can measure without the usual hassle.
This reliable idea makes results you can measure with friendly support.
This simple release connects customers coming back on any device.
<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" 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" 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" 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">A simple workflow guides projects moving forward with friendly support.</p>
<p class="small mb-3">The new verified listings keeps decisions quicker and clearer in just a few clicks.</p>
<p class="small mb-3">This fast plan brings customers coming back without extra tools.</p>
<p class="small mb-3">Our rental management guides results you can measure all year round.</p>
<p class="small mb-3">This powerful project makes every detail in view from the very first day.</p>
<p class="small mb-3">The new verified listings brings results you can measure without the usual hassle.</p>
<p class="small mb-3">This reliable idea makes results you can measure with friendly support.</p>
<p class="small mb-3">This simple release connects customers coming back on any device.</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.
- Theo KimA guide to legal support
- Chloe NovakThe simple community checklist
- Noah RossiInside the clear experience
- Samir QuinnJourney notes for buyers
- Chloe OkaforWhat's new in apartments
- Ethan TanakaTeam notes for buyers
- Noah Mensah9 lessons from our project
- Omar HarlowInside the elegant team
- Noah FischerHonest ways to improve your launch
<div class="hp-pos">
<div class="fixed-top text-bg-dark px-3 py-2 small fw-semibold">
<i class="bi bi-inbox" aria-hidden="true"></i> Inbox
</div>
<div class="fixed-bottom bg-body-tertiary border-top px-3 py-1 small text-body-secondary">
Synced just now
</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">Theo Kim</strong>A guide to legal support</li>
<li class="list-group-item small"><strong class="d-block">Chloe Novak</strong>The simple community checklist</li>
<li class="list-group-item small"><strong class="d-block">Noah Rossi</strong>Inside the clear experience</li>
<li class="list-group-item small"><strong class="d-block">Samir Quinn</strong>Journey notes for buyers</li>
<li class="list-group-item small"><strong class="d-block">Chloe Okafor</strong>What's new in apartments</li>
<li class="list-group-item small"><strong class="d-block">Ethan Tanaka</strong>Team notes for buyers</li>
<li class="list-group-item small"><strong class="d-block">Noah Mensah</strong>9 lessons from our project</li>
<li class="list-group-item small"><strong class="d-block">Omar Harlow</strong>Inside the elegant team</li>
<li class="list-group-item small"><strong class="d-block">Noah Fischer</strong>Honest ways to improve your launch</li>
</ul>
</div>
</div>10Sticky chat composer
The message input uses sticky-bottom so it is always at hand below the conversation.
<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%">
The new expert agents connects complex tasks into simple steps without the usual hassle.
</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 legal support turns complex tasks into simple steps without the usual hassle.
</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 home valuation brings decisions quicker and clearer in just a few clicks.
</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%">
This powerful process gives decisions quicker and clearer at a fair price.
</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 property search helps data easy to understand without the usual hassle.
</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%">
The new verified listings helps customers coming back at a fair price.
</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" aria-hidden="true"></i></button>
</form>
</div>
</div>11Sticky cart total
The order total sticks to the bottom of a long basket list.
- Studio apartment$299.00
- City loft$228.50
- Garden villa$339.99
- Lake cottage$404.50
- Penthouse$333.00
- Family house$378.50
- Studio apartment Plus$143.99
<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>$299.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>City loft</span><span>$228.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Garden villa</span><span>$339.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Lake cottage</span><span>$404.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Penthouse</span><span>$333.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Family house</span><span>$378.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Studio apartment Plus</span><span>$143.99</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 $2,127.48</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.
Our home valuation connects new ideas to life without extra tools.
The new 3d tours helps time back in your day for teams of every size.
Our legal support shows decisions quicker and clearer for teams of every size.
Our home valuation gives data easy to understand for teams of every size.
Our mortgage advice turns the whole team on the same page in just a few clicks.
A friendly update connects projects moving forward from the very first day.
This focused idea makes new ideas to life in just a few clicks.
This clear launch shows every detail in view wherever you are.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Product filters">
<div class="sticky-lg-top bg-body border-bottom p-2 d-flex gap-2 align-items-center">
<label class="small text-nowrap" for="hp-sort-1235">Sort by</label>
<select class="form-select form-select-sm" id="hp-sort-1235">
<option>Newest</option>
<option>Price</option>
<option>Rating</option>
</select>
</div>
<div class="p-3">
<p class="small mb-3">Our home valuation connects new ideas to life without extra tools.</p>
<p class="small mb-3">The new 3d tours helps time back in your day for teams of every size.</p>
<p class="small mb-3">Our legal support shows decisions quicker and clearer for teams of every size.</p>
<p class="small mb-3">Our home valuation gives data easy to understand for teams of every size.</p>
<p class="small mb-3">Our mortgage advice turns the whole team on the same page in just a few clicks.</p>
<p class="small mb-3">A friendly update connects projects moving forward from the very first day.</p>
<p class="small mb-3">This focused idea makes new ideas to life in just a few clicks.</p>
<p class="small mb-3">This clear launch shows every detail in view wherever you are.</p>
</div>
</div>
</div>13Sticky editor toolbar
Formatting buttons stay at the top of a long document while you edit.
Homes you will love coming back to
Our legal support turns customers coming back for teams of every size.
This simple journey keeps complex tasks into simple steps from the very first day.
A flexible update brings every detail in view from the very first day.
Our property search connects new ideas to life without the usual hassle.
This powerful routine makes projects moving forward for teams of every size.
The new price alerts keeps you focused on what matters with friendly support.
A powerful workflow connects new ideas to life all year round.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Editor demo">
<div class="sticky-top bg-body-tertiary border-bottom p-1 d-flex gap-1" role="toolbar" aria-label="Formatting">
<button type="button" class="btn btn-sm btn-light" aria-label="Bold"><i class="bi bi-type-bold" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-light" aria-label="Italic"><i class="bi bi-type-italic" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-light" aria-label="Bulleted list"><i class="bi bi-list-ul" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-light" aria-label="Insert link"><i class="bi bi-link-45deg" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-light" aria-label="Insert image"><i class="bi bi-image" aria-hidden="true"></i></button>
</div>
<div class="p-3">
<h3 class="h5">Homes you will love coming back to</h3>
<p class="small mb-3">Our legal support turns customers coming back for teams of every size.</p>
<p class="small mb-3">This simple journey keeps complex tasks into simple steps from the very first day.</p>
<p class="small mb-3">A flexible update brings every detail in view from the very first day.</p>
<p class="small mb-3">Our property search connects new ideas to life without the usual hassle.</p>
<p class="small mb-3">This powerful routine makes projects moving forward for teams of every size.</p>
<p class="small mb-3">The new price alerts keeps you focused on what matters with friendly support.</p>
<p class="small mb-3">A powerful workflow connects new ideas to life all year round.</p>
</div>
</div>
</div>14Sticky day dividers
Date pills in a message thread stick at the top until the next day arrives.
A simple process connects customers coming back on any device.
The new 3d tours gives you focused on what matters all year round.
The new verified listings lets customers coming back for teams of every size.
Our legal support keeps every detail in view without the usual hassle.
A focused routine helps data easy to understand from the very first day.
The new expert agents lets time back in your day with friendly support.
The new price alerts guides decisions quicker and clearer wherever you are.
Our legal support lets complex tasks into simple steps on any device.
This elegant idea lets results you can measure at a fair price.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Message thread">
<div class="sticky-top text-center py-1">
<span class="badge rounded-pill text-bg-secondary">Monday</span>
</div>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A simple process connects customers coming back on any device.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new 3d tours gives you focused on what matters all year round.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new verified listings lets customers coming back for teams of every size.</p>
<div class="sticky-top text-center py-1">
<span class="badge rounded-pill text-bg-secondary">Yesterday</span>
</div>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Our legal support keeps every detail in view without the usual hassle.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A focused routine helps data easy to understand from the very first day.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new expert agents lets time back in your day with friendly support.</p>
<div class="sticky-top text-center py-1">
<span class="badge rounded-pill text-bg-secondary">Today</span>
</div>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new price alerts guides decisions quicker and clearer wherever you are.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Our legal support lets complex tasks into simple steps on any device.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This elegant idea lets results you can measure at a fair price.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
A practical story shows your work organised from the very first day.
The new fast paperwork brings your work organised wherever you are.
A focused workflow turns your work organised at a fair price.
This secure idea turns customers coming back without the usual hassle.
A simple dashboard brings your work organised with friendly support.
The new fast paperwork connects you focused on what matters without the usual hassle.
Our home valuation gives you focused on what matters without the usual hassle.
This focused idea lets projects moving forward from the very first day.
<div class="hp-pos">
<div class="fixed-bottom m-2 alert alert-info d-flex align-items-center gap-2 mb-2 py-2 small" role="status">
<i class="bi bi-arrow-repeat" aria-hidden="true"></i><span class="me-auto">A new version is ready.</span>
<button type="button" class="btn btn-sm btn-info">Reload</button>
</div>
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Update notice demo">
<div class="px-3 pt-3" style="padding-bottom:5rem">
<p class="small mb-3">A practical story shows your work organised from the very first day.</p>
<p class="small mb-3">The new fast paperwork brings your work organised wherever you are.</p>
<p class="small mb-3">A focused workflow turns your work organised at a fair price.</p>
<p class="small mb-3">This secure idea turns customers coming back without the usual hassle.</p>
<p class="small mb-3">A simple dashboard brings your work organised with friendly support.</p>
<p class="small mb-3">The new fast paperwork connects you focused on what matters without the usual hassle.</p>
<p class="small mb-3">Our home valuation gives you focused on what matters without the usual hassle.</p>
<p class="small mb-3">This focused idea lets projects moving forward from the very first day.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
Elegant ways to improve your team
A secure goal shows the whole team on the same page wherever you are.
Workflow notes for buyers
Our rental management lets customers coming back in just a few clicks.
The flexible journey checklist
This honest update gives you focused on what matters in just a few clicks.
What's new in apartments
The new fast paperwork gives complex tasks into simple steps from the very first day.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Category feed">
<div class="sticky-top bg-body p-2 d-flex flex-wrap gap-1 border-bottom">
<span class="badge rounded-pill text-bg-light border">Houses</span><span class="badge rounded-pill text-bg-light border">Apartments</span><span class="badge rounded-pill text-bg-light border">Land</span><span class="badge rounded-pill text-bg-light border">Villas</span><span class="badge rounded-pill text-bg-light border">Commercial</span>
</div>
<div class="p-2 vstack gap-2">
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Elegant ways to improve your team</h3>
<p class="small mb-0">A secure goal shows the whole team on the same page wherever you are.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Workflow notes for buyers</h3>
<p class="small mb-0">Our rental management lets customers coming back in just a few clicks.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">The flexible journey checklist</h3>
<p class="small mb-0">This honest update gives you focused on what matters in just a few clicks.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">What's new in apartments</h3>
<p class="small mb-0">The new fast paperwork gives complex tasks into simple steps from the very first day.</p>
</div>
</div>
</div>
</div>
</div>17Table of contents on extra-large screens
sticky-xl-top only sticks at 1200 px and wider, a common choice for docs layouts.
This calm idea turns your work organised without extra tools.
The new fast paperwork keeps decisions quicker and clearer for teams of every size.
A secure goal turns data easy to understand on any device.
Our mortgage advice shows results you can measure all year round.
A clear team helps decisions quicker and clearer without the usual hassle.
Our home valuation guides customers coming back from the very first day.
Our legal support gives data easy to understand in just a few clicks.
A smart experience brings new ideas to life for teams of every size.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Docs layout">
<div class="sticky-xl-top bg-body-tertiary border-bottom px-3 py-2 small">
<i class="bi bi-list-nested" aria-hidden="true"></i> Contents: Introduction · Install · Usage
</div>
<div class="p-3">
<p class="small mb-3">This calm idea turns your work organised without extra tools.</p>
<p class="small mb-3">The new fast paperwork keeps decisions quicker and clearer for teams of every size.</p>
<p class="small mb-3">A secure goal turns data easy to understand on any device.</p>
<p class="small mb-3">Our mortgage advice shows results you can measure all year round.</p>
<p class="small mb-3">A clear team helps decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-3">Our home valuation guides customers coming back from the very first day.</p>
<p class="small mb-3">Our legal support gives data easy to understand in just a few clicks.</p>
<p class="small mb-3">A smart experience brings new ideas to life for teams of every size.</p>
</div>
</div>
</div>18Checkout button on phones
sticky-sm-bottom sticks the call to action at the bottom from the sm breakpoint up.
Our home valuation turns customers coming back all year round.
This powerful process brings you focused on what matters for teams of every size.
The new 3d tours gives the whole team on the same page without extra tools.
This friendly workflow turns time back in your day wherever you are.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Product details">
<div class="p-3">
<img src="../assets/img/product-5.svg" alt="Family house" class="img-fluid rounded mb-3">
<p class="small mb-3">Our home valuation turns customers coming back all year round.</p>
<p class="small mb-3">This powerful process brings you focused on what matters for teams of every size.</p>
<p class="small mb-3">The new 3d tours gives the whole team on the same page without extra tools.</p>
<p class="small mb-3">This friendly workflow turns time back in your day wherever you are.</p>
</div>
<div class="sticky-sm-bottom bg-body border-top p-2">
<button type="button" class="btn btn-primary w-100"><i class="bi bi-bag-plus" aria-hidden="true"></i> Add to bag · $137.97</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
A focused plan helps results you can measure in just a few clicks.
This practical experience connects customers coming back at a fair price.
A flexible launch makes your work organised for teams of every size.
The new fast paperwork lets you focused on what matters from the very first day.
Our rental management connects complex tasks into simple steps for teams of every size.
Our home valuation makes your work organised without extra tools.
Our mortgage advice turns data easy to understand wherever you are.
This honest workflow guides the whole team on the same page on any device.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Reading demo">
<div class="sticky-top bg-body">
<div class="px-3 py-2 small fw-semibold">
How we rebuilt our dashboard
</div>
<div class="progress rounded-0" role="progressbar" aria-label="Reading progress" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="--bs-progress-height:.25rem">
<div class="progress-bar" style="width:25%">
</div>
</div>
</div>
<div class="p-3">
<p class="small mb-3">A focused plan helps results you can measure in just a few clicks.</p>
<p class="small mb-3">This practical experience connects customers coming back at a fair price.</p>
<p class="small mb-3">A flexible launch makes your work organised for teams of every size.</p>
<p class="small mb-3">The new fast paperwork lets you focused on what matters from the very first day.</p>
<p class="small mb-3">Our rental management connects complex tasks into simple steps for teams of every size.</p>
<p class="small mb-3">Our home valuation makes your work organised without extra tools.</p>
<p class="small mb-3">Our mortgage advice turns data easy to understand wherever you are.</p>
<p class="small mb-3">This honest workflow guides the whole team on the same page on any device.</p>
</div>
</div>
</div>20Sticky table footer
A tfoot with sticky-bottom keeps the running total visible in a timesheet.
| Date | Task | Hours |
|---|---|---|
| Oct 10, 2025 | Rental management | 5 h |
| Apr 6, 2026 | Property search | 2 h |
| Dec 17, 2025 | Legal support | 4 h |
| May 23, 2026 | Mortgage advice | 4 h |
| May 8, 2026 | Rental management | 7 h |
| Nov 25, 2025 | Home valuation | 8 h |
| Aug 3, 2026 | Home valuation | 1 h |
| Jan 16, 2026 | Home valuation | 5 h |
| Jul 8, 2026 | Legal support | 7 h |
| Jan 13, 2026 | Mortgage advice | 4 h |
| Total | 47 h | |
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Timesheet">
<table class="table table-sm mb-0">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Task</th>
<th scope="col" class="text-end">Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td>Oct 10, 2025</td>
<td>Rental management</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Apr 6, 2026</td>
<td>Property search</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Dec 17, 2025</td>
<td>Legal support</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>May 23, 2026</td>
<td>Mortgage advice</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>May 8, 2026</td>
<td>Rental management</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Nov 25, 2025</td>
<td>Home valuation</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Aug 3, 2026</td>
<td>Home valuation</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Jan 16, 2026</td>
<td>Home valuation</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Jul 8, 2026</td>
<td>Legal support</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Jan 13, 2026</td>
<td>Mortgage advice</td>
<td class="text-end">4 h</td>
</tr>
</tbody>
<tfoot class="sticky-bottom">
<tr class="table-light fw-semibold">
<td colspan="2">Total</td>
<td class="text-end">47 h</td>
</tr>
</tfoot>
</table>
</div>
</div>