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 reliable update makes data easy to understand at a fair price.
The new hands-on workshops turns results you can measure at a fair price.
A honest goal guides data easy to understand for teams of every size.
The new hands-on workshops brings your work organised without the usual hassle.
A elegant dashboard guides customers coming back from the very first day.
A practical journey turns data easy to understand with friendly support.
Our venue booking turns the whole team on the same page without the usual hassle.
This flexible workflow makes new ideas to life in just a few clicks.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Sticky header demo">
<header class="sticky-top bg-page border-b px-4 py-2 font-semibold">
<i class="bi bi-journal-text" aria-hidden="true"></i> What's new in webinar
</header>
<div class="p-4">
<p class="small mb-4">A reliable update makes data easy to understand at a fair price.</p>
<p class="small mb-4">The new hands-on workshops turns results you can measure at a fair price.</p>
<p class="small mb-4">A honest goal guides data easy to understand for teams of every size.</p>
<p class="small mb-4">The new hands-on workshops brings your work organised without the usual hassle.</p>
<p class="small mb-4">A elegant dashboard guides customers coming back from the very first day.</p>
<p class="small mb-4">A practical journey turns data easy to understand with friendly support.</p>
<p class="small mb-4">Our venue booking turns the whole team on the same page without the usual hassle.</p>
<p class="small mb-4">This flexible workflow makes new ideas to life in just a few clicks.</p>
</div>
</div>
</div>2Sticky save bar
sticky-bottom keeps form actions at the bottom edge of the scrolling area.
Our networking app makes data easy to understand at a fair price.
The new mobile agenda keeps new ideas to life all year round.
A simple launch shows decisions quicker and clearer for teams of every size.
A simple idea lets the whole team on the same page for teams of every size.
The new mobile agenda gives time back in your day all year round.
This clear idea brings decisions quicker and clearer without extra tools.
This reliable team connects results you can measure 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-4">
<p class="small mb-4">Our networking app makes data easy to understand at a fair price.</p>
<p class="small mb-4">The new mobile agenda keeps new ideas to life all year round.</p>
<p class="small mb-4">A simple launch shows decisions quicker and clearer for teams of every size.</p>
<p class="small mb-4">A simple idea lets the whole team on the same page for teams of every size.</p>
<p class="small mb-4">The new mobile agenda gives time back in your day all year round.</p>
<p class="small mb-4">This clear idea brings decisions quicker and clearer without extra tools.</p>
<p class="small mb-4">This reliable team connects results you can measure at a fair price.</p>
</div>
<div class="sticky-bottom bg-surface-3 border-t p-2 flex justify-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 |
|---|---|---|
| Arjun Moreau | HR Partner | Dublin |
| Samir Carter | Project Manager | Toronto |
| Nora Tanaka | Project Manager | Dublin |
| Nora Haddad | Product Designer | Edinburgh |
| Lea Duarte | Customer Success | Toronto |
| Omar Mensah | Marketing Lead | Prague |
| Arjun Whitaker | Frontend Engineer | Kyoto |
| Ethan Harlow | Product Designer | Melbourne |
| Ella Nguyen | Data Analyst | Austin |
| Samir Nguyen | Customer Success | Auckland |
| Kai Larsen | Product Designer | Porto |
| Mia Fischer | Marketing Lead | Austin |
<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>Arjun Moreau</td>
<td>HR Partner</td>
<td>Dublin</td>
</tr>
<tr>
<td>Samir Carter</td>
<td>Project Manager</td>
<td>Toronto</td>
</tr>
<tr>
<td>Nora Tanaka</td>
<td>Project Manager</td>
<td>Dublin</td>
</tr>
<tr>
<td>Nora Haddad</td>
<td>Product Designer</td>
<td>Edinburgh</td>
</tr>
<tr>
<td>Lea Duarte</td>
<td>Customer Success</td>
<td>Toronto</td>
</tr>
<tr>
<td>Omar Mensah</td>
<td>Marketing Lead</td>
<td>Prague</td>
</tr>
<tr>
<td>Arjun Whitaker</td>
<td>Frontend Engineer</td>
<td>Kyoto</td>
</tr>
<tr>
<td>Ethan Harlow</td>
<td>Product Designer</td>
<td>Melbourne</td>
</tr>
<tr>
<td>Ella Nguyen</td>
<td>Data Analyst</td>
<td>Austin</td>
</tr>
<tr>
<td>Samir Nguyen</td>
<td>Customer Success</td>
<td>Auckland</td>
</tr>
<tr>
<td>Kai Larsen</td>
<td>Product Designer</td>
<td>Porto</td>
</tr>
<tr>
<td>Mia Fischer</td>
<td>Marketing Lead</td>
<td>Austin</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, Jonah
- Ashford, Owen
- Ashford, Tariq
C
- Carter, Elena
- Carter, Jonah
- Carter, Samir
D
- Delgado, Theo
F
- Fischer, Arjun
- Fischer, Nadia
H
- Haddad, Lucas
- Haddad, Nadia
- Harlow, Elena
- Hughes, Kai
I
- Ibrahim, Ella
K
- Kim, Luna
- Kim, Omar
L
- Lindqvist, Kai
- Lindqvist, Priya
N
- Nguyen, Ethan
O
- Okafor, Samir
- Ortega, Kenji
S
- Sato, Ava
T
- Tanaka, Kenji
V
- Varga, Freya
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Contacts">
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">A</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Alvarez, Jonah</li>
<li class="py-1">Ashford, Owen</li>
<li class="py-1">Ashford, Tariq</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">C</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Carter, Elena</li>
<li class="py-1">Carter, Jonah</li>
<li class="py-1">Carter, Samir</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">D</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Delgado, Theo</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">F</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Fischer, Arjun</li>
<li class="py-1">Fischer, Nadia</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">H</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Haddad, Lucas</li>
<li class="py-1">Haddad, Nadia</li>
<li class="py-1">Harlow, Elena</li>
<li class="py-1">Hughes, Kai</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">I</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Ibrahim, Ella</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">K</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Kim, Luna</li>
<li class="py-1">Kim, Omar</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">L</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Lindqvist, Kai</li>
<li class="py-1">Lindqvist, Priya</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">N</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Nguyen, Ethan</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">O</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Okafor, Samir</li>
<li class="py-1">Ortega, Kenji</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">S</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Sato, Ava</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">T</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Tanaka, Kenji</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">V</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Varga, Freya</li>
</ul>
</section>
</div>
</div>5Sticky sidebar
A column with a sticky-top block stays in view next to a long content column.
Our ticketing guides every detail in view without extra tools.
Our speaker management helps projects moving forward from the very first day.
A modern project keeps you focused on what matters all year round.
This smart team helps results you can measure from the very first day.
A practical launch gives projects moving forward in just a few clicks.
The new networking lounges brings results you can measure with friendly support.
A secure update guides projects moving forward for teams of every size.
A clear release gives every detail in view all year round.
A elegant plan lets you focused on what matters on any device.
<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-e">
<nav class="sticky-top p-2 small" aria-label="On this page">
<div class="font-semibold mb-1">
On this page
</div>
<a class="block" href="#">Overview</a><a class="block" href="#">Setup</a><a class="block" href="#">FAQ</a>
</nav>
</div>
<div class="col-8 p-4">
<p class="small mb-4">Our ticketing guides every detail in view without extra tools.</p>
<p class="small mb-4">Our speaker management helps projects moving forward from the very first day.</p>
<p class="small mb-4">A modern project keeps you focused on what matters all year round.</p>
<p class="small mb-4">This smart team helps results you can measure from the very first day.</p>
<p class="small mb-4">A practical launch gives projects moving forward in just a few clicks.</p>
<p class="small mb-4">The new networking lounges brings results you can measure with friendly support.</p>
<p class="small mb-4">A secure update guides projects moving forward for teams of every size.</p>
<p class="small mb-4">A clear release gives every detail in view all year round.</p>
<p class="small mb-4">A elegant plan lets you focused on what matters on any device.</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.
This modern community guides your work organised without extra tools.
A powerful team helps time back in your day without the usual hassle.
A smart goal keeps customers coming back all year round.
A practical plan lets complex tasks into simple steps for teams of every size.
Our venue booking lets results you can measure without the usual hassle.
A clear release guides projects moving forward without extra tools.
This bright plan brings the whole team on the same page without extra tools.
This focused routine gives new ideas to life without the usual hassle.
<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-4 py-2 small">
<i class="bi bi-phone-fill" aria-hidden="true"></i> Sticky from md, normal flow on small screens
</div>
<div class="p-4">
<p class="small mb-4">This modern community guides your work organised without extra tools.</p>
<p class="small mb-4">A powerful team helps time back in your day without the usual hassle.</p>
<p class="small mb-4">A smart goal keeps customers coming back all year round.</p>
<p class="small mb-4">A practical plan lets complex tasks into simple steps for teams of every size.</p>
<p class="small mb-4">Our venue booking lets results you can measure without the usual hassle.</p>
<p class="small mb-4">A clear release guides projects moving forward without extra tools.</p>
<p class="small mb-4">This bright plan brings the whole team on the same page without extra tools.</p>
<p class="small mb-4">This focused routine gives new ideas to life without the usual hassle.</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 smart plan brings the whole team on the same page without extra tools.
This elegant community makes every detail in view without extra tools.
A practical dashboard gives decisions quicker and clearer for teams of every size.
This friendly update brings results you can measure with friendly support.
This secure update shows data easy to understand on any device.
A focused dashboard shows results you can measure for teams of every size.
The new certificates brings you focused on what matters on any device.
A secure community shows results you can measure with friendly support.
<div class="hp-pos">
<nav class="navbar fixed-top bg-page border-b px-4 py-2" aria-label="Demo">
<span class="navbar-brand mb-0 h6"><i class="bi bi-lightning-charge-fill" aria-hidden="true"></i> Brand name 20</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-4 pb-4" style="padding-top:4rem">
<p class="small mb-4">A smart plan brings the whole team on the same page without extra tools.</p>
<p class="small mb-4">This elegant community makes every detail in view without extra tools.</p>
<p class="small mb-4">A practical dashboard gives decisions quicker and clearer for teams of every size.</p>
<p class="small mb-4">This friendly update brings results you can measure with friendly support.</p>
<p class="small mb-4">This secure update shows data easy to understand on any device.</p>
<p class="small mb-4">A focused dashboard shows results you can measure for teams of every size.</p>
<p class="small mb-4">The new certificates brings you focused on what matters on any device.</p>
<p class="small mb-4">A secure community shows results you can measure 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.
The new hands-on workshops keeps results you can measure wherever you are.
The new certificates brings the whole team on the same page at a fair price.
A honest team lets every detail in view without the usual hassle.
This modern goal lets the whole team on the same page wherever you are.
Our sponsorship gives complex tasks into simple steps on any device.
Our sponsorship turns projects moving forward from the very first day.
Our networking app brings you focused on what matters on any device.
This simple launch lets your work organised in just a few clicks.
<div class="hp-pos">
<nav class="fixed-bottom flex bg-page border-t" aria-label="App">
<a href="#" class="flex-auto text-center small py-2 no-underline text-primary" aria-current="page"><i class="bi bi-house-fill" aria-hidden="true"></i><span class="block">Home</span></a><a href="#" class="flex-auto text-center small py-2 no-underline text-muted"><i class="bi bi-search" aria-hidden="true"></i><span class="block">Search</span></a><a href="#" class="flex-auto text-center small py-2 no-underline text-muted"><i class="bi bi-heart-fill" aria-hidden="true"></i><span class="block">Saved</span></a><a href="#" class="flex-auto text-center small py-2 no-underline text-muted"><i class="bi bi-person-fill" aria-hidden="true"></i><span class="block">Profile</span></a>
</nav>
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Mobile tab bar demo">
<div class="px-4 pt-4" style="padding-bottom:4.5rem">
<p class="small mb-4">The new hands-on workshops keeps results you can measure wherever you are.</p>
<p class="small mb-4">The new certificates brings the whole team on the same page at a fair price.</p>
<p class="small mb-4">A honest team lets every detail in view without the usual hassle.</p>
<p class="small mb-4">This modern goal lets the whole team on the same page wherever you are.</p>
<p class="small mb-4">Our sponsorship gives complex tasks into simple steps on any device.</p>
<p class="small mb-4">Our sponsorship turns projects moving forward from the very first day.</p>
<p class="small mb-4">Our networking app brings you focused on what matters on any device.</p>
<p class="small mb-4">This simple launch lets your work organised in just a few clicks.</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.
- Ivy Silva6 lessons from our plan
- Samir SatoThe fast goal checklist
- Omar Varga6 lessons from our journey
- Isla OrtegaThe flexible workflow checklist
- Arjun Ortega8 lessons from our release
- Isla RossiLaunch notes for attendees
- Jonah CarterExperience notes for attendees
- Kai FischerHow we rebuilt our dashboard
- Kai MorganWhat's new in panel
<div class="hp-pos">
<div class="fixed-top text-bg-dark px-4 py-2 small font-semibold">
<i class="bi bi-inbox-fill" aria-hidden="true"></i> Inbox
</div>
<div class="fixed-bottom bg-surface-3 border-t px-4 py-1 small text-muted">
Synced yesterday
</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="block">Ivy Silva</strong>6 lessons from our plan</li>
<li class="list-group-item small"><strong class="block">Samir Sato</strong>The fast goal checklist</li>
<li class="list-group-item small"><strong class="block">Omar Varga</strong>6 lessons from our journey</li>
<li class="list-group-item small"><strong class="block">Isla Ortega</strong>The flexible workflow checklist</li>
<li class="list-group-item small"><strong class="block">Arjun Ortega</strong>8 lessons from our release</li>
<li class="list-group-item small"><strong class="block">Isla Rossi</strong>Launch notes for attendees</li>
<li class="list-group-item small"><strong class="block">Jonah Carter</strong>Experience notes for attendees</li>
<li class="list-group-item small"><strong class="block">Kai Fischer</strong>How we rebuilt our dashboard</li>
<li class="list-group-item small"><strong class="block">Kai Morgan</strong>What's new in panel</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-4">
<div class="flex mb-2">
<div class="px-4 py-2 rounded-lg small bg-surface-3" style="max-width:75%">
This focused team brings time back in your day without extra tools.
</div>
</div>
<div class="flex justify-end mb-2">
<div class="px-4 py-2 rounded-lg small text-bg-primary" style="max-width:75%">
Our ticketing turns every detail in view from the very first day.
</div>
</div>
<div class="flex mb-2">
<div class="px-4 py-2 rounded-lg small bg-surface-3" style="max-width:75%">
A modern workflow helps complex tasks into simple steps with friendly support.
</div>
</div>
<div class="flex justify-end mb-2">
<div class="px-4 py-2 rounded-lg small text-bg-primary" style="max-width:75%">
The new networking lounges keeps results you can measure on any device.
</div>
</div>
<div class="flex mb-2">
<div class="px-4 py-2 rounded-lg small bg-surface-3" style="max-width:75%">
A focused story connects decisions quicker and clearer without extra tools.
</div>
</div>
<div class="flex justify-end mb-2">
<div class="px-4 py-2 rounded-lg small text-bg-primary" style="max-width:75%">
This elegant idea helps projects moving forward from the very first day.
</div>
</div>
</div>
<form class="sticky-bottom bg-page border-t p-2 flex gap-2">
<label class="sr-only" for="hp-msg-1234">Message</label>
<input class="form-control form-control-sm" id="hp-msg-1234" type="text" placeholder="Write a message">
<button type="submit" class="btn btn-sm btn-primary" aria-label="Send"><i class="bi bi-send-fill" aria-hidden="true"></i></button>
</form>
</div>
</div>11Sticky cart total
The order total sticks to the bottom of a long basket list.
- Virtual pass$95.00
- Group bundle$184.00
- Early bird pass$386.99
- VIP pass$153.50
- Full access pass$189.00
- Workshop ticket$96.50
- Virtual pass II$457.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 flex justify-between small"><span>Virtual pass</span><span>$95.00</span></li>
<li class="list-group-item flex justify-between small"><span>Group bundle</span><span>$184.00</span></li>
<li class="list-group-item flex justify-between small"><span>Early bird pass</span><span>$386.99</span></li>
<li class="list-group-item flex justify-between small"><span>VIP pass</span><span>$153.50</span></li>
<li class="list-group-item flex justify-between small"><span>Full access pass</span><span>$189.00</span></li>
<li class="list-group-item flex justify-between small"><span>Workshop ticket</span><span>$96.50</span></li>
<li class="list-group-item flex justify-between small"><span>Virtual pass II</span><span>$457.99</span></li>
</ul>
<div class="sticky-bottom text-bg-light border-t flex justify-between items-center px-4 py-2">
<strong>Total $1,562.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 recorded sessions keeps results you can measure for teams of every size.
Our ticketing turns customers coming back at a fair price.
The new networking lounges lets you focused on what matters on any device.
This clear project keeps you focused on what matters from the very first day.
Our sponsorship guides you focused on what matters without the usual hassle.
Our live streaming guides results you can measure at a fair price.
A modern routine shows projects moving forward from the very first day.
A smart release helps time back in your day on any device.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Product filters">
<div class="sticky-lg-top bg-page border-b p-2 flex gap-2 items-center">
<label class="small whitespace-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-4">
<p class="small mb-4">The new recorded sessions keeps results you can measure for teams of every size.</p>
<p class="small mb-4">Our ticketing turns customers coming back at a fair price.</p>
<p class="small mb-4">The new networking lounges lets you focused on what matters on any device.</p>
<p class="small mb-4">This clear project keeps you focused on what matters from the very first day.</p>
<p class="small mb-4">Our sponsorship guides you focused on what matters without the usual hassle.</p>
<p class="small mb-4">Our live streaming guides results you can measure at a fair price.</p>
<p class="small mb-4">A modern routine shows projects moving forward from the very first day.</p>
<p class="small mb-4">A smart release helps time back in your day on any device.</p>
</div>
</div>
</div>13Sticky editor toolbar
Formatting buttons stay at the top of a long document while you edit.
Experiences people talk about
Our ticketing shows decisions quicker and clearer at a fair price.
Our sponsorship lets every detail in view with friendly support.
The new hands-on workshops makes every detail in view without extra tools.
A simple dashboard connects your work organised at a fair price.
Our ticketing connects complex tasks into simple steps all year round.
Our live streaming brings your work organised for teams of every size.
The new mobile agenda gives 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="Editor demo">
<div class="sticky-top bg-surface-3 border-b p-1 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-fill" aria-hidden="true"></i></button>
</div>
<div class="p-4">
<h3 class="h5">Experiences people talk about</h3>
<p class="small mb-4">Our ticketing shows decisions quicker and clearer at a fair price.</p>
<p class="small mb-4">Our sponsorship lets every detail in view with friendly support.</p>
<p class="small mb-4">The new hands-on workshops makes every detail in view without extra tools.</p>
<p class="small mb-4">A simple dashboard connects your work organised at a fair price.</p>
<p class="small mb-4">Our ticketing connects complex tasks into simple steps all year round.</p>
<p class="small mb-4">Our live streaming brings your work organised for teams of every size.</p>
<p class="small mb-4">The new mobile agenda gives time back in your day from the very first day.</p>
</div>
</div>
</div>14Sticky day dividers
Date pills in a message thread stick at the top until the next day arrives.
A modern plan lets new ideas to life all year round.
A reliable workflow turns your work organised at a fair price.
This fast routine shows decisions quicker and clearer wherever you are.
The new mobile agenda keeps decisions quicker and clearer for teams of every size.
A modern project makes projects moving forward from the very first day.
Our ticketing connects complex tasks into simple steps with friendly support.
The new networking lounges makes every detail in view without the usual hassle.
This powerful team helps projects moving forward for teams of every size.
A fast idea lets the whole team on the same page in just a few clicks.
<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-full text-bg-secondary">Monday</span>
</div>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">A modern plan lets new ideas to life all year round.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">A reliable workflow turns your work organised at a fair price.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">This fast routine shows decisions quicker and clearer wherever you are.</p>
<div class="sticky-top text-center py-1">
<span class="badge rounded-full text-bg-secondary">Yesterday</span>
</div>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">The new mobile agenda keeps decisions quicker and clearer for teams of every size.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">A modern project makes projects moving forward from the very first day.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">Our ticketing connects complex tasks into simple steps with friendly support.</p>
<div class="sticky-top text-center py-1">
<span class="badge rounded-full text-bg-secondary">Today</span>
</div>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">The new networking lounges makes every detail in view without the usual hassle.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">This powerful team helps projects moving forward for teams of every size.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">A fast idea lets the whole team on the same page in just a few clicks.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
A fast story keeps the whole team on the same page on any device.
A elegant workflow brings complex tasks into simple steps all year round.
This flexible update keeps projects moving forward at a fair price.
Our speaker management lets you focused on what matters for teams of every size.
A modern experience connects you focused on what matters from the very first day.
A powerful goal brings new ideas to life without extra tools.
The new hands-on workshops brings every detail in view at a fair price.
A bright experience connects your work organised without the usual hassle.
<div class="hp-pos">
<div class="fixed-bottom m-2 alert alert-info flex 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-4 pt-4" style="padding-bottom:5rem">
<p class="small mb-4">A fast story keeps the whole team on the same page on any device.</p>
<p class="small mb-4">A elegant workflow brings complex tasks into simple steps all year round.</p>
<p class="small mb-4">This flexible update keeps projects moving forward at a fair price.</p>
<p class="small mb-4">Our speaker management lets you focused on what matters for teams of every size.</p>
<p class="small mb-4">A modern experience connects you focused on what matters from the very first day.</p>
<p class="small mb-4">A powerful goal brings new ideas to life without extra tools.</p>
<p class="small mb-4">The new hands-on workshops brings every detail in view at a fair price.</p>
<p class="small mb-4">A bright experience connects your work organised without the usual hassle.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
A guide to ticketing
Our venue booking connects new ideas to life at a fair price.
5 lessons from our experience
Our speaker management connects results you can measure on any device.
Plan notes for attendees
Our ticketing lets every detail in view wherever you are.
How we rebuilt our update
Our venue booking guides customers coming back for teams of every size.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Category feed">
<div class="sticky-top bg-page p-2 flex flex-wrap gap-1 border-b">
<span class="badge rounded-full text-bg-light border">Workshop</span><span class="badge rounded-full text-bg-light border">Webinar</span><span class="badge rounded-full text-bg-light border">Panel</span><span class="badge rounded-full text-bg-light border">Meetup</span><span class="badge rounded-full text-bg-light border">Keynote</span>
</div>
<div class="p-2 vstack gap-2">
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">A guide to ticketing</h3>
<p class="small mb-0">Our venue booking connects new ideas to life at a fair price.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">5 lessons from our experience</h3>
<p class="small mb-0">Our speaker management connects results you can measure on any device.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Plan notes for attendees</h3>
<p class="small mb-0">Our ticketing lets every detail in view wherever you are.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">How we rebuilt our update</h3>
<p class="small mb-0">Our venue booking guides customers coming back for teams of every size.</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.
A secure dashboard lets your work organised in just a few clicks.
The new recorded sessions helps customers coming back from the very first day.
A calm dashboard connects you focused on what matters from the very first day.
Our networking app makes time back in your day with friendly support.
This reliable launch brings new ideas to life at a fair price.
The new mobile agenda brings new ideas to life all year round.
Our speaker management shows your work organised on any device.
This honest plan makes results you can measure on any device.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Docs layout">
<div class="sticky-xl-top bg-surface-3 border-b px-4 py-2 small">
<i class="bi bi-list-nested" aria-hidden="true"></i> Contents: Introduction · Install · Usage
</div>
<div class="p-4">
<p class="small mb-4">A secure dashboard lets your work organised in just a few clicks.</p>
<p class="small mb-4">The new recorded sessions helps customers coming back from the very first day.</p>
<p class="small mb-4">A calm dashboard connects you focused on what matters from the very first day.</p>
<p class="small mb-4">Our networking app makes time back in your day with friendly support.</p>
<p class="small mb-4">This reliable launch brings new ideas to life at a fair price.</p>
<p class="small mb-4">The new mobile agenda brings new ideas to life all year round.</p>
<p class="small mb-4">Our speaker management shows your work organised on any device.</p>
<p class="small mb-4">This honest plan makes results you can measure on any device.</p>
</div>
</div>
</div>18Checkout button on phones
sticky-sm-bottom sticks the call to action at the bottom from the sm breakpoint up.
A honest journey guides decisions quicker and clearer from the very first day.
A elegant goal brings data easy to understand without extra tools.
A elegant project lets time back in your day for teams of every size.
A flexible journey helps results you can measure for teams of every size.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Product details">
<div class="p-4">
<img src="../assets/img/product-5.svg" alt="Full access pass" class="img-fluid rounded-md mb-4">
<p class="small mb-4">A honest journey guides decisions quicker and clearer from the very first day.</p>
<p class="small mb-4">A elegant goal brings data easy to understand without extra tools.</p>
<p class="small mb-4">A elegant project lets time back in your day for teams of every size.</p>
<p class="small mb-4">A flexible journey helps results you can measure for teams of every size.</p>
</div>
<div class="sticky-sm-bottom bg-page border-t p-2">
<button type="button" class="btn btn-primary w-full"><i class="bi bi-bag-plus-fill" aria-hidden="true"></i> Add to bag · $87.83</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
The new hands-on workshops lets decisions quicker and clearer at a fair price.
The new certificates keeps the whole team on the same page for teams of every size.
Our speaker management lets data easy to understand without extra tools.
This fast process makes your work organised with friendly support.
The new networking lounges makes projects moving forward all year round.
A simple routine makes every detail in view from the very first day.
A clear community shows decisions quicker and clearer all year round.
This modern update helps results you can measure 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-page">
<div class="px-4 py-2 small font-semibold">
Release notes for attendees
</div>
<div class="progress rounded-none" role="progressbar" aria-label="Reading progress" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.25rem">
<div class="progress-bar" style="width:76%">
</div>
</div>
</div>
<div class="p-4">
<p class="small mb-4">The new hands-on workshops lets decisions quicker and clearer at a fair price.</p>
<p class="small mb-4">The new certificates keeps the whole team on the same page for teams of every size.</p>
<p class="small mb-4">Our speaker management lets data easy to understand without extra tools.</p>
<p class="small mb-4">This fast process makes your work organised with friendly support.</p>
<p class="small mb-4">The new networking lounges makes projects moving forward all year round.</p>
<p class="small mb-4">A simple routine makes every detail in view from the very first day.</p>
<p class="small mb-4">A clear community shows decisions quicker and clearer all year round.</p>
<p class="small mb-4">This modern update helps results you can measure 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 |
|---|---|---|
| Apr 20, 2026 | Ticketing | 4 h |
| Apr 14, 2026 | Networking app | 8 h |
| Jun 15, 2026 | Ticketing | 3 h |
| Jul 25, 2026 | Speaker management | 4 h |
| Nov 25, 2025 | Ticketing | 7 h |
| Mar 25, 2026 | Ticketing | 1 h |
| Jan 5, 2026 | Venue booking | 7 h |
| Oct 13, 2025 | Ticketing | 4 h |
| Jan 23, 2026 | Sponsorship | 2 h |
| Oct 28, 2025 | Live streaming | 2 h |
| Total | 42 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>Apr 20, 2026</td>
<td>Ticketing</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Apr 14, 2026</td>
<td>Networking app</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Jun 15, 2026</td>
<td>Ticketing</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Jul 25, 2026</td>
<td>Speaker management</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Nov 25, 2025</td>
<td>Ticketing</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Mar 25, 2026</td>
<td>Ticketing</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Jan 5, 2026</td>
<td>Venue booking</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Oct 13, 2025</td>
<td>Ticketing</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Jan 23, 2026</td>
<td>Sponsorship</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Oct 28, 2025</td>
<td>Live streaming</td>
<td class="text-end">2 h</td>
</tr>
</tbody>
<tfoot class="sticky-bottom">
<tr class="table-light font-semibold">
<td colspan="2">Total</td>
<td class="text-end">42 h</td>
</tr>
</tfoot>
</table>
</div>
</div>