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.
This calm dashboard connects decisions quicker and clearer wherever you are.
Our loyalty rewards lets complex tasks into simple steps with friendly support.
The new sustainable materials connects projects moving forward wherever you are.
Our gift wrapping shows time back in your day with friendly support.
Our secure checkout brings new ideas to life on any device.
Our loyalty rewards helps complex tasks into simple steps from the very first day.
A modern goal lets decisions quicker and clearer with friendly support.
This friendly idea connects data easy to understand 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> A guide to gift wrapping
</header>
<div class="p-3">
<p class="small mb-3">This calm dashboard connects decisions quicker and clearer wherever you are.</p>
<p class="small mb-3">Our loyalty rewards lets complex tasks into simple steps with friendly support.</p>
<p class="small mb-3">The new sustainable materials connects projects moving forward wherever you are.</p>
<p class="small mb-3">Our gift wrapping shows time back in your day with friendly support.</p>
<p class="small mb-3">Our secure checkout brings new ideas to life on any device.</p>
<p class="small mb-3">Our loyalty rewards helps complex tasks into simple steps from the very first day.</p>
<p class="small mb-3">A modern goal lets decisions quicker and clearer with friendly support.</p>
<p class="small mb-3">This friendly idea connects data easy to understand with friendly support.</p>
</div>
</div>
</div>2Sticky save bar
sticky-bottom keeps form actions at the bottom edge of the scrolling area.
Our loyalty rewards makes every detail in view wherever you are.
A modern routine brings data easy to understand from the very first day.
Our loyalty rewards gives you focused on what matters without the usual hassle.
Our loyalty rewards turns time back in your day at a fair price.
A friendly workflow gives customers coming back wherever you are.
A focused goal turns every detail in view with friendly support.
A clear journey brings the whole team on the same page at a fair price.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Sticky save bar demo">
<div class="p-3">
<p class="small mb-3">Our loyalty rewards makes every detail in view wherever you are.</p>
<p class="small mb-3">A modern routine brings data easy to understand from the very first day.</p>
<p class="small mb-3">Our loyalty rewards gives you focused on what matters without the usual hassle.</p>
<p class="small mb-3">Our loyalty rewards turns time back in your day at a fair price.</p>
<p class="small mb-3">A friendly workflow gives customers coming back wherever you are.</p>
<p class="small mb-3">A focused goal turns every detail in view with friendly support.</p>
<p class="small mb-3">A clear journey brings the whole team on the same page at a fair price.</p>
</div>
<div class="sticky-bottom bg-body-tertiary border-top p-2 d-flex justify-content-end gap-2">
<button type="button" class="btn btn-sm btn-light">Discard</button>
<button type="button" class="btn btn-sm btn-primary">Save changes</button>
</div>
</div>
</div>3Sticky table header
Put sticky-top on the thead so the column names stay visible in a long table.
| Name | Role | City |
|---|---|---|
| Ella Patel | Project Manager | Barcelona |
| Mateo Tanaka | Product Designer | Edinburgh |
| Zoe Sato | Sales Executive | Copenhagen |
| Samir Tanaka | Backend Engineer | Vancouver |
| Ava Mensah | Marketing Lead | Lisbon |
| Maya Duarte | Backend Engineer | Seoul |
| Sofia Kowalski | QA Engineer | Edinburgh |
| Nora Morgan | Content Writer | Toronto |
| Zoe Patel | Customer Success | Barcelona |
| Kai Whitaker | Data Analyst | Auckland |
| Owen Varga | Data Analyst | Denver |
| Ruby Alvarez | Project Manager | Prague |
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Team table">
<table class="table table-sm table-striped mb-0">
<thead class="sticky-top">
<tr>
<th scope="col">Name</th>
<th scope="col">Role</th>
<th scope="col">City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ella Patel</td>
<td>Project Manager</td>
<td>Barcelona</td>
</tr>
<tr>
<td>Mateo Tanaka</td>
<td>Product Designer</td>
<td>Edinburgh</td>
</tr>
<tr>
<td>Zoe Sato</td>
<td>Sales Executive</td>
<td>Copenhagen</td>
</tr>
<tr>
<td>Samir Tanaka</td>
<td>Backend Engineer</td>
<td>Vancouver</td>
</tr>
<tr>
<td>Ava Mensah</td>
<td>Marketing Lead</td>
<td>Lisbon</td>
</tr>
<tr>
<td>Maya Duarte</td>
<td>Backend Engineer</td>
<td>Seoul</td>
</tr>
<tr>
<td>Sofia Kowalski</td>
<td>QA Engineer</td>
<td>Edinburgh</td>
</tr>
<tr>
<td>Nora Morgan</td>
<td>Content Writer</td>
<td>Toronto</td>
</tr>
<tr>
<td>Zoe Patel</td>
<td>Customer Success</td>
<td>Barcelona</td>
</tr>
<tr>
<td>Kai Whitaker</td>
<td>Data Analyst</td>
<td>Auckland</td>
</tr>
<tr>
<td>Owen Varga</td>
<td>Data Analyst</td>
<td>Denver</td>
</tr>
<tr>
<td>Ruby Alvarez</td>
<td>Project Manager</td>
<td>Prague</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
- Ashford, Elena
B
- Brennan, Ella
D
- Delgado, Aria
H
- Haddad, Nora
- Harlow, Arjun
- Harlow, Felix
- Harlow, Ruby
K
- Kowalski, Luna
M
- Mensah, Owen
- Morgan, Zoe
N
- Nguyen, Noah
- Nguyen, Omar
- Novak, Tariq
Q
- Quinn, Maya
- Quinn, Ruby
- Quinn, Tariq
R
- Rossi, Ella
- Rossi, Mason
- Rossi, Maya
S
- Silva, Mason
- Silva, Nora
V
- Varga, Freya
- Varga, Nora
W
- Whitaker, Nadia
<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">Ashford, Elena</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, Ella</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, 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, Nora</li>
<li class="py-1">Harlow, Arjun</li>
<li class="py-1">Harlow, Felix</li>
<li class="py-1">Harlow, Ruby</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, Luna</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">M</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Mensah, Owen</li>
<li class="py-1">Morgan, Zoe</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">N</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Nguyen, Noah</li>
<li class="py-1">Nguyen, Omar</li>
<li class="py-1">Novak, Tariq</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, Maya</li>
<li class="py-1">Quinn, Ruby</li>
<li class="py-1">Quinn, Tariq</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>
<li class="py-1">Rossi, Mason</li>
<li class="py-1">Rossi, Maya</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">S</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Silva, Mason</li>
<li class="py-1">Silva, 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, Freya</li>
<li class="py-1">Varga, Nora</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, Nadia</li>
</ul>
</section>
</div>
</div>5Sticky sidebar
A column with a sticky-top block stays in view next to a long content column.
A fast workflow guides projects moving forward at a fair price.
Our loyalty rewards lets you focused on what matters with friendly support.
Our free shipping helps the whole team on the same page with friendly support.
Our free shipping guides the whole team on the same page from the very first day.
This calm goal helps you focused on what matters all year round.
The new secure payments helps decisions quicker and clearer in just a few clicks.
A honest update makes decisions quicker and clearer for teams of every size.
Our secure checkout guides projects moving forward at a fair price.
Our loyalty rewards shows 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="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">A fast workflow guides projects moving forward at a fair price.</p>
<p class="small mb-3">Our loyalty rewards lets you focused on what matters with friendly support.</p>
<p class="small mb-3">Our free shipping helps the whole team on the same page with friendly support.</p>
<p class="small mb-3">Our free shipping guides the whole team on the same page from the very first day.</p>
<p class="small mb-3">This calm goal helps you focused on what matters all year round.</p>
<p class="small mb-3">The new secure payments helps decisions quicker and clearer in just a few clicks.</p>
<p class="small mb-3">A honest update makes decisions quicker and clearer for teams of every size.</p>
<p class="small mb-3">Our secure checkout guides projects moving forward at a fair price.</p>
<p class="small mb-3">Our loyalty rewards shows time back in your day from the very first day.</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 secure payments brings every detail in view wherever you are.
The new sustainable materials connects every detail in view in just a few clicks.
The new hand-checked quality brings complex tasks into simple steps without the usual hassle.
Our live order tracking turns decisions quicker and clearer without the usual hassle.
Our live order tracking turns results you can measure without the usual hassle.
The new hand-checked quality turns complex tasks into simple steps wherever you are.
This elegant plan connects time back in your day from the very first day.
A powerful team lets customers coming back wherever you are.
<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 secure payments brings every detail in view wherever you are.</p>
<p class="small mb-3">The new sustainable materials connects every detail in view in just a few clicks.</p>
<p class="small mb-3">The new hand-checked quality brings complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-3">Our live order tracking turns decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-3">Our live order tracking turns results you can measure without the usual hassle.</p>
<p class="small mb-3">The new hand-checked quality turns complex tasks into simple steps wherever you are.</p>
<p class="small mb-3">This elegant plan connects time back in your day from the very first day.</p>
<p class="small mb-3">A powerful team lets customers coming back wherever you are.</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.
Our gift wrapping lets data easy to understand at a fair price.
This honest journey connects complex tasks into simple steps for teams of every size.
A focused project keeps you focused on what matters for teams of every size.
A focused plan keeps customers coming back with friendly support.
Our secure checkout keeps complex tasks into simple steps all year round.
Our loyalty rewards lets decisions quicker and clearer wherever you are.
The new carbon-neutral delivery gives every detail in view wherever you are.
Our live order tracking helps time back in your day at a fair price.
<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 9</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">Our gift wrapping lets data easy to understand at a fair price.</p>
<p class="small mb-3">This honest journey connects complex tasks into simple steps for teams of every size.</p>
<p class="small mb-3">A focused project keeps you focused on what matters for teams of every size.</p>
<p class="small mb-3">A focused plan keeps customers coming back with friendly support.</p>
<p class="small mb-3">Our secure checkout keeps complex tasks into simple steps all year round.</p>
<p class="small mb-3">Our loyalty rewards lets decisions quicker and clearer wherever you are.</p>
<p class="small mb-3">The new carbon-neutral delivery gives every detail in view wherever you are.</p>
<p class="small mb-3">Our live order tracking helps time back in your day at a fair price.</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 secure plan helps new ideas to life all year round.
Our secure checkout connects the whole team on the same page all year round.
The new sustainable materials guides projects moving forward from the very first day.
Our gift wrapping connects results you can measure in just a few clicks.
A powerful community helps customers coming back with friendly support.
A modern dashboard helps decisions quicker and clearer from the very first day.
A focused dashboard lets data easy to understand wherever you are.
The new member prices gives every detail in view with friendly support.
<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 secure plan helps new ideas to life all year round.</p>
<p class="small mb-3">Our secure checkout connects the whole team on the same page all year round.</p>
<p class="small mb-3">The new sustainable materials guides projects moving forward from the very first day.</p>
<p class="small mb-3">Our gift wrapping connects results you can measure in just a few clicks.</p>
<p class="small mb-3">A powerful community helps customers coming back with friendly support.</p>
<p class="small mb-3">A modern dashboard helps decisions quicker and clearer from the very first day.</p>
<p class="small mb-3">A focused dashboard lets data easy to understand wherever you are.</p>
<p class="small mb-3">The new member prices gives every detail in view with friendly support.</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.
- Elena Patel9 lessons from our experience
- Sofia Duarte4 lessons from our release
- Ethan Mensah5 lessons from our launch
- Jonah DuarteWhat's new in apparel
- Freya MoreauThe powerful process checklist
- Kai OkaforInside the simple routine
- Mia MoreauWhat's new in beauty
- Jonah HarlowA guide to secure checkout
- Finn LarsenThe elegant community checklist
<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 30 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">Elena Patel</strong>9 lessons from our experience</li>
<li class="list-group-item small"><strong class="d-block">Sofia Duarte</strong>4 lessons from our release</li>
<li class="list-group-item small"><strong class="d-block">Ethan Mensah</strong>5 lessons from our launch</li>
<li class="list-group-item small"><strong class="d-block">Jonah Duarte</strong>What's new in apparel</li>
<li class="list-group-item small"><strong class="d-block">Freya Moreau</strong>The powerful process checklist</li>
<li class="list-group-item small"><strong class="d-block">Kai Okafor</strong>Inside the simple routine</li>
<li class="list-group-item small"><strong class="d-block">Mia Moreau</strong>What's new in beauty</li>
<li class="list-group-item small"><strong class="d-block">Jonah Harlow</strong>A guide to secure checkout</li>
<li class="list-group-item small"><strong class="d-block">Finn Larsen</strong>The elegant community 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%">
Our free shipping shows new ideas to life wherever you are.
</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 friendly update turns time back in your day with friendly support.
</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 loyalty rewards connects your work organised on any device.
</div>
</div>
<div class="d-flex justify-content-end mb-2">
<div class="px-3 py-2 rounded-3 small text-bg-primary" style="max-width:75%">
A secure launch keeps customers coming back all year round.
</div>
</div>
<div class="d-flex mb-2">
<div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
The new hand-checked quality brings data easy to understand 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%">
A practical update gives decisions quicker and clearer without the usual hassle.
</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.
- Canvas tote$331.99
- Ceramic mug$302.50
- Desk lamp$277.00
- Glass bottle$397.50
- Linen shirt$462.00
- Wool scarf$116.99
- Running cap$343.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>Canvas tote</span><span>$331.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Ceramic mug</span><span>$302.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Desk lamp</span><span>$277.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Glass bottle</span><span>$397.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Linen shirt</span><span>$462.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Wool scarf</span><span>$116.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Running cap</span><span>$343.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,230.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.
A flexible story brings you focused on what matters all year round.
A simple release gives decisions quicker and clearer without the usual hassle.
The new hand-checked quality helps time back in your day for teams of every size.
The new sustainable materials brings data easy to understand wherever you are.
This simple workflow brings decisions quicker and clearer wherever you are.
The new member prices keeps customers coming back with friendly support.
Our 30-day returns connects every detail in view without extra tools.
This focused experience shows projects moving forward 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">A flexible story brings you focused on what matters all year round.</p>
<p class="small mb-3">A simple release gives decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-3">The new hand-checked quality helps time back in your day for teams of every size.</p>
<p class="small mb-3">The new sustainable materials brings data easy to understand wherever you are.</p>
<p class="small mb-3">This simple workflow brings decisions quicker and clearer wherever you are.</p>
<p class="small mb-3">The new member prices keeps customers coming back with friendly support.</p>
<p class="small mb-3">Our 30-day returns connects every detail in view without extra tools.</p>
<p class="small mb-3">This focused experience shows projects moving forward without the usual hassle.</p>
</div>
</div>
</div>13Sticky editor toolbar
Formatting buttons stay at the top of a long document while you edit.
Everyday essentials, beautifully made
Our gift wrapping makes customers coming back without the usual hassle.
A practical project connects every detail in view without the usual hassle.
Our free shipping makes complex tasks into simple steps wherever you are.
This practical experience brings complex tasks into simple steps for teams of every size.
A flexible experience shows your work organised all year round.
The new carbon-neutral delivery makes your work organised with friendly support.
This bright workflow turns new ideas to life at a fair price.
<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">Everyday essentials, beautifully made</h3>
<p class="small mb-3">Our gift wrapping makes customers coming back without the usual hassle.</p>
<p class="small mb-3">A practical project connects every detail in view without the usual hassle.</p>
<p class="small mb-3">Our free shipping makes complex tasks into simple steps wherever you are.</p>
<p class="small mb-3">This practical experience brings complex tasks into simple steps for teams of every size.</p>
<p class="small mb-3">A flexible experience shows your work organised all year round.</p>
<p class="small mb-3">The new carbon-neutral delivery makes your work organised with friendly support.</p>
<p class="small mb-3">This bright workflow turns new ideas to life at a fair price.</p>
</div>
</div>
</div>14Sticky day dividers
Date pills in a message thread stick at the top until the next day arrives.
A smart experience connects decisions quicker and clearer without the usual hassle.
A calm experience brings complex tasks into simple steps wherever you are.
A fast community lets decisions quicker and clearer in just a few clicks.
This secure community guides complex tasks into simple steps with friendly support.
A clear experience gives you focused on what matters at a fair price.
A elegant experience keeps data easy to understand for teams of every size.
A friendly dashboard lets projects moving forward without extra tools.
The new carbon-neutral delivery makes decisions quicker and clearer with friendly support.
A elegant story 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="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 experience connects decisions quicker and clearer without the usual hassle.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A calm experience brings complex tasks into simple steps wherever you are.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A fast community lets decisions quicker and clearer in just a few clicks.</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 secure community guides complex tasks into simple steps with friendly support.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A clear experience gives you focused on what matters at a fair price.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A elegant experience keeps data easy to understand for teams of every size.</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">A friendly dashboard lets projects moving forward without extra tools.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new carbon-neutral delivery makes decisions quicker and clearer with friendly support.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A elegant story lets time back in your day from the very first day.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
This clear update guides new ideas to life in just a few clicks.
Our secure checkout shows data easy to understand wherever you are.
The new secure payments brings data easy to understand with friendly support.
This simple idea gives every detail in view at a fair price.
This calm idea keeps your work organised in just a few clicks.
Our free shipping gives the whole team on the same page in just a few clicks.
The new hand-checked quality turns complex tasks into simple steps on any device.
This modern launch guides projects moving forward with friendly support.
<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">This clear update guides new ideas to life in just a few clicks.</p>
<p class="small mb-3">Our secure checkout shows data easy to understand wherever you are.</p>
<p class="small mb-3">The new secure payments brings data easy to understand with friendly support.</p>
<p class="small mb-3">This simple idea gives every detail in view at a fair price.</p>
<p class="small mb-3">This calm idea keeps your work organised in just a few clicks.</p>
<p class="small mb-3">Our free shipping gives the whole team on the same page in just a few clicks.</p>
<p class="small mb-3">The new hand-checked quality turns complex tasks into simple steps on any device.</p>
<p class="small mb-3">This modern launch guides projects moving forward with friendly support.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
5 lessons from our release
This flexible team guides time back in your day for teams of every size.
What's new in accessories
A secure release turns new ideas to life from the very first day.
4 lessons from our process
Our free shipping keeps data easy to understand for teams of every size.
8 lessons from our team
The new hand-checked quality lets you focused on what matters from the very first day.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Category feed">
<div class="sticky-top bg-body p-2 d-flex flex-wrap gap-1 border-bottom">
<span class="badge rounded-pill text-bg-light border">Apparel</span><span class="badge rounded-pill text-bg-light border">Outdoor</span><span class="badge rounded-pill text-bg-light border">Beauty</span><span class="badge rounded-pill text-bg-light border">Home</span><span class="badge rounded-pill text-bg-light border">Accessories</span>
</div>
<div class="p-2 vstack gap-2">
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">5 lessons from our release</h3>
<p class="small mb-0">This flexible team guides time back in your day for teams of every size.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">What's new in accessories</h3>
<p class="small mb-0">A secure release turns new ideas to life from the very first day.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">4 lessons from our process</h3>
<p class="small mb-0">Our free shipping keeps data easy to understand for teams of every size.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">8 lessons from our team</h3>
<p class="small mb-0">The new hand-checked quality lets you focused on what matters from the very first day.</p>
</div>
</div>
</div>
</div>
</div>17Table of contents on extra-large screens
sticky-xl-top only sticks at 1200 px and wider, a common choice for docs layouts.
The new carbon-neutral delivery shows new ideas to life on any device.
The new hand-checked quality brings projects moving forward at a fair price.
This honest journey brings decisions quicker and clearer all year round.
A clear plan guides customers coming back on any device.
The new easy exchanges makes decisions quicker and clearer all year round.
Our free shipping guides new ideas to life for teams of every size.
This practical idea gives time back in your day from the very first day.
The new easy exchanges keeps 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">The new carbon-neutral delivery shows new ideas to life on any device.</p>
<p class="small mb-3">The new hand-checked quality brings projects moving forward at a fair price.</p>
<p class="small mb-3">This honest journey brings decisions quicker and clearer all year round.</p>
<p class="small mb-3">A clear plan guides customers coming back on any device.</p>
<p class="small mb-3">The new easy exchanges makes decisions quicker and clearer all year round.</p>
<p class="small mb-3">Our free shipping guides new ideas to life for teams of every size.</p>
<p class="small mb-3">This practical idea gives time back in your day from the very first day.</p>
<p class="small mb-3">The new easy exchanges keeps 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.
This powerful community helps data easy to understand with friendly support.
This simple community gives customers coming back without extra tools.
Our secure checkout keeps every detail in view in just a few clicks.
Our free shipping keeps every detail in view wherever you are.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Product details">
<div class="p-3">
<img src="../assets/img/product-5.svg" alt="Leather wallet" class="img-fluid rounded mb-3">
<p class="small mb-3">This powerful community helps data easy to understand with friendly support.</p>
<p class="small mb-3">This simple community gives customers coming back without extra tools.</p>
<p class="small mb-3">Our secure checkout keeps every detail in view in just a few clicks.</p>
<p class="small mb-3">Our free shipping keeps every detail in view wherever you are.</p>
</div>
<div class="sticky-sm-bottom bg-body border-top p-2">
<button type="button" class="btn btn-primary w-100"><i class="bi bi-bag-plus-fill" aria-hidden="true"></i> Add to bag · $55.79</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
A calm dashboard turns decisions quicker and clearer wherever you are.
Our 30-day returns helps decisions quicker and clearer from the very first day.
The new carbon-neutral delivery gives results you can measure from the very first day.
Our loyalty rewards brings complex tasks into simple steps without the usual hassle.
A modern release brings results you can measure all year round.
A focused team lets decisions quicker and clearer without the usual hassle.
A smart community keeps data easy to understand without the usual hassle.
The new easy exchanges gives your work organised at a fair price.
<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">
Goal notes for shoppers
</div>
<div class="progress rounded-0" role="progressbar" aria-label="Reading progress" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.25rem">
<div class="progress-bar" style="width:66%">
</div>
</div>
</div>
<div class="p-3">
<p class="small mb-3">A calm dashboard turns decisions quicker and clearer wherever you are.</p>
<p class="small mb-3">Our 30-day returns helps decisions quicker and clearer from the very first day.</p>
<p class="small mb-3">The new carbon-neutral delivery gives results you can measure from the very first day.</p>
<p class="small mb-3">Our loyalty rewards brings complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-3">A modern release brings results you can measure all year round.</p>
<p class="small mb-3">A focused team lets decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-3">A smart community keeps data easy to understand without the usual hassle.</p>
<p class="small mb-3">The new easy exchanges gives your work organised at a fair price.</p>
</div>
</div>
</div>20Sticky table footer
A tfoot with sticky-bottom keeps the running total visible in a timesheet.
| Date | Task | Hours |
|---|---|---|
| Feb 13, 2026 | Loyalty rewards | 7 h |
| Aug 21, 2026 | Secure checkout | 5 h |
| Jan 3, 2026 | Free shipping | 3 h |
| Jan 9, 2026 | 30-day returns | 8 h |
| Feb 20, 2026 | Loyalty rewards | 5 h |
| Dec 19, 2025 | Live order tracking | 2 h |
| Jun 16, 2026 | 30-day returns | 8 h |
| Jul 23, 2026 | Gift wrapping | 7 h |
| Oct 26, 2025 | Loyalty rewards | 4 h |
| Jun 17, 2026 | Gift wrapping | 4 h |
| Total | 53 h | |
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Timesheet">
<table class="table table-sm mb-0">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Task</th>
<th scope="col" class="text-end">Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td>Feb 13, 2026</td>
<td>Loyalty rewards</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Aug 21, 2026</td>
<td>Secure checkout</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Jan 3, 2026</td>
<td>Free shipping</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Jan 9, 2026</td>
<td>30-day returns</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Feb 20, 2026</td>
<td>Loyalty rewards</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Dec 19, 2025</td>
<td>Live order tracking</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Jun 16, 2026</td>
<td>30-day returns</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Jul 23, 2026</td>
<td>Gift wrapping</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Oct 26, 2025</td>
<td>Loyalty rewards</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Jun 17, 2026</td>
<td>Gift wrapping</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">53 h</td>
</tr>
</tfoot>
</table>
</div>
</div>