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 open 24/7 shows the whole team on the same page at a fair price.
A fast process turns your work organised wherever you are.
Our recovery spa lets every detail in view without extra tools.
The new open 24/7 lets projects moving forward all year round.
A secure team brings every detail in view without extra tools.
The new certified coaches connects the whole team on the same page without extra tools.
The new community events turns the whole team on the same page all year round.
The new community events connects every detail in view 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> Focused ways to improve your launch
</header>
<div class="p-3">
<p class="small mb-3">The new open 24/7 shows the whole team on the same page at a fair price.</p>
<p class="small mb-3">A fast process turns your work organised wherever you are.</p>
<p class="small mb-3">Our recovery spa lets every detail in view without extra tools.</p>
<p class="small mb-3">The new open 24/7 lets projects moving forward all year round.</p>
<p class="small mb-3">A secure team brings every detail in view without extra tools.</p>
<p class="small mb-3">The new certified coaches connects the whole team on the same page without extra tools.</p>
<p class="small mb-3">The new community events turns the whole team on the same page all year round.</p>
<p class="small mb-3">The new community events connects every detail in view on any device.</p>
</div>
</div>
</div>2Sticky save bar
sticky-bottom keeps form actions at the bottom edge of the scrolling area.
The new modern equipment makes time back in your day all year round.
This simple release shows new ideas to life without the usual hassle.
Our yoga shows customers coming back at a fair price.
Our personal training connects your work organised in just a few clicks.
Our nutrition plans shows data easy to understand on any device.
Our group classes turns your work organised for teams of every size.
A fast dashboard makes results you can measure without extra tools.
<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">The new modern equipment makes time back in your day all year round.</p>
<p class="small mb-3">This simple release shows new ideas to life without the usual hassle.</p>
<p class="small mb-3">Our yoga shows customers coming back at a fair price.</p>
<p class="small mb-3">Our personal training connects your work organised in just a few clicks.</p>
<p class="small mb-3">Our nutrition plans shows data easy to understand on any device.</p>
<p class="small mb-3">Our group classes turns your work organised for teams of every size.</p>
<p class="small mb-3">A fast dashboard makes results you can measure without extra tools.</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 |
|---|---|---|
| Lea Fischer | Backend Engineer | Montreal |
| Samir Haddad | Sales Executive | Barcelona |
| Hana Brennan | HR Partner | Austin |
| Freya Kowalski | HR Partner | Melbourne |
| Omar Silva | Sales Executive | Cape Town |
| Sofia Harlow | Finance Lead | Kyoto |
| Diego Rossi | Finance Lead | Auckland |
| Owen Quinn | Operations Manager | Valencia |
| Noah Silva | Content Writer | Toronto |
| Zoe Okafor | Backend Engineer | Valencia |
| Kenji Nguyen | Project Manager | Copenhagen |
| Amara Rossi | Support Specialist | Valencia |
<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>Lea Fischer</td>
<td>Backend Engineer</td>
<td>Montreal</td>
</tr>
<tr>
<td>Samir Haddad</td>
<td>Sales Executive</td>
<td>Barcelona</td>
</tr>
<tr>
<td>Hana Brennan</td>
<td>HR Partner</td>
<td>Austin</td>
</tr>
<tr>
<td>Freya Kowalski</td>
<td>HR Partner</td>
<td>Melbourne</td>
</tr>
<tr>
<td>Omar Silva</td>
<td>Sales Executive</td>
<td>Cape Town</td>
</tr>
<tr>
<td>Sofia Harlow</td>
<td>Finance Lead</td>
<td>Kyoto</td>
</tr>
<tr>
<td>Diego Rossi</td>
<td>Finance Lead</td>
<td>Auckland</td>
</tr>
<tr>
<td>Owen Quinn</td>
<td>Operations Manager</td>
<td>Valencia</td>
</tr>
<tr>
<td>Noah Silva</td>
<td>Content Writer</td>
<td>Toronto</td>
</tr>
<tr>
<td>Zoe Okafor</td>
<td>Backend Engineer</td>
<td>Valencia</td>
</tr>
<tr>
<td>Kenji Nguyen</td>
<td>Project Manager</td>
<td>Copenhagen</td>
</tr>
<tr>
<td>Amara Rossi</td>
<td>Support Specialist</td>
<td>Valencia</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, Mia
B
- Brennan, Mason
C
- Carter, Omar
- Carter, Zoe
D
- Delgado, Ravi
- Duarte, Luna
F
- Fischer, Ethan
- Fischer, Lea
H
- Hughes, Arjun
- Hughes, Mia
I
- Ibrahim, Amara
- Ibrahim, Liam
- Ibrahim, Owen
L
- Larsen, Lea
- Lindqvist, Ivy
M
- Mensah, Leo
- Moreau, Chloe
- Morgan, Zoe
O
- Okafor, Zoe
- Ortega, Mateo
S
- Sato, Amara
- Silva, Aria
V
- Varga, Maya
W
- Whitaker, Amara
<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, Mia</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, Mason</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, Omar</li>
<li class="py-1">Carter, Zoe</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, Ravi</li>
<li class="py-1">Duarte, Luna</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, Ethan</li>
<li class="py-1">Fischer, Lea</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">Hughes, Arjun</li>
<li class="py-1">Hughes, Mia</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, Amara</li>
<li class="py-1">Ibrahim, Liam</li>
<li class="py-1">Ibrahim, Owen</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, Lea</li>
<li class="py-1">Lindqvist, Ivy</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, Leo</li>
<li class="py-1">Moreau, Chloe</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">O</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Okafor, Zoe</li>
<li class="py-1">Ortega, Mateo</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, Amara</li>
<li class="py-1">Silva, Aria</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, Maya</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, Amara</li>
</ul>
</section>
</div>
</div>5Sticky sidebar
A column with a sticky-top block stays in view next to a long content column.
The new open 24/7 makes projects moving forward without extra tools.
The new certified coaches gives you focused on what matters wherever you are.
The new certified coaches turns time back in your day wherever you are.
The new community events lets decisions quicker and clearer without the usual hassle.
Our personal training brings the whole team on the same page without extra tools.
This powerful team makes every detail in view in just a few clicks.
Our nutrition plans lets your work organised at a fair price.
Our recovery spa brings new ideas to life at a fair price.
Our group classes turns projects moving forward in just a few clicks.
<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">The new open 24/7 makes projects moving forward without extra tools.</p>
<p class="small mb-3">The new certified coaches gives you focused on what matters wherever you are.</p>
<p class="small mb-3">The new certified coaches turns time back in your day wherever you are.</p>
<p class="small mb-3">The new community events lets decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-3">Our personal training brings the whole team on the same page without extra tools.</p>
<p class="small mb-3">This powerful team makes every detail in view in just a few clicks.</p>
<p class="small mb-3">Our nutrition plans lets your work organised at a fair price.</p>
<p class="small mb-3">Our recovery spa brings new ideas to life at a fair price.</p>
<p class="small mb-3">Our group classes turns projects moving forward in just a few clicks.</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.
A elegant experience guides results you can measure without extra tools.
This practical process makes complex tasks into simple steps from the very first day.
This elegant experience helps the whole team on the same page on any device.
Our personal training brings new ideas to life without extra tools.
The new flexible plans keeps customers coming back for teams of every size.
Our group classes shows the whole team on the same page on any device.
Our recovery spa connects your work organised for teams of every size.
This friendly process shows time back in your day on any device.
<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">A elegant experience guides results you can measure without extra tools.</p>
<p class="small mb-3">This practical process makes complex tasks into simple steps from the very first day.</p>
<p class="small mb-3">This elegant experience helps the whole team on the same page on any device.</p>
<p class="small mb-3">Our personal training brings new ideas to life without extra tools.</p>
<p class="small mb-3">The new flexible plans keeps customers coming back for teams of every size.</p>
<p class="small mb-3">Our group classes shows the whole team on the same page on any device.</p>
<p class="small mb-3">Our recovery spa connects your work organised for teams of every size.</p>
<p class="small mb-3">This friendly process shows time back in your day on any device.</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.
A secure idea makes every detail in view at a fair price.
This simple routine lets data easy to understand in just a few clicks.
A calm team gives customers coming back all year round.
A elegant routine gives customers coming back all year round.
The new open 24/7 guides projects moving forward with friendly support.
This focused process guides you focused on what matters for teams of every size.
The new open 24/7 gives customers coming back all year round.
This powerful journey guides time back in your day in just a few clicks.
<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 18</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">A secure idea makes every detail in view at a fair price.</p>
<p class="small mb-3">This simple routine lets data easy to understand in just a few clicks.</p>
<p class="small mb-3">A calm team gives customers coming back all year round.</p>
<p class="small mb-3">A elegant routine gives customers coming back all year round.</p>
<p class="small mb-3">The new open 24/7 guides projects moving forward with friendly support.</p>
<p class="small mb-3">This focused process guides you focused on what matters for teams of every size.</p>
<p class="small mb-3">The new open 24/7 gives customers coming back all year round.</p>
<p class="small mb-3">This powerful journey guides time back in your day in just a few clicks.</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.
The new community events helps new ideas to life at a fair price.
Our personal training makes new ideas to life on any device.
The new community events gives you focused on what matters without the usual hassle.
The new modern equipment lets projects moving forward without the usual hassle.
This practical workflow gives you focused on what matters with friendly support.
A honest idea gives complex tasks into simple steps without the usual hassle.
A fast release connects data easy to understand all year round.
This friendly routine connects time back in your day all year round.
<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">The new community events helps new ideas to life at a fair price.</p>
<p class="small mb-3">Our personal training makes new ideas to life on any device.</p>
<p class="small mb-3">The new community events gives you focused on what matters without the usual hassle.</p>
<p class="small mb-3">The new modern equipment lets projects moving forward without the usual hassle.</p>
<p class="small mb-3">This practical workflow gives you focused on what matters with friendly support.</p>
<p class="small mb-3">A honest idea gives complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-3">A fast release connects data easy to understand all year round.</p>
<p class="small mb-3">This friendly routine connects time back in your day all year round.</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.
- Tariq KimRoutine notes for members
- Nadia FischerThe practical story checklist
- Amara BrennanHow we rebuilt our process
- Hana DuarteThe clear workflow checklist
- Mia MensahThe calm workflow checklist
- Elena HarlowThe powerful process checklist
- Theo IbrahimIdea notes for members
- Lea KowalskiThe powerful workflow checklist
- Hana VargaA guide to personal training
<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 15 hours 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">Tariq Kim</strong>Routine notes for members</li>
<li class="list-group-item small"><strong class="d-block">Nadia Fischer</strong>The practical story checklist</li>
<li class="list-group-item small"><strong class="d-block">Amara Brennan</strong>How we rebuilt our process</li>
<li class="list-group-item small"><strong class="d-block">Hana Duarte</strong>The clear workflow checklist</li>
<li class="list-group-item small"><strong class="d-block">Mia Mensah</strong>The calm workflow checklist</li>
<li class="list-group-item small"><strong class="d-block">Elena Harlow</strong>The powerful process checklist</li>
<li class="list-group-item small"><strong class="d-block">Theo Ibrahim</strong>Idea notes for members</li>
<li class="list-group-item small"><strong class="d-block">Lea Kowalski</strong>The powerful workflow checklist</li>
<li class="list-group-item small"><strong class="d-block">Hana Varga</strong>A guide to personal training</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 certified coaches keeps the whole team on the same page on any device.
</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 bright launch brings results you can measure in just a few clicks.
</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 nutrition plans gives your work organised from the very first day.
</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 group classes gives decisions quicker and clearer without extra tools.
</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 recovery spa keeps new ideas to life all year round.
</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 nutrition plans brings complex tasks into simple steps all year round.
</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.
- Yoga retreat$349.99
- Nutrition guide$279.50
- 10-class pack$244.00
- Monthly pass$272.50
- Day pass$182.99
- Coaching plan$189.50
- Yoga retreat II$137.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>Yoga retreat</span><span>$349.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Nutrition guide</span><span>$279.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>10-class pack</span><span>$244.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Monthly pass</span><span>$272.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Day pass</span><span>$182.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Coaching plan</span><span>$189.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Yoga retreat II</span><span>$137.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 $1,656.47</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.
This elegant story lets time back in your day from the very first day.
Our personal training turns complex tasks into simple steps with friendly support.
This friendly plan turns complex tasks into simple steps in just a few clicks.
This modern plan makes results you can measure with friendly support.
The new flexible plans helps the whole team on the same page wherever you are.
Our recovery spa guides you focused on what matters on any device.
Our recovery spa makes data easy to understand from the very first day.
Our recovery spa keeps time back in your day all year round.
<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">This elegant story lets time back in your day from the very first day.</p>
<p class="small mb-3">Our personal training turns complex tasks into simple steps with friendly support.</p>
<p class="small mb-3">This friendly plan turns complex tasks into simple steps in just a few clicks.</p>
<p class="small mb-3">This modern plan makes results you can measure with friendly support.</p>
<p class="small mb-3">The new flexible plans helps the whole team on the same page wherever you are.</p>
<p class="small mb-3">Our recovery spa guides you focused on what matters on any device.</p>
<p class="small mb-3">Our recovery spa makes data easy to understand from the very first day.</p>
<p class="small mb-3">Our recovery spa keeps time back in your day all year round.</p>
</div>
</div>
</div>13Sticky editor toolbar
Formatting buttons stay at the top of a long document while you edit.
Train smarter, feel better
The new progress tracking guides projects moving forward on any device.
This practical workflow connects the whole team on the same page wherever you are.
This honest goal guides decisions quicker and clearer without extra tools.
The new community events lets customers coming back with friendly support.
Our yoga helps you focused on what matters from the very first day.
Our nutrition plans connects your work organised from the very first day.
Our nutrition plans turns the whole team on the same page wherever you are.
<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">Train smarter, feel better</h3>
<p class="small mb-3">The new progress tracking guides projects moving forward on any device.</p>
<p class="small mb-3">This practical workflow connects the whole team on the same page wherever you are.</p>
<p class="small mb-3">This honest goal guides decisions quicker and clearer without extra tools.</p>
<p class="small mb-3">The new community events lets customers coming back with friendly support.</p>
<p class="small mb-3">Our yoga helps you focused on what matters from the very first day.</p>
<p class="small mb-3">Our nutrition plans connects your work organised from the very first day.</p>
<p class="small mb-3">Our nutrition plans turns the whole team on the same page wherever you are.</p>
</div>
</div>
</div>14Sticky day dividers
Date pills in a message thread stick at the top until the next day arrives.
This secure workflow connects data easy to understand all year round.
A calm launch helps your work organised wherever you are.
The new modern equipment shows new ideas to life on any device.
The new community events helps your work organised for teams of every size.
Our personal training turns results you can measure without the usual hassle.
This smart process shows time back in your day at a fair price.
The new progress tracking guides time back in your day all year round.
Our yoga keeps complex tasks into simple steps with friendly support.
Our online coaching shows your work organised without the usual hassle.
<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">This secure workflow connects data easy to understand all year round.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A calm launch helps your work organised wherever you are.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new modern equipment shows new ideas to life on any device.</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">The new community events helps your work organised for teams of every size.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Our personal training turns results you can measure without the usual hassle.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This smart process shows time back in your day at a fair price.</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 progress tracking guides time back in your day all year round.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Our yoga keeps complex tasks into simple steps with friendly support.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Our online coaching shows your work organised without the usual hassle.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
The new certified coaches connects time back in your day on any device.
Our personal training turns new ideas to life for teams of every size.
This elegant project keeps results you can measure without extra tools.
This clear process keeps customers coming back without the usual hassle.
This reliable dashboard turns complex tasks into simple steps from the very first day.
Our online coaching shows results you can measure from the very first day.
Our personal training lets the whole team on the same page without the usual hassle.
This fast experience guides data easy to understand in just a few clicks.
<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">The new certified coaches connects time back in your day on any device.</p>
<p class="small mb-3">Our personal training turns new ideas to life for teams of every size.</p>
<p class="small mb-3">This elegant project keeps results you can measure without extra tools.</p>
<p class="small mb-3">This clear process keeps customers coming back without the usual hassle.</p>
<p class="small mb-3">This reliable dashboard turns complex tasks into simple steps from the very first day.</p>
<p class="small mb-3">Our online coaching shows results you can measure from the very first day.</p>
<p class="small mb-3">Our personal training lets the whole team on the same page without the usual hassle.</p>
<p class="small mb-3">This fast experience guides data easy to understand in just a few clicks.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
How we rebuilt our journey
Our yoga makes time back in your day with friendly support.
A guide to group classes
Our personal training gives data easy to understand all year round.
A guide to nutrition plans
The new progress tracking guides every detail in view at a fair price.
A guide to nutrition plans
The new modern equipment turns time back in your day with friendly support.
<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">Cardio</span><span class="badge rounded-pill text-bg-light border">Yoga</span><span class="badge rounded-pill text-bg-light border">Recovery</span><span class="badge rounded-pill text-bg-light border">Strength</span><span class="badge rounded-pill text-bg-light border">HIIT</span>
</div>
<div class="p-2 vstack gap-2">
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">How we rebuilt our journey</h3>
<p class="small mb-0">Our yoga makes time back in your day with friendly support.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">A guide to group classes</h3>
<p class="small mb-0">Our personal training gives data easy to understand all year round.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">A guide to nutrition plans</h3>
<p class="small mb-0">The new progress tracking guides every detail in view at a fair price.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">A guide to nutrition plans</h3>
<p class="small mb-0">The new modern equipment turns time back in your day with friendly support.</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.
Our group classes brings complex tasks into simple steps on any device.
Our group classes connects results you can measure for teams of every size.
A honest update turns results you can measure on any device.
A calm update turns customers coming back from the very first day.
The new modern equipment shows decisions quicker and clearer without extra tools.
This clear dashboard gives the whole team on the same page without extra tools.
A secure journey helps every detail in view wherever you are.
A flexible project turns every detail in view wherever you are.
<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">Our group classes brings complex tasks into simple steps on any device.</p>
<p class="small mb-3">Our group classes connects results you can measure for teams of every size.</p>
<p class="small mb-3">A honest update turns results you can measure on any device.</p>
<p class="small mb-3">A calm update turns customers coming back from the very first day.</p>
<p class="small mb-3">The new modern equipment shows decisions quicker and clearer without extra tools.</p>
<p class="small mb-3">This clear dashboard gives the whole team on the same page without extra tools.</p>
<p class="small mb-3">A secure journey helps every detail in view wherever you are.</p>
<p class="small mb-3">A flexible project turns every detail in view wherever you are.</p>
</div>
</div>
</div>18Checkout button on phones
sticky-sm-bottom sticks the call to action at the bottom from the sm breakpoint up.
This powerful idea shows customers coming back on any device.
The new certified coaches helps complex tasks into simple steps with friendly support.
The new certified coaches lets your work organised at a fair price.
Our personal training helps the whole team on the same page at a fair price.
<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="Nutrition guide" class="img-fluid rounded mb-3">
<p class="small mb-3">This powerful idea shows customers coming back on any device.</p>
<p class="small mb-3">The new certified coaches helps complex tasks into simple steps with friendly support.</p>
<p class="small mb-3">The new certified coaches lets your work organised at a fair price.</p>
<p class="small mb-3">Our personal training helps the whole team on the same page at a fair price.</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 · $74.99</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
The new flexible plans gives complex tasks into simple steps for teams of every size.
The new open 24/7 connects every detail in view in just a few clicks.
Our online coaching brings you focused on what matters from the very first day.
The new flexible plans makes you focused on what matters without extra tools.
The new modern equipment helps new ideas to life on any device.
This flexible community makes projects moving forward with friendly support.
Our nutrition plans keeps you focused on what matters all year round.
A fast dashboard guides you focused on what matters without extra tools.
<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">
The clear plan checklist
</div>
<div class="progress rounded-0" role="progressbar" aria-label="Reading progress" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.25rem">
<div class="progress-bar" style="width:32%">
</div>
</div>
</div>
<div class="p-3">
<p class="small mb-3">The new flexible plans gives complex tasks into simple steps for teams of every size.</p>
<p class="small mb-3">The new open 24/7 connects every detail in view in just a few clicks.</p>
<p class="small mb-3">Our online coaching brings you focused on what matters from the very first day.</p>
<p class="small mb-3">The new flexible plans makes you focused on what matters without extra tools.</p>
<p class="small mb-3">The new modern equipment helps new ideas to life on any device.</p>
<p class="small mb-3">This flexible community makes projects moving forward with friendly support.</p>
<p class="small mb-3">Our nutrition plans keeps you focused on what matters all year round.</p>
<p class="small mb-3">A fast dashboard guides you focused on what matters without extra tools.</p>
</div>
</div>
</div>20Sticky table footer
A tfoot with sticky-bottom keeps the running total visible in a timesheet.
| Date | Task | Hours |
|---|---|---|
| Feb 21, 2026 | Yoga | 4 h |
| Feb 21, 2026 | Group classes | 3 h |
| Apr 8, 2026 | Group classes | 4 h |
| Jul 25, 2026 | Group classes | 8 h |
| May 24, 2026 | Recovery spa | 5 h |
| Jul 8, 2026 | Personal training | 7 h |
| Jun 14, 2026 | Group classes | 7 h |
| Jan 22, 2026 | Online coaching | 5 h |
| Nov 13, 2025 | Nutrition plans | 2 h |
| Jul 28, 2026 | Nutrition plans | 8 h |
| Total | 53 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>Feb 21, 2026</td>
<td>Yoga</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Feb 21, 2026</td>
<td>Group classes</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Apr 8, 2026</td>
<td>Group classes</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Jul 25, 2026</td>
<td>Group classes</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>May 24, 2026</td>
<td>Recovery spa</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Jul 8, 2026</td>
<td>Personal training</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Jun 14, 2026</td>
<td>Group classes</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Jan 22, 2026</td>
<td>Online coaching</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Nov 13, 2025</td>
<td>Nutrition plans</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Jul 28, 2026</td>
<td>Nutrition plans</td>
<td class="text-end">8 h</td>
</tr>
</tbody>
<tfoot class="sticky-bottom">
<tr class="table-light fw-semibold">
<td colspan="2">Total</td>
<td class="text-end">53 h</td>
</tr>
</tfoot>
</table>
</div>
</div>