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 experience lets data easy to understand without extra tools.
A calm story makes the whole team on the same page wherever you are.
Our holiday packages shows projects moving forward at a fair price.
This elegant goal turns decisions quicker and clearer all year round.
A focused experience brings complex tasks into simple steps wherever you are.
Our car rental makes you focused on what matters for teams of every size.
Our airport transfers connects you focused on what matters with friendly support.
Our hotel booking shows complex tasks into simple steps 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> Simple ways to improve your launch
</header>
<div class="p-3">
<p class="small mb-3">This calm experience lets data easy to understand without extra tools.</p>
<p class="small mb-3">A calm story makes the whole team on the same page wherever you are.</p>
<p class="small mb-3">Our holiday packages shows projects moving forward at a fair price.</p>
<p class="small mb-3">This elegant goal turns decisions quicker and clearer all year round.</p>
<p class="small mb-3">A focused experience brings complex tasks into simple steps wherever you are.</p>
<p class="small mb-3">Our car rental makes you focused on what matters for teams of every size.</p>
<p class="small mb-3">Our airport transfers connects you focused on what matters with friendly support.</p>
<p class="small mb-3">Our hotel booking shows complex tasks into simple steps with friendly support.</p>
</div>
</div>
</div>2Sticky save bar
sticky-bottom keeps form actions at the bottom edge of the scrolling area.
A smart community lets every detail in view at a fair price.
A smart experience gives you focused on what matters with friendly support.
This elegant idea helps results you can measure for teams of every size.
This practical process helps every detail in view in just a few clicks.
The new free cancellation shows complex tasks into simple steps wherever you are.
A fast launch guides data easy to understand all year round.
A reliable routine lets the whole team on the same page all year round.
<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 smart community lets every detail in view at a fair price.</p>
<p class="small mb-3">A smart experience gives you focused on what matters with friendly support.</p>
<p class="small mb-3">This elegant idea helps results you can measure for teams of every size.</p>
<p class="small mb-3">This practical process helps every detail in view in just a few clicks.</p>
<p class="small mb-3">The new free cancellation shows complex tasks into simple steps wherever you are.</p>
<p class="small mb-3">A fast launch guides data easy to understand all year round.</p>
<p class="small mb-3">A reliable routine lets the whole team on the same page all year round.</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 |
|---|---|---|
| Hana Ortega | HR Partner | Vancouver |
| Kenji Tanaka | Support Specialist | Kyoto |
| Nora Lindqvist | Project Manager | Barcelona |
| Kai Morgan | Product Designer | Austin |
| Aria Fischer | QA Engineer | Porto |
| Nora Varga | Sales Executive | Copenhagen |
| Sofia Sato | Art Director | Austin |
| Amara Mensah | Project Manager | Vancouver |
| Kai Whitaker | HR Partner | Montreal |
| Ethan Moreau | Project Manager | Prague |
| Ava Sato | Marketing Lead | Prague |
| Leo Alvarez | QA Engineer | Oslo |
<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>Hana Ortega</td>
<td>HR Partner</td>
<td>Vancouver</td>
</tr>
<tr>
<td>Kenji Tanaka</td>
<td>Support Specialist</td>
<td>Kyoto</td>
</tr>
<tr>
<td>Nora Lindqvist</td>
<td>Project Manager</td>
<td>Barcelona</td>
</tr>
<tr>
<td>Kai Morgan</td>
<td>Product Designer</td>
<td>Austin</td>
</tr>
<tr>
<td>Aria Fischer</td>
<td>QA Engineer</td>
<td>Porto</td>
</tr>
<tr>
<td>Nora Varga</td>
<td>Sales Executive</td>
<td>Copenhagen</td>
</tr>
<tr>
<td>Sofia Sato</td>
<td>Art Director</td>
<td>Austin</td>
</tr>
<tr>
<td>Amara Mensah</td>
<td>Project Manager</td>
<td>Vancouver</td>
</tr>
<tr>
<td>Kai Whitaker</td>
<td>HR Partner</td>
<td>Montreal</td>
</tr>
<tr>
<td>Ethan Moreau</td>
<td>Project Manager</td>
<td>Prague</td>
</tr>
<tr>
<td>Ava Sato</td>
<td>Marketing Lead</td>
<td>Prague</td>
</tr>
<tr>
<td>Leo Alvarez</td>
<td>QA Engineer</td>
<td>Oslo</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, Lea
- Brennan, Mia
- Brennan, Zoe
C
- Carter, Elena
D
- Duarte, Omar
- Duarte, Owen
F
- Fischer, Diego
- Fischer, Isla
- Fischer, Lucas
H
- Harlow, Zoe
I
- Ibrahim, Mia
K
- Kim, Lucas
- Kim, Mia
L
- Lindqvist, Aria
M
- Mensah, Ruby
- Moreau, Lucas
N
- Nguyen, Mason
O
- Ortega, Lucas
P
- Patel, Freya
Q
- Quinn, Mason
- Quinn, Samir
S
- Silva, Nadia
T
- Tanaka, Noah
W
- Whitaker, Mateo
<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, Lea</li>
<li class="py-1">Brennan, Mia</li>
<li class="py-1">Brennan, Zoe</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">C</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Carter, Elena</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, Omar</li>
<li class="py-1">Duarte, Owen</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">F</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Fischer, Diego</li>
<li class="py-1">Fischer, Isla</li>
<li class="py-1">Fischer, Lucas</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">Harlow, Zoe</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">I</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Ibrahim, Mia</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, Lucas</li>
<li class="py-1">Kim, Mia</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">L</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Lindqvist, Aria</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, Ruby</li>
<li class="py-1">Moreau, Lucas</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, Mason</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">Ortega, Lucas</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, Freya</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, Mason</li>
<li class="py-1">Quinn, Samir</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, Nadia</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, Noah</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, Mateo</li>
</ul>
</section>
</div>
</div>5Sticky sidebar
A column with a sticky-top block stays in view next to a long content column.
A practical story gives results you can measure all year round.
This modern dashboard shows customers coming back on any device.
This friendly goal connects you focused on what matters on any device.
The new 24/7 assistance lets results you can measure in just a few clicks.
A honest journey guides results you can measure on any device.
The new local guides connects data easy to understand in just a few clicks.
This practical launch brings every detail in view without the usual hassle.
The new free cancellation shows results you can measure on any device.
This smart plan guides new ideas to life 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-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 practical story gives results you can measure all year round.</p>
<p class="small mb-3">This modern dashboard shows customers coming back on any device.</p>
<p class="small mb-3">This friendly goal connects you focused on what matters on any device.</p>
<p class="small mb-3">The new 24/7 assistance lets results you can measure in just a few clicks.</p>
<p class="small mb-3">A honest journey guides results you can measure on any device.</p>
<p class="small mb-3">The new local guides connects data easy to understand in just a few clicks.</p>
<p class="small mb-3">This practical launch brings every detail in view without the usual hassle.</p>
<p class="small mb-3">The new free cancellation shows results you can measure on any device.</p>
<p class="small mb-3">This smart plan guides new ideas to life 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.
A friendly project guides complex tasks into simple steps wherever you are.
Our airport transfers gives new ideas to life from the very first day.
This simple experience guides the whole team on the same page for teams of every size.
This calm goal helps projects moving forward without extra tools.
This smart plan brings customers coming back at a fair price.
Our travel insurance connects results you can measure wherever you are.
The new flexible dates shows projects moving forward on any device.
This powerful release keeps complex tasks into simple steps 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">A friendly project guides complex tasks into simple steps wherever you are.</p>
<p class="small mb-3">Our airport transfers gives new ideas to life from the very first day.</p>
<p class="small mb-3">This simple experience guides the whole team on the same page for teams of every size.</p>
<p class="small mb-3">This calm goal helps projects moving forward without extra tools.</p>
<p class="small mb-3">This smart plan brings customers coming back at a fair price.</p>
<p class="small mb-3">Our travel insurance connects results you can measure wherever you are.</p>
<p class="small mb-3">The new flexible dates shows projects moving forward on any device.</p>
<p class="small mb-3">This powerful release keeps complex tasks into simple steps 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 reliable story helps complex tasks into simple steps without extra tools.
The new curated stays gives every detail in view wherever you are.
Our car rental connects customers coming back for teams of every size.
Our guided tours shows decisions quicker and clearer with friendly support.
This elegant project guides you focused on what matters in just a few clicks.
Our car rental connects results you can measure in just a few clicks.
This powerful workflow helps every detail in view at a fair price.
A powerful project turns new ideas to life with friendly support.
<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 6</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 reliable story helps complex tasks into simple steps without extra tools.</p>
<p class="small mb-3">The new curated stays gives every detail in view wherever you are.</p>
<p class="small mb-3">Our car rental connects customers coming back for teams of every size.</p>
<p class="small mb-3">Our guided tours shows decisions quicker and clearer with friendly support.</p>
<p class="small mb-3">This elegant project guides you focused on what matters in just a few clicks.</p>
<p class="small mb-3">Our car rental connects results you can measure in just a few clicks.</p>
<p class="small mb-3">This powerful workflow helps every detail in view at a fair price.</p>
<p class="small mb-3">A powerful project turns new ideas to life 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.
Our airport transfers makes time back in your day in just a few clicks.
The new best price guarantee gives data easy to understand without extra tools.
A friendly plan helps results you can measure wherever you are.
This clear launch keeps projects moving forward from the very first day.
The new 24/7 assistance helps complex tasks into simple steps at a fair price.
Our travel insurance gives data easy to understand for teams of every size.
This calm team brings every detail in view with friendly support.
The new 24/7 assistance makes time back in your day wherever you are.
<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">Our airport transfers makes time back in your day in just a few clicks.</p>
<p class="small mb-3">The new best price guarantee gives data easy to understand without extra tools.</p>
<p class="small mb-3">A friendly plan helps results you can measure wherever you are.</p>
<p class="small mb-3">This clear launch keeps projects moving forward from the very first day.</p>
<p class="small mb-3">The new 24/7 assistance helps complex tasks into simple steps at a fair price.</p>
<p class="small mb-3">Our travel insurance gives data easy to understand for teams of every size.</p>
<p class="small mb-3">This calm team brings every detail in view with friendly support.</p>
<p class="small mb-3">The new 24/7 assistance makes time back in your day wherever you are.</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.
- Aria PatelThe calm project checklist
- Ivy WhitakerThe clear community checklist
- Ruby OrtegaThe friendly update checklist
- Ivy DelgadoCalm ways to improve your dashboard
- Noah SilvaThe simple update checklist
- Ravi TanakaA guide to guided tours
- Amara TanakaInside the calm launch
- Amara MoreauReliable ways to improve your community
- Mason HarlowFriendly ways to improve your plan
<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">Aria Patel</strong>The calm project checklist</li>
<li class="list-group-item small"><strong class="d-block">Ivy Whitaker</strong>The clear community checklist</li>
<li class="list-group-item small"><strong class="d-block">Ruby Ortega</strong>The friendly update checklist</li>
<li class="list-group-item small"><strong class="d-block">Ivy Delgado</strong>Calm ways to improve your dashboard</li>
<li class="list-group-item small"><strong class="d-block">Noah Silva</strong>The simple update checklist</li>
<li class="list-group-item small"><strong class="d-block">Ravi Tanaka</strong>A guide to guided tours</li>
<li class="list-group-item small"><strong class="d-block">Amara Tanaka</strong>Inside the calm launch</li>
<li class="list-group-item small"><strong class="d-block">Amara Moreau</strong>Reliable ways to improve your community</li>
<li class="list-group-item small"><strong class="d-block">Mason Harlow</strong>Friendly ways to improve your plan</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 fast routine lets results you can measure 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%">
A powerful team shows 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 local guides helps new ideas to life from the very first day.
</div>
</div>
<div class="d-flex justify-content-end mb-2">
<div class="px-3 py-2 rounded-3 small text-bg-primary" style="max-width:75%">
Our travel insurance helps the whole team on the same page wherever you are.
</div>
</div>
<div class="d-flex mb-2">
<div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
This modern team keeps new ideas to life in just a few clicks.
</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 honest workflow helps decisions quicker and clearer in just a few clicks.
</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.
- Island hopping tour$134.99
- City break$457.99
- Mountain lodge$210.50
- Safari adventure$378.50
- Ocean view suite$466.99
- Weekend getaway$465.99
- Island hopping tour Lite$292.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>Island hopping tour</span><span>$134.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>City break</span><span>$457.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Mountain lodge</span><span>$210.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Safari adventure</span><span>$378.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Ocean view suite</span><span>$466.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Weekend getaway</span><span>$465.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Island hopping tour Lite</span><span>$292.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,406.96</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 powerful workflow brings your work organised at a fair price.
Our travel insurance helps the whole team on the same page for teams of every size.
This secure team guides customers coming back for teams of every size.
The new curated stays keeps customers coming back for teams of every size.
Our holiday packages guides your work organised on any device.
A powerful routine makes you focused on what matters all year round.
Our holiday packages lets results you can measure with friendly support.
This flexible dashboard helps projects moving forward all year round.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Product filters">
<div class="sticky-lg-top bg-body border-bottom p-2 d-flex gap-2 align-items-center">
<label class="small text-nowrap" for="hp-sort-1235">Sort by</label>
<select class="form-select form-select-sm" id="hp-sort-1235">
<option>Newest</option>
<option>Price</option>
<option>Rating</option>
</select>
</div>
<div class="p-3">
<p class="small mb-3">A powerful workflow brings your work organised at a fair price.</p>
<p class="small mb-3">Our travel insurance helps the whole team on the same page for teams of every size.</p>
<p class="small mb-3">This secure team guides customers coming back for teams of every size.</p>
<p class="small mb-3">The new curated stays keeps customers coming back for teams of every size.</p>
<p class="small mb-3">Our holiday packages guides your work organised on any device.</p>
<p class="small mb-3">A powerful routine makes you focused on what matters all year round.</p>
<p class="small mb-3">Our holiday packages lets results you can measure with friendly support.</p>
<p class="small mb-3">This flexible dashboard helps projects moving forward all year round.</p>
</div>
</div>
</div>13Sticky editor toolbar
Formatting buttons stay at the top of a long document while you edit.
Stay somewhere unforgettable
The new best price guarantee helps time back in your day in just a few clicks.
The new flexible dates gives projects moving forward with friendly support.
The new local guides helps decisions quicker and clearer without the usual hassle.
This bright community brings you focused on what matters all year round.
A smart process helps your work organised for teams of every size.
The new free cancellation helps the whole team on the same page wherever you are.
Our travel insurance makes 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">Stay somewhere unforgettable</h3>
<p class="small mb-3">The new best price guarantee helps time back in your day in just a few clicks.</p>
<p class="small mb-3">The new flexible dates gives projects moving forward with friendly support.</p>
<p class="small mb-3">The new local guides helps decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-3">This bright community brings you focused on what matters all year round.</p>
<p class="small mb-3">A smart process helps your work organised for teams of every size.</p>
<p class="small mb-3">The new free cancellation helps the whole team on the same page wherever you are.</p>
<p class="small mb-3">Our travel insurance makes 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.
This reliable launch turns projects moving forward for teams of every size.
A smart goal shows data easy to understand from the very first day.
A friendly dashboard shows time back in your day at a fair price.
This elegant routine brings complex tasks into simple steps in just a few clicks.
This flexible launch lets customers coming back in just a few clicks.
The new flexible dates keeps every detail in view all year round.
A clear story keeps you focused on what matters for teams of every size.
This powerful team guides new ideas to life from the very first day.
This flexible update gives the whole team on the same page for teams of every size.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Message thread">
<div class="sticky-top text-center py-1">
<span class="badge rounded-pill text-bg-secondary">Monday</span>
</div>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This reliable launch turns projects moving forward for teams of every size.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A smart goal shows data easy to understand from the very first day.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A friendly dashboard shows time back in your day at a fair price.</p>
<div class="sticky-top text-center py-1">
<span class="badge rounded-pill text-bg-secondary">Yesterday</span>
</div>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This elegant routine brings complex tasks into simple steps in just a few clicks.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This flexible launch lets customers coming back in just a few clicks.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new flexible dates keeps every detail in view all year round.</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 clear story keeps you focused on what matters for teams of every size.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This powerful team guides new ideas to life from the very first day.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This flexible update gives the whole team on the same page for teams of every size.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
Our travel insurance brings new ideas to life without the usual hassle.
Our car rental makes every detail in view wherever you are.
This modern process shows your work organised all year round.
This simple plan shows data easy to understand from the very first day.
A clear process shows every detail in view from the very first day.
A clear routine turns complex tasks into simple steps from the very first day.
A elegant routine brings complex tasks into simple steps without the usual hassle.
Our airport transfers turns time back in your day on any device.
<div class="hp-pos">
<div class="fixed-bottom m-2 alert alert-info d-flex align-items-center gap-2 mb-2 py-2 small" role="status">
<i class="bi bi-arrow-repeat" aria-hidden="true"></i><span class="me-auto">A new version is ready.</span>
<button type="button" class="btn btn-sm btn-info">Reload</button>
</div>
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Update notice demo">
<div class="px-3 pt-3" style="padding-bottom:5rem">
<p class="small mb-3">Our travel insurance brings new ideas to life without the usual hassle.</p>
<p class="small mb-3">Our car rental makes every detail in view wherever you are.</p>
<p class="small mb-3">This modern process shows your work organised all year round.</p>
<p class="small mb-3">This simple plan shows data easy to understand from the very first day.</p>
<p class="small mb-3">A clear process shows every detail in view from the very first day.</p>
<p class="small mb-3">A clear routine turns complex tasks into simple steps from the very first day.</p>
<p class="small mb-3">A elegant routine brings complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-3">Our airport transfers turns time back in your day on any device.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
A guide to guided tours
This fast story turns results you can measure all year round.
Inside the flexible experience
The new best price guarantee lets the whole team on the same page on any device.
Routine notes for travellers
Our hotel booking shows new ideas to life in just a few clicks.
A guide to airport transfers
This bright plan gives time back in your day at a fair price.
<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">City</span><span class="badge rounded-pill text-bg-light border">Mountain</span><span class="badge rounded-pill text-bg-light border">Culture</span><span class="badge rounded-pill text-bg-light border">Beach</span><span class="badge rounded-pill text-bg-light border">Adventure</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 guided tours</h3>
<p class="small mb-0">This fast story turns results you can measure all year round.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Inside the flexible experience</h3>
<p class="small mb-0">The new best price guarantee lets the whole team on the same page on any device.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Routine notes for travellers</h3>
<p class="small mb-0">Our hotel booking shows new ideas to life in just a few clicks.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">A guide to airport transfers</h3>
<p class="small mb-0">This bright plan gives time back in your day at a fair price.</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 car rental connects every detail in view on any device.
This bright story shows every detail in view for teams of every size.
A simple community connects new ideas to life without extra tools.
The new best price guarantee helps projects moving forward at a fair price.
This secure story turns customers coming back all year round.
Our travel insurance keeps time back in your day with friendly support.
The new free cancellation helps customers coming back in just a few clicks.
This fast story lets decisions quicker and clearer without extra tools.
<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 car rental connects every detail in view on any device.</p>
<p class="small mb-3">This bright story shows every detail in view for teams of every size.</p>
<p class="small mb-3">A simple community connects new ideas to life without extra tools.</p>
<p class="small mb-3">The new best price guarantee helps projects moving forward at a fair price.</p>
<p class="small mb-3">This secure story turns customers coming back all year round.</p>
<p class="small mb-3">Our travel insurance keeps time back in your day with friendly support.</p>
<p class="small mb-3">The new free cancellation helps customers coming back in just a few clicks.</p>
<p class="small mb-3">This fast story lets decisions quicker and clearer without extra tools.</p>
</div>
</div>
</div>18Checkout button on phones
sticky-sm-bottom sticks the call to action at the bottom from the sm breakpoint up.
The new best price guarantee turns time back in your day wherever you are.
A secure workflow turns the whole team on the same page wherever you are.
Our airport transfers connects data easy to understand without extra tools.
Our travel insurance makes customers coming back on any device.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Product details">
<div class="p-3">
<img src="../assets/img/product-5.svg" alt="Ocean view suite" class="img-fluid rounded mb-3">
<p class="small mb-3">The new best price guarantee turns time back in your day wherever you are.</p>
<p class="small mb-3">A secure workflow turns the whole team on the same page wherever you are.</p>
<p class="small mb-3">Our airport transfers connects data easy to understand without extra tools.</p>
<p class="small mb-3">Our travel insurance makes customers coming back on any device.</p>
</div>
<div class="sticky-sm-bottom bg-body border-top p-2">
<button type="button" class="btn btn-primary w-100"><i class="bi bi-bag-plus-fill" aria-hidden="true"></i> Add to bag · $49.30</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
This reliable workflow connects your work organised for teams of every size.
The new flexible dates keeps the whole team on the same page wherever you are.
A fast dashboard lets the whole team on the same page at a fair price.
Our guided tours makes new ideas to life all year round.
Our hotel booking helps new ideas to life without extra tools.
A calm story connects decisions quicker and clearer wherever you are.
A simple goal keeps new ideas to life all year round.
The new flexible dates helps 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="Reading demo">
<div class="sticky-top bg-body">
<div class="px-3 py-2 small fw-semibold">
Inside the honest experience
</div>
<div class="progress rounded-0" role="progressbar" aria-label="Reading progress" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.25rem">
<div class="progress-bar" style="width:43%">
</div>
</div>
</div>
<div class="p-3">
<p class="small mb-3">This reliable workflow connects your work organised for teams of every size.</p>
<p class="small mb-3">The new flexible dates keeps the whole team on the same page wherever you are.</p>
<p class="small mb-3">A fast dashboard lets the whole team on the same page at a fair price.</p>
<p class="small mb-3">Our guided tours makes new ideas to life all year round.</p>
<p class="small mb-3">Our hotel booking helps new ideas to life without extra tools.</p>
<p class="small mb-3">A calm story connects decisions quicker and clearer wherever you are.</p>
<p class="small mb-3">A simple goal keeps new ideas to life all year round.</p>
<p class="small mb-3">The new flexible dates helps the whole team on the same page in just a few clicks.</p>
</div>
</div>
</div>20Sticky table footer
A tfoot with sticky-bottom keeps the running total visible in a timesheet.
| Date | Task | Hours |
|---|---|---|
| Feb 9, 2026 | Airport transfers | 6 h |
| Mar 30, 2026 | Car rental | 1 h |
| Feb 11, 2026 | Car rental | 8 h |
| Jul 13, 2026 | Guided tours | 3 h |
| Oct 14, 2026 | Guided tours | 5 h |
| Apr 11, 2026 | Travel insurance | 5 h |
| Jan 16, 2026 | Guided tours | 7 h |
| Apr 24, 2026 | Car rental | 5 h |
| Oct 1, 2025 | Car rental | 8 h |
| Nov 5, 2025 | Car rental | 6 h |
| Total | 54 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 9, 2026</td>
<td>Airport transfers</td>
<td class="text-end">6 h</td>
</tr>
<tr>
<td>Mar 30, 2026</td>
<td>Car rental</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Feb 11, 2026</td>
<td>Car rental</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Jul 13, 2026</td>
<td>Guided tours</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Oct 14, 2026</td>
<td>Guided tours</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Apr 11, 2026</td>
<td>Travel insurance</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Jan 16, 2026</td>
<td>Guided tours</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Apr 24, 2026</td>
<td>Car rental</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Oct 1, 2025</td>
<td>Car rental</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Nov 5, 2025</td>
<td>Car rental</td>
<td class="text-end">6 h</td>
</tr>
</tbody>
<tfoot class="sticky-bottom">
<tr class="table-light fw-semibold">
<td colspan="2">Total</td>
<td class="text-end">54 h</td>
</tr>
</tfoot>
</table>
</div>
</div>