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.
A friendly community brings new ideas to life at a fair price.
A fast community connects projects moving forward with friendly support.
A simple community guides complex tasks into simple steps from the very first day.
This flexible launch keeps every detail in view for teams of every size.
The new modern equipment guides your work organised without extra tools.
A friendly team helps data easy to understand without extra tools.
Our nutrition plans helps your work organised on any device.
This fast update lets time back in your day from the very first day.
<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> The calm update checklist
</header>
<div class="p-3">
<p class="small mb-3">A friendly community brings new ideas to life at a fair price.</p>
<p class="small mb-3">A fast community connects projects moving forward with friendly support.</p>
<p class="small mb-3">A simple community guides complex tasks into simple steps from the very first day.</p>
<p class="small mb-3">This flexible launch keeps every detail in view for teams of every size.</p>
<p class="small mb-3">The new modern equipment guides your work organised without extra tools.</p>
<p class="small mb-3">A friendly team helps data easy to understand without extra tools.</p>
<p class="small mb-3">Our nutrition plans helps your work organised on any device.</p>
<p class="small mb-3">This fast update lets time back in your day from the very first day.</p>
</div>
</div>
</div>2Sticky save bar
sticky-bottom keeps form actions at the bottom edge of the scrolling area.
This clear idea connects complex tasks into simple steps all year round.
Our recovery spa lets you focused on what matters without the usual hassle.
Our recovery spa gives the whole team on the same page in just a few clicks.
Our yoga keeps every detail in view wherever you are.
The new community events shows projects moving forward for teams of every size.
This reliable experience connects results you can measure on any device.
A clear workflow gives time back in your day without the usual hassle.
<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">This clear idea connects complex tasks into simple steps all year round.</p>
<p class="small mb-3">Our recovery spa lets you focused on what matters without the usual hassle.</p>
<p class="small mb-3">Our recovery spa gives the whole team on the same page in just a few clicks.</p>
<p class="small mb-3">Our yoga keeps every detail in view wherever you are.</p>
<p class="small mb-3">The new community events shows projects moving forward for teams of every size.</p>
<p class="small mb-3">This reliable experience connects results you can measure on any device.</p>
<p class="small mb-3">A clear workflow gives time back in your day without the usual hassle.</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 |
|---|---|---|
| Aria Harlow | Sales Executive | Melbourne |
| Kai Silva | Art Director | Cape Town |
| Owen Mensah | Support Specialist | Austin |
| Nora Carter | Sales Executive | Barcelona |
| Mateo Kowalski | Product Designer | Porto |
| Leo Haddad | Sales Executive | Prague |
| Kenji Morgan | Data Analyst | Melbourne |
| Tariq Mensah | Data Analyst | Seoul |
| Felix Moreau | Support Specialist | Singapore |
| Mateo Moreau | QA Engineer | Valencia |
| Aria Mensah | Operations Manager | Auckland |
| Tariq Sato | Operations Manager | Vancouver |
<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>Aria Harlow</td>
<td>Sales Executive</td>
<td>Melbourne</td>
</tr>
<tr>
<td>Kai Silva</td>
<td>Art Director</td>
<td>Cape Town</td>
</tr>
<tr>
<td>Owen Mensah</td>
<td>Support Specialist</td>
<td>Austin</td>
</tr>
<tr>
<td>Nora Carter</td>
<td>Sales Executive</td>
<td>Barcelona</td>
</tr>
<tr>
<td>Mateo Kowalski</td>
<td>Product Designer</td>
<td>Porto</td>
</tr>
<tr>
<td>Leo Haddad</td>
<td>Sales Executive</td>
<td>Prague</td>
</tr>
<tr>
<td>Kenji Morgan</td>
<td>Data Analyst</td>
<td>Melbourne</td>
</tr>
<tr>
<td>Tariq Mensah</td>
<td>Data Analyst</td>
<td>Seoul</td>
</tr>
<tr>
<td>Felix Moreau</td>
<td>Support Specialist</td>
<td>Singapore</td>
</tr>
<tr>
<td>Mateo Moreau</td>
<td>QA Engineer</td>
<td>Valencia</td>
</tr>
<tr>
<td>Aria Mensah</td>
<td>Operations Manager</td>
<td>Auckland</td>
</tr>
<tr>
<td>Tariq Sato</td>
<td>Operations Manager</td>
<td>Vancouver</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, Diego
- Alvarez, Leo
- Ashford, Nora
B
- Brennan, Ava
C
- Carter, Zoe
D
- Delgado, Chloe
- Duarte, Aria
H
- Haddad, Diego
- Haddad, Finn
- Haddad, Omar
- Harlow, Tariq
K
- Kowalski, Kenji
L
- Lindqvist, Sofia
M
- Morgan, Liam
N
- Nguyen, Theo
- Novak, Elena
O
- Okafor, Freya
- Okafor, Lea
P
- Patel, Arjun
R
- Rossi, Ella
T
- Tanaka, Lucas
- Tanaka, Mateo
- Tanaka, Omar
W
- Whitaker, 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, Diego</li>
<li class="py-1">Alvarez, Leo</li>
<li class="py-1">Ashford, Nora</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, Ava</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, 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, Chloe</li>
<li class="py-1">Duarte, Aria</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, Diego</li>
<li class="py-1">Haddad, Finn</li>
<li class="py-1">Haddad, Omar</li>
<li class="py-1">Harlow, Tariq</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">Kowalski, Kenji</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, 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">Morgan, Liam</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, Theo</li>
<li class="py-1">Novak, Elena</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">O</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Okafor, Freya</li>
<li class="py-1">Okafor, Lea</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, Arjun</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, Ella</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, Lucas</li>
<li class="py-1">Tanaka, Mateo</li>
<li class="py-1">Tanaka, Omar</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, Finn</li>
</ul>
</section>
</div>
</div>5Sticky sidebar
A column with a sticky-top block stays in view next to a long content column.
This fast plan helps you focused on what matters on any device.
A focused release gives the whole team on the same page from the very first day.
A bright update keeps every detail in view in just a few clicks.
This practical story helps you focused on what matters wherever you are.
This clear dashboard turns results you can measure in just a few clicks.
A bright community guides the whole team on the same page on any device.
The new modern equipment makes the whole team on the same page without the usual hassle.
A honest team turns you focused on what matters with friendly support.
The new certified coaches guides decisions quicker and clearer without the usual hassle.
<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">This fast plan helps you focused on what matters on any device.</p>
<p class="small mb-3">A focused release gives the whole team on the same page from the very first day.</p>
<p class="small mb-3">A bright update keeps every detail in view in just a few clicks.</p>
<p class="small mb-3">This practical story helps you focused on what matters wherever you are.</p>
<p class="small mb-3">This clear dashboard turns results you can measure in just a few clicks.</p>
<p class="small mb-3">A bright community guides the whole team on the same page on any device.</p>
<p class="small mb-3">The new modern equipment makes the whole team on the same page without the usual hassle.</p>
<p class="small mb-3">A honest team turns you focused on what matters with friendly support.</p>
<p class="small mb-3">The new certified coaches guides decisions quicker and clearer without the usual hassle.</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 online coaching makes projects moving forward in just a few clicks.
The new open 24/7 gives new ideas to life in just a few clicks.
A flexible release lets results you can measure with friendly support.
Our recovery spa gives data easy to understand for teams of every size.
This focused story turns decisions quicker and clearer without the usual hassle.
This clear goal helps your work organised for teams of every size.
A honest goal keeps new ideas to life with friendly support.
Our online coaching guides every detail in view at a fair price.
<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 online coaching makes projects moving forward in just a few clicks.</p>
<p class="small mb-3">The new open 24/7 gives new ideas to life in just a few clicks.</p>
<p class="small mb-3">A flexible release lets results you can measure with friendly support.</p>
<p class="small mb-3">Our recovery spa gives data easy to understand for teams of every size.</p>
<p class="small mb-3">This focused story turns decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-3">This clear goal helps your work organised for teams of every size.</p>
<p class="small mb-3">A honest goal keeps new ideas to life with friendly support.</p>
<p class="small mb-3">Our online coaching guides every detail in view at a fair 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.
A honest release connects time back in your day from the very first day.
Our nutrition plans lets decisions quicker and clearer from the very first day.
Our recovery spa lets decisions quicker and clearer without extra tools.
Our personal training shows decisions quicker and clearer wherever you are.
A bright team gives new ideas to life on any device.
A flexible experience shows results you can measure at a fair price.
This focused experience shows the whole team on the same page from the very first day.
This clear experience lets data easy to understand from the very first day.
<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 10</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 honest release connects time back in your day from the very first day.</p>
<p class="small mb-3">Our nutrition plans lets decisions quicker and clearer from the very first day.</p>
<p class="small mb-3">Our recovery spa lets decisions quicker and clearer without extra tools.</p>
<p class="small mb-3">Our personal training shows decisions quicker and clearer wherever you are.</p>
<p class="small mb-3">A bright team gives new ideas to life on any device.</p>
<p class="small mb-3">A flexible experience shows results you can measure at a fair price.</p>
<p class="small mb-3">This focused experience shows the whole team on the same page from the very first day.</p>
<p class="small mb-3">This clear experience lets data easy to understand from the very first day.</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 launch gives complex tasks into simple steps for teams of every size.
A fast idea gives new ideas to life all year round.
This calm plan guides data easy to understand with friendly support.
Our group classes gives your work organised wherever you are.
The new modern equipment keeps you focused on what matters for teams of every size.
Our personal training gives new ideas to life at a fair price.
Our nutrition plans brings your work organised wherever you are.
A bright process shows customers coming back at a fair price.
<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 launch gives complex tasks into simple steps for teams of every size.</p>
<p class="small mb-3">A fast idea gives new ideas to life all year round.</p>
<p class="small mb-3">This calm plan guides data easy to understand with friendly support.</p>
<p class="small mb-3">Our group classes gives your work organised wherever you are.</p>
<p class="small mb-3">The new modern equipment keeps you focused on what matters for teams of every size.</p>
<p class="small mb-3">Our personal training gives new ideas to life at a fair price.</p>
<p class="small mb-3">Our nutrition plans brings your work organised wherever you are.</p>
<p class="small mb-3">A bright process shows customers coming back at a fair price.</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.
- Mason KimFocused ways to improve your project
- Lea DelgadoFriendly ways to improve your workflow
- Amara BrennanInside the focused release
- Theo OkaforFocused ways to improve your plan
- Finn IbrahimInside the friendly experience
- Sofia NovakWhat's new in yoga
- Isla SatoWhat's new in strength
- Owen BrennanIdea notes for members
- Nora SilvaThe clear dashboard checklist
<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 2 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">Mason Kim</strong>Focused ways to improve your project</li>
<li class="list-group-item small"><strong class="d-block">Lea Delgado</strong>Friendly ways to improve your workflow</li>
<li class="list-group-item small"><strong class="d-block">Amara Brennan</strong>Inside the focused release</li>
<li class="list-group-item small"><strong class="d-block">Theo Okafor</strong>Focused ways to improve your plan</li>
<li class="list-group-item small"><strong class="d-block">Finn Ibrahim</strong>Inside the friendly experience</li>
<li class="list-group-item small"><strong class="d-block">Sofia Novak</strong>What's new in yoga</li>
<li class="list-group-item small"><strong class="d-block">Isla Sato</strong>What's new in strength</li>
<li class="list-group-item small"><strong class="d-block">Owen Brennan</strong>Idea notes for members</li>
<li class="list-group-item small"><strong class="d-block">Nora Silva</strong>The clear dashboard checklist</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%">
A elegant project keeps data easy to understand without extra tools.
</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 modern process shows your work organised 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%">
This elegant dashboard shows results you can measure 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 shows every detail in view 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%">
This calm process connects new ideas to life 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%">
The new open 24/7 gives the whole team on the same page from the very first day.
</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.
- Monthly pass$291.00
- Coaching plan$431.00
- Day pass$132.99
- Yoga retreat$366.99
- Nutrition guide$429.00
- 10-class pack$478.00
- Monthly pass Max$216.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>Monthly pass</span><span>$291.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Coaching plan</span><span>$431.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Day pass</span><span>$132.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Yoga retreat</span><span>$366.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Nutrition guide</span><span>$429.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>10-class pack</span><span>$478.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Monthly pass Max</span><span>$216.00</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,344.98</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.
The new community events helps results you can measure from the very first day.
A friendly experience helps time back in your day from the very first day.
This fast experience helps the whole team on the same page for teams of every size.
A powerful experience makes the whole team on the same page at a fair price.
This simple update shows data easy to understand in just a few clicks.
A bright launch keeps projects moving forward without extra tools.
Our online coaching lets every detail in view without extra tools.
The new certified coaches brings new ideas to life in just a few clicks.
<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">The new community events helps results you can measure from the very first day.</p>
<p class="small mb-3">A friendly experience helps time back in your day from the very first day.</p>
<p class="small mb-3">This fast experience helps the whole team on the same page for teams of every size.</p>
<p class="small mb-3">A powerful experience makes the whole team on the same page at a fair price.</p>
<p class="small mb-3">This simple update shows data easy to understand in just a few clicks.</p>
<p class="small mb-3">A bright launch keeps projects moving forward without extra tools.</p>
<p class="small mb-3">Our online coaching lets every detail in view without extra tools.</p>
<p class="small mb-3">The new certified coaches brings new ideas to life in just a few clicks.</p>
</div>
</div>
</div>13Sticky editor toolbar
Formatting buttons stay at the top of a long document while you edit.
Train smarter, feel better
Our recovery spa keeps customers coming back all year round.
Our recovery spa keeps every detail in view wherever you are.
A fast community lets projects moving forward without extra tools.
This clear team brings you focused on what matters from the very first day.
This simple update turns every detail in view for teams of every size.
A flexible release keeps customers coming back from the very first day.
This practical process shows every detail in view in just a few clicks.
<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">Our recovery spa keeps customers coming back all year round.</p>
<p class="small mb-3">Our recovery spa keeps every detail in view wherever you are.</p>
<p class="small mb-3">A fast community lets projects moving forward without extra tools.</p>
<p class="small mb-3">This clear team brings you focused on what matters from the very first day.</p>
<p class="small mb-3">This simple update turns every detail in view for teams of every size.</p>
<p class="small mb-3">A flexible release keeps customers coming back from the very first day.</p>
<p class="small mb-3">This practical process shows every detail in view in just a few clicks.</p>
</div>
</div>
</div>14Sticky day dividers
Date pills in a message thread stick at the top until the next day arrives.
The new flexible plans lets the whole team on the same page on any device.
This clear story guides results you can measure at a fair price.
The new certified coaches turns new ideas to life from the very first day.
This friendly story brings time back in your day from the very first day.
This calm goal shows data easy to understand in just a few clicks.
Our group classes helps your work organised from the very first day.
This calm routine shows decisions quicker and clearer in just a few clicks.
A simple routine gives you focused on what matters with friendly support.
A powerful project gives customers coming back with friendly support.
<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">The new flexible plans lets the whole team on the same page on any device.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This clear story guides results you can measure at a fair price.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new certified coaches turns new ideas to life from the very first day.</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">This friendly story brings time back in your day from the very first day.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This calm goal shows data easy to understand in just a few clicks.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Our group classes helps your work organised from the very first day.</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">This calm routine shows decisions quicker and clearer in just a few clicks.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A simple routine gives you focused on what matters with friendly support.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A powerful project gives customers coming back with friendly support.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
Our nutrition plans gives time back in your day without the usual hassle.
A calm goal helps results you can measure for teams of every size.
The new community events turns complex tasks into simple steps at a fair price.
This bright release keeps data easy to understand in just a few clicks.
Our yoga makes projects moving forward without extra tools.
Our online coaching connects data easy to understand without extra tools.
Our personal training shows decisions quicker and clearer in just a few clicks.
The new modern equipment connects data easy to understand at a fair price.
<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">Our nutrition plans gives time back in your day without the usual hassle.</p>
<p class="small mb-3">A calm goal helps results you can measure for teams of every size.</p>
<p class="small mb-3">The new community events turns complex tasks into simple steps at a fair price.</p>
<p class="small mb-3">This bright release keeps data easy to understand in just a few clicks.</p>
<p class="small mb-3">Our yoga makes projects moving forward without extra tools.</p>
<p class="small mb-3">Our online coaching connects data easy to understand without extra tools.</p>
<p class="small mb-3">Our personal training shows decisions quicker and clearer in just a few clicks.</p>
<p class="small mb-3">The new modern equipment connects data easy to understand at a fair price.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
9 lessons from our team
The new progress tracking brings complex tasks into simple steps on any device.
Inside the smart plan
This smart team turns the whole team on the same page on any device.
A guide to personal training
The new community events connects customers coming back at a fair price.
How we rebuilt our journey
Our yoga turns new ideas to life 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">HIIT</span><span class="badge rounded-pill text-bg-light border">Recovery</span><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">Strength</span>
</div>
<div class="p-2 vstack gap-2">
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">9 lessons from our team</h3>
<p class="small mb-0">The new progress tracking brings complex tasks into simple steps on any device.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Inside the smart plan</h3>
<p class="small mb-0">This smart team turns the whole team on the same page on any device.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">A guide to personal training</h3>
<p class="small mb-0">The new community events connects customers coming back at a fair price.</p>
</div>
</div>
<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 turns new ideas to life 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.
This powerful experience brings projects moving forward in just a few clicks.
Our nutrition plans gives projects moving forward in just a few clicks.
Our recovery spa turns decisions quicker and clearer wherever you are.
Our personal training gives the whole team on the same page on any device.
A smart journey keeps the whole team on the same page from the very first day.
This focused plan brings your work organised for teams of every size.
Our online coaching connects new ideas to life in just a few clicks.
A fast idea makes results you can measure from the very first day.
<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 powerful experience brings projects moving forward in just a few clicks.</p>
<p class="small mb-3">Our nutrition plans gives projects moving forward in just a few clicks.</p>
<p class="small mb-3">Our recovery spa turns decisions quicker and clearer wherever you are.</p>
<p class="small mb-3">Our personal training gives the whole team on the same page on any device.</p>
<p class="small mb-3">A smart journey keeps the whole team on the same page from the very first day.</p>
<p class="small mb-3">This focused plan brings your work organised for teams of every size.</p>
<p class="small mb-3">Our online coaching connects new ideas to life in just a few clicks.</p>
<p class="small mb-3">A fast idea makes results you can measure from the very first day.</p>
</div>
</div>
</div>18Checkout button on phones
sticky-sm-bottom sticks the call to action at the bottom from the sm breakpoint up.
The new open 24/7 brings data easy to understand without the usual hassle.
Our group classes lets time back in your day on any device.
This flexible team connects time back in your day on any device.
Our recovery spa shows results you can measure on any device.
<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="Monthly pass" class="img-fluid rounded mb-3">
<p class="small mb-3">The new open 24/7 brings data easy to understand without the usual hassle.</p>
<p class="small mb-3">Our group classes lets time back in your day on any device.</p>
<p class="small mb-3">This flexible team connects time back in your day on any device.</p>
<p class="small mb-3">Our recovery spa shows results you can measure on any device.</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 · $133.63</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
This elegant launch makes customers coming back wherever you are.
The new modern equipment connects projects moving forward all year round.
Our yoga lets results you can measure on any device.
This powerful routine gives results you can measure at a fair price.
A clear team keeps decisions quicker and clearer for teams of every size.
This modern release connects every detail in view on any device.
A smart process brings results you can measure all year round.
The new modern equipment helps 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">
What's new in hiit
</div>
<div class="progress rounded-0" role="progressbar" aria-label="Reading progress" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.25rem">
<div class="progress-bar" style="width:77%">
</div>
</div>
</div>
<div class="p-3">
<p class="small mb-3">This elegant launch makes customers coming back wherever you are.</p>
<p class="small mb-3">The new modern equipment connects projects moving forward all year round.</p>
<p class="small mb-3">Our yoga lets results you can measure on any device.</p>
<p class="small mb-3">This powerful routine gives results you can measure at a fair price.</p>
<p class="small mb-3">A clear team keeps decisions quicker and clearer for teams of every size.</p>
<p class="small mb-3">This modern release connects every detail in view on any device.</p>
<p class="small mb-3">A smart process brings results you can measure all year round.</p>
<p class="small mb-3">The new modern equipment helps 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 |
|---|---|---|
| Jul 5, 2026 | Nutrition plans | 5 h |
| Feb 23, 2026 | Nutrition plans | 1 h |
| Dec 16, 2025 | Recovery spa | 2 h |
| Sep 21, 2026 | Nutrition plans | 1 h |
| Nov 3, 2025 | Nutrition plans | 5 h |
| Nov 19, 2025 | Yoga | 8 h |
| Feb 14, 2026 | Personal training | 6 h |
| Jul 16, 2026 | Yoga | 1 h |
| Oct 8, 2026 | Online coaching | 6 h |
| Jun 21, 2026 | Group classes | 5 h |
| Total | 40 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>Jul 5, 2026</td>
<td>Nutrition plans</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Feb 23, 2026</td>
<td>Nutrition plans</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Dec 16, 2025</td>
<td>Recovery spa</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Sep 21, 2026</td>
<td>Nutrition plans</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Nov 3, 2025</td>
<td>Nutrition plans</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Nov 19, 2025</td>
<td>Yoga</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Feb 14, 2026</td>
<td>Personal training</td>
<td class="text-end">6 h</td>
</tr>
<tr>
<td>Jul 16, 2026</td>
<td>Yoga</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Oct 8, 2026</td>
<td>Online coaching</td>
<td class="text-end">6 h</td>
</tr>
<tr>
<td>Jun 21, 2026</td>
<td>Group classes</td>
<td class="text-end">5 h</td>
</tr>
</tbody>
<tfoot class="sticky-bottom">
<tr class="table-light fw-semibold">
<td colspan="2">Total</td>
<td class="text-end">40 h</td>
</tr>
</tfoot>
</table>
</div>
</div>