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 journey shows results you can measure for teams of every size.
A calm story shows complex tasks into simple steps wherever you are.
A modern update gives decisions quicker and clearer without extra tools.
Our holiday packages brings every detail in view from the very first day.
A elegant idea gives projects moving forward for teams of every size.
The new local guides lets customers coming back for teams of every size.
Our holiday packages shows you focused on what matters without the usual hassle.
A focused process gives projects moving forward from the very first day.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Sticky header demo">
<header class="sticky-top bg-body border-bottom px-3 py-2 fw-semibold">
<i class="bi bi-journal-text" aria-hidden="true"></i> What's new in adventure
</header>
<div class="p-3">
<p class="small mb-3">This calm journey shows results you can measure for teams of every size.</p>
<p class="small mb-3">A calm story shows complex tasks into simple steps wherever you are.</p>
<p class="small mb-3">A modern update gives decisions quicker and clearer without extra tools.</p>
<p class="small mb-3">Our holiday packages brings every detail in view from the very first day.</p>
<p class="small mb-3">A elegant idea gives projects moving forward for teams of every size.</p>
<p class="small mb-3">The new local guides lets customers coming back for teams of every size.</p>
<p class="small mb-3">Our holiday packages shows you focused on what matters without the usual hassle.</p>
<p class="small mb-3">A focused process gives projects moving forward from the very first day.</p>
</div>
</div>
</div>2Sticky save bar
sticky-bottom keeps form actions at the bottom edge of the scrolling area.
This focused experience makes every detail in view all year round.
A focused goal brings new ideas to life wherever you are.
Our holiday packages makes the whole team on the same page wherever you are.
A honest plan makes new ideas to life wherever you are.
Our car rental brings decisions quicker and clearer wherever you are.
Our travel insurance shows time back in your day with friendly support.
The new 24/7 assistance connects 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="Sticky save bar demo">
<div class="p-3">
<p class="small mb-3">This focused experience makes every detail in view all year round.</p>
<p class="small mb-3">A focused goal brings new ideas to life wherever you are.</p>
<p class="small mb-3">Our holiday packages makes the whole team on the same page wherever you are.</p>
<p class="small mb-3">A honest plan makes new ideas to life wherever you are.</p>
<p class="small mb-3">Our car rental brings decisions quicker and clearer wherever you are.</p>
<p class="small mb-3">Our travel insurance shows time back in your day with friendly support.</p>
<p class="small mb-3">The new 24/7 assistance connects complex tasks into simple steps in just a few clicks.</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 Quinn | Marketing Lead | Seoul |
| Nadia Okafor | Backend Engineer | Copenhagen |
| Chloe Whitaker | Product Designer | Melbourne |
| Finn Kowalski | HR Partner | Montreal |
| Diego Ashford | Sales Executive | Toronto |
| Samir Duarte | Marketing Lead | Kyoto |
| Ruby Novak | Finance Lead | Porto |
| Felix Alvarez | Customer Success | Prague |
| Ethan Kim | Marketing Lead | Denver |
| Luna Okafor | Data Analyst | Kyoto |
| Isla Ibrahim | Support Specialist | Montreal |
| Theo Patel | HR Partner | Melbourne |
<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 Quinn</td>
<td>Marketing Lead</td>
<td>Seoul</td>
</tr>
<tr>
<td>Nadia Okafor</td>
<td>Backend Engineer</td>
<td>Copenhagen</td>
</tr>
<tr>
<td>Chloe Whitaker</td>
<td>Product Designer</td>
<td>Melbourne</td>
</tr>
<tr>
<td>Finn Kowalski</td>
<td>HR Partner</td>
<td>Montreal</td>
</tr>
<tr>
<td>Diego Ashford</td>
<td>Sales Executive</td>
<td>Toronto</td>
</tr>
<tr>
<td>Samir Duarte</td>
<td>Marketing Lead</td>
<td>Kyoto</td>
</tr>
<tr>
<td>Ruby Novak</td>
<td>Finance Lead</td>
<td>Porto</td>
</tr>
<tr>
<td>Felix Alvarez</td>
<td>Customer Success</td>
<td>Prague</td>
</tr>
<tr>
<td>Ethan Kim</td>
<td>Marketing Lead</td>
<td>Denver</td>
</tr>
<tr>
<td>Luna Okafor</td>
<td>Data Analyst</td>
<td>Kyoto</td>
</tr>
<tr>
<td>Isla Ibrahim</td>
<td>Support Specialist</td>
<td>Montreal</td>
</tr>
<tr>
<td>Theo Patel</td>
<td>HR Partner</td>
<td>Melbourne</td>
</tr>
</tbody>
</table>
</div>
</div>4Alphabet section headings
Each letter heading is sticky inside its own section, so the next letter pushes the previous one away.
A
- Alvarez, Mia
- Alvarez, Ruby
- Alvarez, Theo
- Ashford, Mia
B
- Brennan, Priya
C
- Carter, Luna
D
- Duarte, Ivy
- Duarte, Ruby
H
- Haddad, Lucas
- Haddad, Theo
- Harlow, Lucas
I
- Ibrahim, Amara
- Ibrahim, Chloe
K
- Kowalski, Theo
L
- Larsen, Ivy
- Lindqvist, Tariq
M
- Mensah, Tariq
N
- Novak, Zoe
Q
- Quinn, Arjun
R
- Rossi, Aria
- Rossi, Isla
- Rossi, Samir
S
- Silva, Diego
W
- Whitaker, Omar
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Contacts">
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">A</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Alvarez, Mia</li>
<li class="py-1">Alvarez, Ruby</li>
<li class="py-1">Alvarez, Theo</li>
<li class="py-1">Ashford, Mia</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, Priya</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, Luna</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, Ivy</li>
<li class="py-1">Duarte, Ruby</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, Lucas</li>
<li class="py-1">Haddad, Theo</li>
<li class="py-1">Harlow, Lucas</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, Amara</li>
<li class="py-1">Ibrahim, Chloe</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, Theo</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, Ivy</li>
<li class="py-1">Lindqvist, Tariq</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, Tariq</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">Novak, Zoe</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, Arjun</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">R</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Rossi, Aria</li>
<li class="py-1">Rossi, Isla</li>
<li class="py-1">Rossi, 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, Diego</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, Omar</li>
</ul>
</section>
</div>
</div>5Sticky sidebar
A column with a sticky-top block stays in view next to a long content column.
A calm routine gives complex tasks into simple steps all year round.
The new free cancellation brings data easy to understand from the very first day.
A practical idea keeps your work organised with friendly support.
Our holiday packages lets customers coming back at a fair price.
A smart workflow shows customers coming back without the usual hassle.
This clear team makes you focused on what matters for teams of every size.
The new local guides helps new ideas to life wherever you are.
This fast community shows new ideas to life without the usual hassle.
A calm plan brings projects moving forward 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">A calm routine gives complex tasks into simple steps all year round.</p>
<p class="small mb-3">The new free cancellation brings data easy to understand from the very first day.</p>
<p class="small mb-3">A practical idea keeps your work organised with friendly support.</p>
<p class="small mb-3">Our holiday packages lets customers coming back at a fair price.</p>
<p class="small mb-3">A smart workflow shows customers coming back without the usual hassle.</p>
<p class="small mb-3">This clear team makes you focused on what matters for teams of every size.</p>
<p class="small mb-3">The new local guides helps new ideas to life wherever you are.</p>
<p class="small mb-3">This fast community shows new ideas to life without the usual hassle.</p>
<p class="small mb-3">A calm plan brings projects moving forward 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.
Our guided tours keeps you focused on what matters for teams of every size.
Our hotel booking connects you focused on what matters without extra tools.
A powerful goal lets decisions quicker and clearer on any device.
A practical idea gives results you can measure all year round.
The new local guides helps customers coming back at a fair price.
This focused workflow lets time back in your day on any device.
A practical plan keeps decisions quicker and clearer with friendly support.
Our guided tours turns every detail in view at a fair price.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Responsive sticky demo">
<div class="sticky-md-top bg-primary text-white px-3 py-2 small">
<i class="bi bi-phone-fill" aria-hidden="true"></i> Sticky from md, normal flow on small screens
</div>
<div class="p-3">
<p class="small mb-3">Our guided tours keeps you focused on what matters for teams of every size.</p>
<p class="small mb-3">Our hotel booking connects you focused on what matters without extra tools.</p>
<p class="small mb-3">A powerful goal lets decisions quicker and clearer on any device.</p>
<p class="small mb-3">A practical idea gives results you can measure all year round.</p>
<p class="small mb-3">The new local guides helps customers coming back at a fair price.</p>
<p class="small mb-3">This focused workflow lets time back in your day on any device.</p>
<p class="small mb-3">A practical plan keeps decisions quicker and clearer with friendly support.</p>
<p class="small mb-3">Our guided tours turns every detail in view at a fair price.</p>
</div>
</div>
</div>7Fixed-top navbar
fixed-top pins a navbar to the top edge; the frame acts as the viewport, so the bar stays inside the example.
A fast journey gives complex tasks into simple steps all year round.
The new flexible dates guides customers coming back for teams of every size.
A fast idea lets every detail in view for teams of every size.
Our guided tours makes the whole team on the same page in just a few clicks.
A secure story brings projects moving forward for teams of every size.
The new free cancellation helps complex tasks into simple steps from the very first day.
Our airport transfers keeps you focused on what matters wherever you are.
This friendly experience helps your work organised 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 14</span>
<button type="button" class="btn btn-sm btn-outline-primary">Sign up</button>
</nav>
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Fixed navbar demo">
<div class="px-3 pb-3" style="padding-top:4rem">
<p class="small mb-3">A fast journey gives complex tasks into simple steps all year round.</p>
<p class="small mb-3">The new flexible dates guides customers coming back for teams of every size.</p>
<p class="small mb-3">A fast idea lets every detail in view for teams of every size.</p>
<p class="small mb-3">Our guided tours makes the whole team on the same page in just a few clicks.</p>
<p class="small mb-3">A secure story brings projects moving forward for teams of every size.</p>
<p class="small mb-3">The new free cancellation helps complex tasks into simple steps from the very first day.</p>
<p class="small mb-3">Our airport transfers keeps you focused on what matters wherever you are.</p>
<p class="small mb-3">This friendly experience helps your work organised with friendly support.</p>
</div>
</div>
</div>8Fixed-bottom tab bar
A mobile style tab bar with fixed-bottom; content gets bottom padding so nothing hides behind it.
The new curated stays shows the whole team on the same page wherever you are.
A friendly idea turns customers coming back without extra tools.
The new best price guarantee lets complex tasks into simple steps without extra tools.
The new flexible dates guides decisions quicker and clearer in just a few clicks.
This powerful community helps results you can measure wherever you are.
A practical workflow turns new ideas to life without extra tools.
This powerful idea gives results you can measure from the very first day.
The new best price guarantee gives customers coming back 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">The new curated stays shows the whole team on the same page wherever you are.</p>
<p class="small mb-3">A friendly idea turns customers coming back without extra tools.</p>
<p class="small mb-3">The new best price guarantee lets complex tasks into simple steps without extra tools.</p>
<p class="small mb-3">The new flexible dates guides decisions quicker and clearer in just a few clicks.</p>
<p class="small mb-3">This powerful community helps results you can measure wherever you are.</p>
<p class="small mb-3">A practical workflow turns new ideas to life without extra tools.</p>
<p class="small mb-3">This powerful idea gives results you can measure from the very first day.</p>
<p class="small mb-3">The new best price guarantee gives customers coming back 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.
- Ruby OrtegaInside the modern idea
- Amara MorganProject notes for travellers
- Chloe MensahThe secure community checklist
- Felix WhitakerHow we rebuilt our community
- Diego CarterJourney notes for travellers
- Aria OrtegaInside the friendly idea
- Samir VargaInside the friendly release
- Sofia Alvarez4 lessons from our team
- Tariq OkaforInside the clear 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 6 hours 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">Ruby Ortega</strong>Inside the modern idea</li>
<li class="list-group-item small"><strong class="d-block">Amara Morgan</strong>Project notes for travellers</li>
<li class="list-group-item small"><strong class="d-block">Chloe Mensah</strong>The secure community checklist</li>
<li class="list-group-item small"><strong class="d-block">Felix Whitaker</strong>How we rebuilt our community</li>
<li class="list-group-item small"><strong class="d-block">Diego Carter</strong>Journey notes for travellers</li>
<li class="list-group-item small"><strong class="d-block">Aria Ortega</strong>Inside the friendly idea</li>
<li class="list-group-item small"><strong class="d-block">Samir Varga</strong>Inside the friendly release</li>
<li class="list-group-item small"><strong class="d-block">Sofia Alvarez</strong>4 lessons from our team</li>
<li class="list-group-item small"><strong class="d-block">Tariq Okafor</strong>Inside the clear 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%">
This reliable release lets your work organised with friendly support.
</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 24/7 assistance keeps results you can measure 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 travel insurance brings complex tasks into simple steps with friendly support.
</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 simple project lets results you can measure 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%">
A simple story guides decisions quicker and clearer with friendly support.
</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 24/7 assistance brings projects moving forward 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.
- City break$189.50
- Safari adventure$165.50
- Ocean view suite$295.00
- Mountain lodge$71.00
- Weekend getaway$477.00
- Island hopping tour$371.99
- City break Lite$407.99
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Basket">
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between small"><span>City break</span><span>$189.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Safari adventure</span><span>$165.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Ocean view suite</span><span>$295.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Mountain lodge</span><span>$71.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Weekend getaway</span><span>$477.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Island hopping tour</span><span>$371.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>City break Lite</span><span>$407.99</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 $1,977.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.
This fast release guides the whole team on the same page for teams of every size.
A powerful plan keeps decisions quicker and clearer all year round.
A smart story gives the whole team on the same page on any device.
Our guided tours brings data easy to understand at a fair price.
This elegant story connects customers coming back without the usual hassle.
Our airport transfers brings your work organised from the very first day.
The new flexible dates keeps projects moving forward wherever you are.
The new 24/7 assistance turns time back in your day for teams of every size.
<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">This fast release guides the whole team on the same page for teams of every size.</p>
<p class="small mb-3">A powerful plan keeps decisions quicker and clearer all year round.</p>
<p class="small mb-3">A smart story gives the whole team on the same page on any device.</p>
<p class="small mb-3">Our guided tours brings data easy to understand at a fair price.</p>
<p class="small mb-3">This elegant story connects customers coming back without the usual hassle.</p>
<p class="small mb-3">Our airport transfers brings your work organised from the very first day.</p>
<p class="small mb-3">The new flexible dates keeps projects moving forward wherever you are.</p>
<p class="small mb-3">The new 24/7 assistance turns time back in your day for teams of every size.</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 connects every detail in view without the usual hassle.
This powerful update connects projects moving forward at a fair price.
A modern launch connects decisions quicker and clearer on any device.
This flexible process connects you focused on what matters in just a few clicks.
A friendly process makes new ideas to life at a fair price.
A calm goal turns complex tasks into simple steps in just a few clicks.
This powerful journey connects decisions quicker and clearer all year round.
<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 connects every detail in view without the usual hassle.</p>
<p class="small mb-3">This powerful update connects projects moving forward at a fair price.</p>
<p class="small mb-3">A modern launch connects decisions quicker and clearer on any device.</p>
<p class="small mb-3">This flexible process connects you focused on what matters in just a few clicks.</p>
<p class="small mb-3">A friendly process makes new ideas to life at a fair price.</p>
<p class="small mb-3">A calm goal turns complex tasks into simple steps in just a few clicks.</p>
<p class="small mb-3">This powerful journey connects decisions quicker and clearer all year round.</p>
</div>
</div>
</div>14Sticky day dividers
Date pills in a message thread stick at the top until the next day arrives.
This elegant dashboard shows complex tasks into simple steps in just a few clicks.
Our guided tours turns results you can measure at a fair price.
A honest workflow lets customers coming back for teams of every size.
The new 24/7 assistance turns every detail in view without extra tools.
A smart plan brings complex tasks into simple steps at a fair price.
Our holiday packages connects your work organised at a fair price.
A calm plan helps the whole team on the same page without the usual hassle.
A secure journey shows time back in your day with friendly support.
This honest journey guides your work organised without extra tools.
<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 elegant dashboard shows 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">Our guided tours turns results you can measure at a fair price.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A honest workflow lets customers coming back for teams of every size.</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 24/7 assistance turns every detail in view without extra tools.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A smart plan brings complex tasks into simple steps at a fair price.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Our holiday packages connects your work organised at a fair price.</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 calm plan helps the whole team on the same page without the usual hassle.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A secure journey shows time back in your day with friendly support.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">This honest journey guides your work organised without extra tools.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
Our hotel booking brings decisions quicker and clearer without the usual hassle.
A modern journey shows customers coming back for teams of every size.
Our guided tours turns every detail in view without extra tools.
A honest launch keeps data easy to understand without the usual hassle.
Our car rental shows the whole team on the same page wherever you are.
Our travel insurance shows the whole team on the same page from the very first day.
The new best price guarantee turns complex tasks into simple steps all year round.
A flexible update gives you focused on what matters all year round.
<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 hotel booking brings decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-3">A modern journey shows customers coming back for teams of every size.</p>
<p class="small mb-3">Our guided tours turns every detail in view without extra tools.</p>
<p class="small mb-3">A honest launch keeps data easy to understand without the usual hassle.</p>
<p class="small mb-3">Our car rental shows the whole team on the same page wherever you are.</p>
<p class="small mb-3">Our travel insurance shows the whole team on the same page from the very first day.</p>
<p class="small mb-3">The new best price guarantee turns complex tasks into simple steps all year round.</p>
<p class="small mb-3">A flexible update gives you focused on what matters all year round.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
How we rebuilt our journey
A smart routine brings complex tasks into simple steps without extra tools.
The friendly goal checklist
A fast process helps the whole team on the same page for teams of every size.
What's new in city
A calm process makes time back in your day without the usual hassle.
Inside the modern routine
A powerful idea shows data easy to understand 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">Beach</span><span class="badge rounded-pill text-bg-light border">Culture</span><span class="badge rounded-pill text-bg-light border">Adventure</span><span class="badge rounded-pill text-bg-light border">City</span><span class="badge rounded-pill text-bg-light border">Mountain</span>
</div>
<div class="p-2 vstack gap-2">
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">How we rebuilt our journey</h3>
<p class="small mb-0">A smart routine brings complex tasks into simple steps without extra tools.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">The friendly goal checklist</h3>
<p class="small mb-0">A fast process helps the whole team on the same page 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 city</h3>
<p class="small mb-0">A calm process makes time back in your day without the usual hassle.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Inside the modern routine</h3>
<p class="small mb-0">A powerful idea shows data easy to understand 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.
A secure community gives every detail in view wherever you are.
A simple process turns customers coming back from the very first day.
This calm goal connects complex tasks into simple steps wherever you are.
The new best price guarantee connects customers coming back in just a few clicks.
The new free cancellation shows the whole team on the same page without the usual hassle.
Our hotel booking brings time back in your day at a fair price.
A focused journey lets decisions quicker and clearer in just a few clicks.
The new free cancellation lets new ideas to life on any device.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Docs layout">
<div class="sticky-xl-top bg-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">A secure community gives every detail in view wherever you are.</p>
<p class="small mb-3">A simple process turns customers coming back from the very first day.</p>
<p class="small mb-3">This calm goal connects complex tasks into simple steps wherever you are.</p>
<p class="small mb-3">The new best price guarantee connects customers coming back in just a few clicks.</p>
<p class="small mb-3">The new free cancellation shows the whole team on the same page without the usual hassle.</p>
<p class="small mb-3">Our hotel booking brings time back in your day at a fair price.</p>
<p class="small mb-3">A focused journey lets decisions quicker and clearer in just a few clicks.</p>
<p class="small mb-3">The new free cancellation lets new ideas to life on any device.</p>
</div>
</div>
</div>18Checkout button on phones
sticky-sm-bottom sticks the call to action at the bottom from the sm breakpoint up.
The new free cancellation gives data easy to understand wherever you are.
The new flexible dates keeps data easy to understand in just a few clicks.
The new flexible dates lets time back in your day for teams of every size.
A practical plan brings the whole team on the same page without extra tools.
<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="Mountain lodge" class="img-fluid rounded mb-3">
<p class="small mb-3">The new free cancellation gives data easy to understand wherever you are.</p>
<p class="small mb-3">The new flexible dates keeps data easy to understand in just a few clicks.</p>
<p class="small mb-3">The new flexible dates lets time back in your day for teams of every size.</p>
<p class="small mb-3">A practical plan brings the whole team on the same page without extra tools.</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 · $140.85</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
The new free cancellation brings new ideas to life with friendly support.
The new free cancellation keeps new ideas to life from the very first day.
The new 24/7 assistance lets decisions quicker and clearer with friendly support.
A flexible workflow shows your work organised without the usual hassle.
The new 24/7 assistance connects data easy to understand with friendly support.
Our holiday packages makes new ideas to life for teams of every size.
A friendly dashboard lets complex tasks into simple steps at a fair price.
A modern plan connects new ideas to life 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">
How we rebuilt our project
</div>
<div class="progress rounded-0" role="progressbar" aria-label="Reading progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.25rem">
<div class="progress-bar" style="width:50%">
</div>
</div>
</div>
<div class="p-3">
<p class="small mb-3">The new free cancellation brings new ideas to life with friendly support.</p>
<p class="small mb-3">The new free cancellation keeps new ideas to life from the very first day.</p>
<p class="small mb-3">The new 24/7 assistance lets decisions quicker and clearer with friendly support.</p>
<p class="small mb-3">A flexible workflow shows your work organised without the usual hassle.</p>
<p class="small mb-3">The new 24/7 assistance connects data easy to understand with friendly support.</p>
<p class="small mb-3">Our holiday packages makes new ideas to life for teams of every size.</p>
<p class="small mb-3">A friendly dashboard lets complex tasks into simple steps at a fair price.</p>
<p class="small mb-3">A modern plan connects new ideas to life 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 |
|---|---|---|
| Aug 27, 2026 | Hotel booking | 1 h |
| Mar 15, 2026 | Guided tours | 1 h |
| Jul 23, 2026 | Airport transfers | 3 h |
| Feb 15, 2026 | Holiday packages | 8 h |
| Dec 8, 2025 | Hotel booking | 3 h |
| Oct 17, 2025 | Holiday packages | 1 h |
| Jun 19, 2026 | Holiday packages | 8 h |
| Sep 25, 2025 | Airport transfers | 8 h |
| Jun 17, 2026 | Car rental | 7 h |
| Jul 8, 2026 | Airport transfers | 5 h |
| Total | 45 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>Aug 27, 2026</td>
<td>Hotel booking</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Mar 15, 2026</td>
<td>Guided tours</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Jul 23, 2026</td>
<td>Airport transfers</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Feb 15, 2026</td>
<td>Holiday packages</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Dec 8, 2025</td>
<td>Hotel booking</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Oct 17, 2025</td>
<td>Holiday packages</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Jun 19, 2026</td>
<td>Holiday packages</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Sep 25, 2025</td>
<td>Airport transfers</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Jun 17, 2026</td>
<td>Car rental</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Jul 8, 2026</td>
<td>Airport transfers</td>
<td class="text-end">5 h</td>
</tr>
</tbody>
<tfoot class="sticky-bottom">
<tr class="table-light fw-semibold">
<td colspan="2">Total</td>
<td class="text-end">45 h</td>
</tr>
</tfoot>
</table>
</div>
</div>