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 honest release lets projects moving forward all year round.
This simple community turns data easy to understand without the usual hassle.
The new hands-on projects gives decisions quicker and clearer wherever you are.
The new mobile learning gives customers coming back on any device.
Our certificates brings time back in your day on any device.
Our certificates keeps the whole team on the same page from the very first day.
Our career coaching brings the whole team on the same page without extra tools.
The new hands-on projects keeps new ideas to life with friendly support.
<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> 3 lessons from our story
</header>
<div class="p-3">
<p class="small mb-3">A honest release lets projects moving forward all year round.</p>
<p class="small mb-3">This simple community turns data easy to understand without the usual hassle.</p>
<p class="small mb-3">The new hands-on projects gives decisions quicker and clearer wherever you are.</p>
<p class="small mb-3">The new mobile learning gives customers coming back on any device.</p>
<p class="small mb-3">Our certificates brings time back in your day on any device.</p>
<p class="small mb-3">Our certificates keeps the whole team on the same page from the very first day.</p>
<p class="small mb-3">Our career coaching brings the whole team on the same page without extra tools.</p>
<p class="small mb-3">The new hands-on projects keeps new ideas to life with friendly support.</p>
</div>
</div>
</div>2Sticky save bar
sticky-bottom keeps form actions at the bottom edge of the scrolling area.
A fast plan helps every detail in view in just a few clicks.
A bright release keeps the whole team on the same page for teams of every size.
This focused workflow guides new ideas to life in just a few clicks.
The new mobile learning shows complex tasks into simple steps at a fair price.
The new mobile learning gives customers coming back from the very first day.
Our certificates gives complex tasks into simple steps without extra tools.
The new community forum shows you focused on what matters for teams of every size.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Sticky save bar demo">
<div class="p-3">
<p class="small mb-3">A fast plan helps every detail in view in just a few clicks.</p>
<p class="small mb-3">A bright release keeps the whole team on the same page for teams of every size.</p>
<p class="small mb-3">This focused workflow guides new ideas to life in just a few clicks.</p>
<p class="small mb-3">The new mobile learning shows complex tasks into simple steps at a fair price.</p>
<p class="small mb-3">The new mobile learning gives customers coming back from the very first day.</p>
<p class="small mb-3">Our certificates gives complex tasks into simple steps without extra tools.</p>
<p class="small mb-3">The new community forum shows you focused on what matters for teams of every size.</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 |
|---|---|---|
| Diego Sato | Backend Engineer | Auckland |
| Chloe Duarte | HR Partner | Montreal |
| Elena Silva | Data Analyst | Montreal |
| Mason Mensah | QA Engineer | Porto |
| Lucas Delgado | Content Writer | Kyoto |
| Maya Fischer | Product Designer | Denver |
| Omar Quinn | Sales Executive | Melbourne |
| Isla Kowalski | Sales Executive | Auckland |
| Ivy Kim | Data Analyst | Melbourne |
| Diego Tanaka | QA Engineer | Lisbon |
| Leo Silva | Support Specialist | Porto |
| Elena Novak | QA Engineer | Kyoto |
<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>Diego Sato</td>
<td>Backend Engineer</td>
<td>Auckland</td>
</tr>
<tr>
<td>Chloe Duarte</td>
<td>HR Partner</td>
<td>Montreal</td>
</tr>
<tr>
<td>Elena Silva</td>
<td>Data Analyst</td>
<td>Montreal</td>
</tr>
<tr>
<td>Mason Mensah</td>
<td>QA Engineer</td>
<td>Porto</td>
</tr>
<tr>
<td>Lucas Delgado</td>
<td>Content Writer</td>
<td>Kyoto</td>
</tr>
<tr>
<td>Maya Fischer</td>
<td>Product Designer</td>
<td>Denver</td>
</tr>
<tr>
<td>Omar Quinn</td>
<td>Sales Executive</td>
<td>Melbourne</td>
</tr>
<tr>
<td>Isla Kowalski</td>
<td>Sales Executive</td>
<td>Auckland</td>
</tr>
<tr>
<td>Ivy Kim</td>
<td>Data Analyst</td>
<td>Melbourne</td>
</tr>
<tr>
<td>Diego Tanaka</td>
<td>QA Engineer</td>
<td>Lisbon</td>
</tr>
<tr>
<td>Leo Silva</td>
<td>Support Specialist</td>
<td>Porto</td>
</tr>
<tr>
<td>Elena Novak</td>
<td>QA Engineer</td>
<td>Kyoto</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.
B
- Brennan, Chloe
D
- Duarte, Nora
H
- Haddad, Leo
- Haddad, Mia
- Haddad, Owen
- Harlow, Ethan
- Harlow, Maya
- Hughes, Lucas
K
- Kim, Finn
- Kim, Lea
L
- Larsen, Ella
- Larsen, Noah
- Lindqvist, Finn
M
- Moreau, Ruby
- Morgan, Hana
N
- Nguyen, Lucas
- Novak, Lucas
- Novak, Mateo
O
- Okafor, Ava
P
- Patel, Finn
Q
- Quinn, Diego
T
- Tanaka, Nora
V
- Varga, Ravi
W
- Whitaker, Chloe
<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">B</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Brennan, Chloe</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">D</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Duarte, Nora</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, Leo</li>
<li class="py-1">Haddad, Mia</li>
<li class="py-1">Haddad, Owen</li>
<li class="py-1">Harlow, Ethan</li>
<li class="py-1">Harlow, Maya</li>
<li class="py-1">Hughes, Lucas</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">K</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Kim, Finn</li>
<li class="py-1">Kim, Lea</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, Ella</li>
<li class="py-1">Larsen, Noah</li>
<li class="py-1">Lindqvist, Finn</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">Moreau, Ruby</li>
<li class="py-1">Morgan, Hana</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, Lucas</li>
<li class="py-1">Novak, Lucas</li>
<li class="py-1">Novak, Mateo</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, Ava</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, Finn</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">Q</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Quinn, Diego</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, Nora</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, Ravi</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, Chloe</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 quizzes brings you focused on what matters on any device.
This elegant process keeps new ideas to life all year round.
A honest routine connects you focused on what matters from the very first day.
Our career coaching brings your work organised from the very first day.
The new mobile learning guides customers coming back without extra tools.
Our study groups guides data easy to understand in just a few clicks.
This honest community guides your work organised in just a few clicks.
A bright team helps results you can measure for teams of every size.
The new expert mentors helps data easy to understand with friendly support.
<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 quizzes brings you focused on what matters on any device.</p>
<p class="small mb-3">This elegant process keeps new ideas to life all year round.</p>
<p class="small mb-3">A honest routine connects you focused on what matters from the very first day.</p>
<p class="small mb-3">Our career coaching brings your work organised from the very first day.</p>
<p class="small mb-3">The new mobile learning guides customers coming back without extra tools.</p>
<p class="small mb-3">Our study groups guides data easy to understand in just a few clicks.</p>
<p class="small mb-3">This honest community guides your work organised in just a few clicks.</p>
<p class="small mb-3">A bright team helps results you can measure for teams of every size.</p>
<p class="small mb-3">The new expert mentors helps data easy to understand with friendly support.</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.
The new hands-on projects guides customers coming back all year round.
Our online courses keeps results you can measure on any device.
This honest journey brings data easy to understand for teams of every size.
This bright plan keeps complex tasks into simple steps in just a few clicks.
This modern goal brings every detail in view without the usual hassle.
A flexible experience keeps complex tasks into simple steps in just a few clicks.
This honest journey shows data easy to understand without the usual hassle.
The new mobile learning shows decisions quicker and clearer in just a few clicks.
<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-fill" aria-hidden="true"></i> Sticky from md, normal flow on small screens
</div>
<div class="p-3">
<p class="small mb-3">The new hands-on projects guides customers coming back all year round.</p>
<p class="small mb-3">Our online courses keeps results you can measure on any device.</p>
<p class="small mb-3">This honest journey brings data easy to understand for teams of every size.</p>
<p class="small mb-3">This bright plan keeps complex tasks into simple steps in just a few clicks.</p>
<p class="small mb-3">This modern goal brings every detail in view without the usual hassle.</p>
<p class="small mb-3">A flexible experience keeps complex tasks into simple steps in just a few clicks.</p>
<p class="small mb-3">This honest journey shows data easy to understand without the usual hassle.</p>
<p class="small mb-3">The new mobile learning shows decisions quicker and clearer in just a few clicks.</p>
</div>
</div>
</div>7Fixed-top navbar
fixed-top pins a navbar to the top edge; the frame acts as the viewport, so the bar stays inside the example.
This elegant experience turns complex tasks into simple steps on any device.
A simple update brings projects moving forward wherever you are.
The new community forum connects projects moving forward on any device.
Our online courses makes every detail in view in just a few clicks.
The new lifetime access keeps complex tasks into simple steps without the usual hassle.
The new expert mentors turns you focused on what matters at a fair price.
This clear process brings projects moving forward without the usual hassle.
The new hands-on projects helps results you can measure without the usual hassle.
<div class="hp-pos">
<nav class="navbar fixed-top bg-body border-bottom px-3 py-2" aria-label="Demo">
<span class="navbar-brand mb-0 h6"><i class="bi bi-lightning-charge-fill" aria-hidden="true"></i> Brand name 7</span>
<button type="button" class="btn btn-sm btn-outline-primary">Sign up</button>
</nav>
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Fixed navbar demo">
<div class="px-3 pb-3" style="padding-top:4rem">
<p class="small mb-3">This elegant experience turns complex tasks into simple steps on any device.</p>
<p class="small mb-3">A simple update brings projects moving forward wherever you are.</p>
<p class="small mb-3">The new community forum connects projects moving forward on any device.</p>
<p class="small mb-3">Our online courses makes every detail in view in just a few clicks.</p>
<p class="small mb-3">The new lifetime access keeps complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-3">The new expert mentors turns you focused on what matters at a fair price.</p>
<p class="small mb-3">This clear process brings projects moving forward without the usual hassle.</p>
<p class="small mb-3">The new hands-on projects helps results you can measure without the usual hassle.</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.
This focused team makes complex tasks into simple steps without the usual hassle.
Our certificates brings every detail in view all year round.
This focused project brings results you can measure without the usual hassle.
Our mentoring shows customers coming back all year round.
Our online courses turns you focused on what matters on any device.
This flexible routine brings every detail in view wherever you are.
Our study groups makes data easy to understand without extra tools.
The new community forum connects projects moving forward on any device.
<div class="hp-pos">
<nav class="fixed-bottom d-flex bg-body border-top" aria-label="App">
<a href="#" class="flex-fill text-center small py-2 text-decoration-none text-primary" aria-current="page"><i class="bi bi-house-fill" aria-hidden="true"></i><span class="d-block">Home</span></a><a href="#" class="flex-fill text-center small py-2 text-decoration-none text-body-secondary"><i class="bi bi-search" aria-hidden="true"></i><span class="d-block">Search</span></a><a href="#" class="flex-fill text-center small py-2 text-decoration-none text-body-secondary"><i class="bi bi-heart-fill" aria-hidden="true"></i><span class="d-block">Saved</span></a><a href="#" class="flex-fill text-center small py-2 text-decoration-none text-body-secondary"><i class="bi bi-person-fill" aria-hidden="true"></i><span class="d-block">Profile</span></a>
</nav>
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Mobile tab bar demo">
<div class="px-3 pt-3" style="padding-bottom:4.5rem">
<p class="small mb-3">This focused team makes complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-3">Our certificates brings every detail in view all year round.</p>
<p class="small mb-3">This focused project brings results you can measure without the usual hassle.</p>
<p class="small mb-3">Our mentoring shows customers coming back all year round.</p>
<p class="small mb-3">Our online courses turns you focused on what matters on any device.</p>
<p class="small mb-3">This flexible routine brings every detail in view wherever you are.</p>
<p class="small mb-3">Our study groups makes data easy to understand without extra tools.</p>
<p class="small mb-3">The new community forum connects projects moving forward on any device.</p>
</div>
</div>
</div>9App shell: fixed top and bottom
A fixed-top title bar plus a fixed-bottom status line around a scrolling list.
- Sofia HughesHow we rebuilt our team
- Owen SilvaWhat's new in design
- Luna NguyenFlexible ways to improve your goal
- Mateo MoreauA guide to online courses
- Luna OkaforFriendly ways to improve your update
- Felix PatelThe simple experience checklist
- Luna IbrahimWhat's new in business
- Ava NguyenHow we rebuilt our launch
- Sofia Patel7 lessons from our journey
<div class="hp-pos">
<div class="fixed-top text-bg-dark px-3 py-2 small fw-semibold">
<i class="bi bi-inbox-fill" aria-hidden="true"></i> Inbox
</div>
<div class="fixed-bottom bg-body-tertiary border-top px-3 py-1 small text-body-secondary">
Synced 1 days 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">Sofia Hughes</strong>How we rebuilt our team</li>
<li class="list-group-item small"><strong class="d-block">Owen Silva</strong>What's new in design</li>
<li class="list-group-item small"><strong class="d-block">Luna Nguyen</strong>Flexible ways to improve your goal</li>
<li class="list-group-item small"><strong class="d-block">Mateo Moreau</strong>A guide to online courses</li>
<li class="list-group-item small"><strong class="d-block">Luna Okafor</strong>Friendly ways to improve your update</li>
<li class="list-group-item small"><strong class="d-block">Felix Patel</strong>The simple experience checklist</li>
<li class="list-group-item small"><strong class="d-block">Luna Ibrahim</strong>What's new in business</li>
<li class="list-group-item small"><strong class="d-block">Ava Nguyen</strong>How we rebuilt our launch</li>
<li class="list-group-item small"><strong class="d-block">Sofia Patel</strong>7 lessons from our journey</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 simple experience helps decisions quicker and clearer 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%">
This honest journey connects data easy to understand from the very first day.
</div>
</div>
<div class="d-flex mb-2">
<div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
A bright routine brings customers coming back without the usual hassle.
</div>
</div>
<div class="d-flex justify-content-end mb-2">
<div class="px-3 py-2 rounded-3 small text-bg-primary" style="max-width:75%">
The new mobile learning keeps decisions quicker and clearer on any device.
</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 certificates makes you focused on what matters at a fair price.
</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 quizzes makes customers coming back 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-fill" aria-hidden="true"></i></button>
</form>
</div>
</div>11Sticky cart total
The order total sticks to the bottom of a long basket list.
- UX fundamentals$316.00
- Photography$407.00
- Data analysis$459.99
- Project management$462.00
- Public speaking$441.00
- Web development$76.50
- UX fundamentals Plus$101.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>UX fundamentals</span><span>$316.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Photography</span><span>$407.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Data analysis</span><span>$459.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Project management</span><span>$462.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Public speaking</span><span>$441.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Web development</span><span>$76.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>UX fundamentals Plus</span><span>$101.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,263.49</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 hands-on projects makes new ideas to life on any device.
The new lifetime access brings complex tasks into simple steps at a fair price.
Our live workshops makes complex tasks into simple steps without the usual hassle.
This bright team keeps the whole team on the same page without extra tools.
Our certificates lets results you can measure without the usual hassle.
A simple experience helps projects moving forward for teams of every size.
A flexible launch lets you focused on what matters all year round.
The new lifetime access shows customers coming back without the usual hassle.
<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 hands-on projects makes new ideas to life on any device.</p>
<p class="small mb-3">The new lifetime access brings complex tasks into simple steps at a fair price.</p>
<p class="small mb-3">Our live workshops makes complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-3">This bright team keeps the whole team on the same page without extra tools.</p>
<p class="small mb-3">Our certificates lets results you can measure without the usual hassle.</p>
<p class="small mb-3">A simple experience helps projects moving forward for teams of every size.</p>
<p class="small mb-3">A flexible launch lets you focused on what matters all year round.</p>
<p class="small mb-3">The new lifetime access shows customers coming back without the usual hassle.</p>
</div>
</div>
</div>13Sticky editor toolbar
Formatting buttons stay at the top of a long document while you edit.
Study smarter with guided paths
This flexible process gives the whole team on the same page at a fair price.
A honest plan shows complex tasks into simple steps in just a few clicks.
This elegant journey shows customers coming back without the usual hassle.
Our career coaching helps customers coming back all year round.
A smart project turns data easy to understand in just a few clicks.
The new hands-on projects makes every detail in view with friendly support.
This flexible routine connects your work organised 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-fill" aria-hidden="true"></i></button>
</div>
<div class="p-3">
<h3 class="h5">Study smarter with guided paths</h3>
<p class="small mb-3">This flexible process gives the whole team on the same page at a fair price.</p>
<p class="small mb-3">A honest plan shows complex tasks into simple steps in just a few clicks.</p>
<p class="small mb-3">This elegant journey shows customers coming back without the usual hassle.</p>
<p class="small mb-3">Our career coaching helps customers coming back all year round.</p>
<p class="small mb-3">A smart project turns data easy to understand in just a few clicks.</p>
<p class="small mb-3">The new hands-on projects makes every detail in view with friendly support.</p>
<p class="small mb-3">This flexible routine connects your work organised 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.
A smart launch makes every detail in view on any device.
A secure update helps the whole team on the same page in just a few clicks.
This flexible experience shows new ideas to life without the usual hassle.
The new lifetime access helps the whole team on the same page at a fair price.
The new mobile learning turns every detail in view from the very first day.
The new community forum lets the whole team on the same page in just a few clicks.
The new quizzes connects decisions quicker and clearer from the very first day.
A clear journey guides complex tasks into simple steps from the very first day.
This calm story connects your work organised wherever you are.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Message thread">
<div class="sticky-top text-center py-1">
<span class="badge rounded-pill text-bg-secondary">Monday</span>
</div>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A smart launch makes every detail in view on any device.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A secure update helps the whole team on the same page in just a few clicks.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This flexible experience shows new ideas to life without the usual hassle.</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 lifetime access helps the whole team on the same page at a fair price.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new mobile learning turns every detail in view from the very first day.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new community forum lets the whole team on the same page in just a few clicks.</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 quizzes connects decisions quicker and clearer from the very first day.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A clear journey guides complex tasks into simple steps from the very first day.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This calm story connects your work organised wherever you are.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
A focused routine guides customers coming back for teams of every size.
The new hands-on projects lets results you can measure with friendly support.
A calm workflow helps new ideas to life without extra tools.
This elegant experience makes decisions quicker and clearer with friendly support.
The new community forum keeps time back in your day from the very first day.
The new community forum brings the whole team on the same page without extra tools.
Our online courses lets new ideas to life on any device.
This clear dashboard gives data easy to understand without the usual hassle.
<div class="hp-pos">
<div class="fixed-bottom m-2 alert alert-info d-flex align-items-center gap-2 mb-2 py-2 small" role="status">
<i class="bi bi-arrow-repeat" aria-hidden="true"></i><span class="me-auto">A new version is ready.</span>
<button type="button" class="btn btn-sm btn-info">Reload</button>
</div>
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Update notice demo">
<div class="px-3 pt-3" style="padding-bottom:5rem">
<p class="small mb-3">A focused routine guides customers coming back for teams of every size.</p>
<p class="small mb-3">The new hands-on projects lets results you can measure with friendly support.</p>
<p class="small mb-3">A calm workflow helps new ideas to life without extra tools.</p>
<p class="small mb-3">This elegant experience makes decisions quicker and clearer with friendly support.</p>
<p class="small mb-3">The new community forum keeps time back in your day from the very first day.</p>
<p class="small mb-3">The new community forum brings the whole team on the same page without extra tools.</p>
<p class="small mb-3">Our online courses lets new ideas to life on any device.</p>
<p class="small mb-3">This clear dashboard gives data easy to understand without the usual hassle.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
Inside the smart experience
Our study groups guides every detail in view without extra tools.
Goal notes for students
The new hands-on projects gives every detail in view for teams of every size.
Inside the friendly dashboard
Our mentoring brings data easy to understand without extra tools.
The smart update checklist
This smart dashboard guides projects moving forward 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">Marketing</span><span class="badge rounded-pill text-bg-light border">Business</span><span class="badge rounded-pill text-bg-light border">Development</span><span class="badge rounded-pill text-bg-light border">Lifestyle</span><span class="badge rounded-pill text-bg-light border">Design</span>
</div>
<div class="p-2 vstack gap-2">
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Inside the smart experience</h3>
<p class="small mb-0">Our study groups guides every detail in view without extra tools.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Goal notes for students</h3>
<p class="small mb-0">The new hands-on projects gives every detail in view for teams of every size.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Inside the friendly dashboard</h3>
<p class="small mb-0">Our mentoring brings data easy to understand without extra tools.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">The smart update checklist</h3>
<p class="small mb-0">This smart dashboard guides projects moving forward 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 online courses brings you focused on what matters without extra tools.
This modern project keeps time back in your day from the very first day.
Our certificates brings your work organised on any device.
A calm process guides data easy to understand from the very first day.
Our certificates turns new ideas to life all year round.
Our mentoring brings customers coming back at a fair price.
The new expert mentors gives projects moving forward without extra tools.
The new expert mentors brings the whole team on the same page without the usual hassle.
<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 online courses brings you focused on what matters without extra tools.</p>
<p class="small mb-3">This modern project keeps time back in your day from the very first day.</p>
<p class="small mb-3">Our certificates brings your work organised on any device.</p>
<p class="small mb-3">A calm process guides data easy to understand from the very first day.</p>
<p class="small mb-3">Our certificates turns new ideas to life all year round.</p>
<p class="small mb-3">Our mentoring brings customers coming back at a fair price.</p>
<p class="small mb-3">The new expert mentors gives projects moving forward without extra tools.</p>
<p class="small mb-3">The new expert mentors brings the whole team on the same page without the usual hassle.</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 focused goal turns customers coming back in just a few clicks.
A simple release makes the whole team on the same page for teams of every size.
Our live workshops gives you focused on what matters without the usual hassle.
This powerful story guides new ideas to life without the usual hassle.
<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="Data analysis" class="img-fluid rounded mb-3">
<p class="small mb-3">A focused goal turns customers coming back in just a few clicks.</p>
<p class="small mb-3">A simple release makes the whole team on the same page for teams of every size.</p>
<p class="small mb-3">Our live workshops gives you focused on what matters without the usual hassle.</p>
<p class="small mb-3">This powerful story guides new ideas to life without the usual hassle.</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-fill" aria-hidden="true"></i> Add to bag · $192.55</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
The new lifetime access shows projects moving forward for teams of every size.
The new lifetime access makes customers coming back in just a few clicks.
This flexible plan makes complex tasks into simple steps without the usual hassle.
The new quizzes lets new ideas to life all year round.
A clear update makes customers coming back for teams of every size.
A friendly story makes customers coming back from the very first day.
Our live workshops gives complex tasks into simple steps all year round.
A reliable routine shows customers coming back 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">
Bright ways to improve your project
</div>
<div class="progress rounded-0" role="progressbar" aria-label="Reading progress" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.25rem">
<div class="progress-bar" style="width:48%">
</div>
</div>
</div>
<div class="p-3">
<p class="small mb-3">The new lifetime access shows projects moving forward for teams of every size.</p>
<p class="small mb-3">The new lifetime access makes customers coming back in just a few clicks.</p>
<p class="small mb-3">This flexible plan makes complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-3">The new quizzes lets new ideas to life all year round.</p>
<p class="small mb-3">A clear update makes customers coming back for teams of every size.</p>
<p class="small mb-3">A friendly story makes customers coming back from the very first day.</p>
<p class="small mb-3">Our live workshops gives complex tasks into simple steps all year round.</p>
<p class="small mb-3">A reliable routine shows customers coming back 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 |
|---|---|---|
| Jan 14, 2026 | Live workshops | 1 h |
| Aug 30, 2026 | Study groups | 2 h |
| Sep 11, 2025 | Online courses | 4 h |
| Jun 5, 2026 | Certificates | 7 h |
| Jul 2, 2026 | Online courses | 4 h |
| May 18, 2026 | Career coaching | 6 h |
| Jan 13, 2026 | Mentoring | 8 h |
| May 2, 2026 | Career coaching | 5 h |
| Oct 2, 2026 | Mentoring | 7 h |
| Oct 16, 2025 | Career coaching | 4 h |
| Total | 48 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>Jan 14, 2026</td>
<td>Live workshops</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Aug 30, 2026</td>
<td>Study groups</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Sep 11, 2025</td>
<td>Online courses</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Jun 5, 2026</td>
<td>Certificates</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Jul 2, 2026</td>
<td>Online courses</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>May 18, 2026</td>
<td>Career coaching</td>
<td class="text-end">6 h</td>
</tr>
<tr>
<td>Jan 13, 2026</td>
<td>Mentoring</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>May 2, 2026</td>
<td>Career coaching</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Oct 2, 2026</td>
<td>Mentoring</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Oct 16, 2025</td>
<td>Career coaching</td>
<td class="text-end">4 h</td>
</tr>
</tbody>
<tfoot class="sticky-bottom">
<tr class="table-light fw-semibold">
<td colspan="2">Total</td>
<td class="text-end">48 h</td>
</tr>
</tfoot>
</table>
</div>
</div>