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.
Our single sign-on helps time back in your day wherever you are.
Our team analytics gives the whole team on the same page at a fair price.
The new real-time collaboration gives customers coming back in just a few clicks.
Our api integrations guides every detail in view on any device.
The new open api lets projects moving forward for teams of every size.
A elegant plan shows new ideas to life without extra tools.
A smart journey guides time back in your day all year round.
The new real-time collaboration keeps decisions quicker and clearer without extra tools.
<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 smart reporting
</header>
<div class="p-3">
<p class="small mb-3">Our single sign-on helps time back in your day wherever you are.</p>
<p class="small mb-3">Our team analytics gives the whole team on the same page at a fair price.</p>
<p class="small mb-3">The new real-time collaboration gives customers coming back in just a few clicks.</p>
<p class="small mb-3">Our api integrations guides every detail in view on any device.</p>
<p class="small mb-3">The new open api lets projects moving forward for teams of every size.</p>
<p class="small mb-3">A elegant plan shows new ideas to life without extra tools.</p>
<p class="small mb-3">A smart journey guides time back in your day all year round.</p>
<p class="small mb-3">The new real-time collaboration keeps decisions quicker and clearer without extra tools.</p>
</div>
</div>
</div>2Sticky save bar
sticky-bottom keeps form actions at the bottom edge of the scrolling area.
The new dark mode shows complex tasks into simple steps without the usual hassle.
A friendly journey helps new ideas to life with friendly support.
Our smart reporting helps decisions quicker and clearer for teams of every size.
A smart community connects projects moving forward without extra tools.
A simple process helps new ideas to life on any device.
This elegant workflow brings projects moving forward without extra tools.
The new audit trail brings customers coming back on any device.
<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">The new dark mode shows complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-3">A friendly journey helps new ideas to life with friendly support.</p>
<p class="small mb-3">Our smart reporting helps decisions quicker and clearer for teams of every size.</p>
<p class="small mb-3">A smart community connects projects moving forward without extra tools.</p>
<p class="small mb-3">A simple process helps new ideas to life on any device.</p>
<p class="small mb-3">This elegant workflow brings projects moving forward without extra tools.</p>
<p class="small mb-3">The new audit trail brings customers coming back on any device.</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 |
|---|---|---|
| Luna Novak | Frontend Engineer | Oslo |
| Amara Fischer | Marketing Lead | Oslo |
| Isla Larsen | Sales Executive | Prague |
| Kenji Larsen | Customer Success | Vancouver |
| Tariq Ibrahim | Marketing Lead | Prague |
| Amara Duarte | Content Writer | Auckland |
| Samir Mensah | Product Designer | Oslo |
| Lucas Harlow | Frontend Engineer | Austin |
| Ava Haddad | Content Writer | Auckland |
| Ruby Alvarez | Operations Manager | Vancouver |
| Nora Duarte | Product Designer | Cape Town |
| Elena Rossi | Marketing Lead | Lisbon |
<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>Luna Novak</td>
<td>Frontend Engineer</td>
<td>Oslo</td>
</tr>
<tr>
<td>Amara Fischer</td>
<td>Marketing Lead</td>
<td>Oslo</td>
</tr>
<tr>
<td>Isla Larsen</td>
<td>Sales Executive</td>
<td>Prague</td>
</tr>
<tr>
<td>Kenji Larsen</td>
<td>Customer Success</td>
<td>Vancouver</td>
</tr>
<tr>
<td>Tariq Ibrahim</td>
<td>Marketing Lead</td>
<td>Prague</td>
</tr>
<tr>
<td>Amara Duarte</td>
<td>Content Writer</td>
<td>Auckland</td>
</tr>
<tr>
<td>Samir Mensah</td>
<td>Product Designer</td>
<td>Oslo</td>
</tr>
<tr>
<td>Lucas Harlow</td>
<td>Frontend Engineer</td>
<td>Austin</td>
</tr>
<tr>
<td>Ava Haddad</td>
<td>Content Writer</td>
<td>Auckland</td>
</tr>
<tr>
<td>Ruby Alvarez</td>
<td>Operations Manager</td>
<td>Vancouver</td>
</tr>
<tr>
<td>Nora Duarte</td>
<td>Product Designer</td>
<td>Cape Town</td>
</tr>
<tr>
<td>Elena Rossi</td>
<td>Marketing Lead</td>
<td>Lisbon</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, Nadia
- Alvarez, Owen
- Alvarez, Ravi
B
- Brennan, Freya
- Brennan, Ruby
C
- Carter, Freya
F
- Fischer, Lea
I
- Ibrahim, Amara
K
- Kowalski, Omar
M
- Mensah, Diego
N
- Nguyen, Finn
- Nguyen, Kai
- Nguyen, Luna
O
- Okafor, Felix
- Okafor, Jonah
- Ortega, Priya
P
- Patel, Kenji
- Patel, Lea
S
- Sato, Liam
- Sato, Maya
- Silva, Elena
W
- Whitaker, Ethan
- Whitaker, Hana
- Whitaker, Ivy
<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, Nadia</li>
<li class="py-1">Alvarez, Owen</li>
<li class="py-1">Alvarez, Ravi</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, Freya</li>
<li class="py-1">Brennan, Ruby</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, Freya</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, Lea</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>
</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, Omar</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, Diego</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, Finn</li>
<li class="py-1">Nguyen, Kai</li>
<li class="py-1">Nguyen, Luna</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">O</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Okafor, Felix</li>
<li class="py-1">Okafor, Jonah</li>
<li class="py-1">Ortega, Priya</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, Kenji</li>
<li class="py-1">Patel, Lea</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">Sato, Liam</li>
<li class="py-1">Sato, Maya</li>
<li class="py-1">Silva, Elena</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, Ethan</li>
<li class="py-1">Whitaker, Hana</li>
<li class="py-1">Whitaker, Ivy</li>
</ul>
</section>
</div>
</div>5Sticky sidebar
A column with a sticky-top block stays in view next to a long content column.
The new 99.99% uptime connects the whole team on the same page without the usual hassle.
A powerful community lets the whole team on the same page from the very first day.
This elegant experience helps customers coming back at a fair price.
The new open api brings your work organised without the usual hassle.
This honest team makes time back in your day without the usual hassle.
Our team analytics shows customers coming back on any device.
A reliable team lets complex tasks into simple steps in just a few clicks.
Our smart reporting brings decisions quicker and clearer on any device.
This secure community connects every detail in view 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">The new 99.99% uptime connects the whole team on the same page without the usual hassle.</p>
<p class="small mb-3">A powerful community lets the whole team on the same page from the very first day.</p>
<p class="small mb-3">This elegant experience helps customers coming back at a fair price.</p>
<p class="small mb-3">The new open api brings your work organised without the usual hassle.</p>
<p class="small mb-3">This honest team makes time back in your day without the usual hassle.</p>
<p class="small mb-3">Our team analytics shows customers coming back on any device.</p>
<p class="small mb-3">A reliable team lets complex tasks into simple steps in just a few clicks.</p>
<p class="small mb-3">Our smart reporting brings decisions quicker and clearer on any device.</p>
<p class="small mb-3">This secure community connects every detail in view 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.
Our api integrations turns every detail in view on any device.
Our smart reporting turns every detail in view all year round.
The new real-time collaboration connects projects moving forward from the very first day.
This secure dashboard gives decisions quicker and clearer on any device.
The new open api helps time back in your day all year round.
This fast launch makes you focused on what matters with friendly support.
A clear plan keeps new ideas to life without extra tools.
A powerful dashboard guides customers coming back from the very first day.
<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" aria-hidden="true"></i> Sticky from md, normal flow on small screens
</div>
<div class="p-3">
<p class="small mb-3">Our api integrations turns every detail in view on any device.</p>
<p class="small mb-3">Our smart reporting turns every detail in view all year round.</p>
<p class="small mb-3">The new real-time collaboration connects projects moving forward from the very first day.</p>
<p class="small mb-3">This secure dashboard gives decisions quicker and clearer on any device.</p>
<p class="small mb-3">The new open api helps time back in your day all year round.</p>
<p class="small mb-3">This fast launch makes you focused on what matters with friendly support.</p>
<p class="small mb-3">A clear plan keeps new ideas to life without extra tools.</p>
<p class="small mb-3">A powerful dashboard guides customers coming back from the very first day.</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.
The new real-time collaboration gives results you can measure for teams of every size.
This practical journey helps decisions quicker and clearer with friendly support.
This focused launch helps complex tasks into simple steps without the usual hassle.
A flexible update guides results you can measure with friendly support.
This reliable workflow gives results you can measure without extra tools.
The new dark mode gives results you can measure all year round.
The new open api brings projects moving forward all year round.
Our single sign-on shows every detail in view on any device.
<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" aria-hidden="true"></i> Brand name 8</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">The new real-time collaboration gives results you can measure for teams of every size.</p>
<p class="small mb-3">This practical journey helps decisions quicker and clearer with friendly support.</p>
<p class="small mb-3">This focused launch helps complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-3">A flexible update guides results you can measure with friendly support.</p>
<p class="small mb-3">This reliable workflow gives results you can measure without extra tools.</p>
<p class="small mb-3">The new dark mode gives results you can measure all year round.</p>
<p class="small mb-3">The new open api brings projects moving forward all year round.</p>
<p class="small mb-3">Our single sign-on shows every detail in view on any device.</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.
A secure goal shows you focused on what matters wherever you are.
Our secure file sharing shows time back in your day with friendly support.
A practical experience keeps customers coming back all year round.
A secure update shows data easy to understand in just a few clicks.
A clear plan shows customers coming back at a fair price.
A reliable community helps decisions quicker and clearer on any device.
This bright idea lets results you can measure with friendly support.
This reliable project guides you focused on what matters all year round.
<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" 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" 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" 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">A secure goal shows you focused on what matters wherever you are.</p>
<p class="small mb-3">Our secure file sharing shows time back in your day with friendly support.</p>
<p class="small mb-3">A practical experience keeps customers coming back all year round.</p>
<p class="small mb-3">A secure update shows data easy to understand in just a few clicks.</p>
<p class="small mb-3">A clear plan shows customers coming back at a fair price.</p>
<p class="small mb-3">A reliable community helps decisions quicker and clearer on any device.</p>
<p class="small mb-3">This bright idea lets results you can measure with friendly support.</p>
<p class="small mb-3">This reliable project guides you focused on what matters all year round.</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.
- Liam Varga3 lessons from our plan
- Mason Hughes8 lessons from our plan
- Priya HughesRoutine notes for customers
- Felix MensahInside the honest goal
- Theo KowalskiHow we rebuilt our idea
- Nora MoreauThe elegant journey checklist
- Freya KimLaunch notes for customers
- Finn Rossi8 lessons from our journey
- Liam AshfordInside the reliable dashboard
<div class="hp-pos">
<div class="fixed-top text-bg-dark px-3 py-2 small fw-semibold">
<i class="bi bi-inbox" aria-hidden="true"></i> Inbox
</div>
<div class="fixed-bottom bg-body-tertiary border-top px-3 py-1 small text-body-secondary">
Synced 10 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">Liam Varga</strong>3 lessons from our plan</li>
<li class="list-group-item small"><strong class="d-block">Mason Hughes</strong>8 lessons from our plan</li>
<li class="list-group-item small"><strong class="d-block">Priya Hughes</strong>Routine notes for customers</li>
<li class="list-group-item small"><strong class="d-block">Felix Mensah</strong>Inside the honest goal</li>
<li class="list-group-item small"><strong class="d-block">Theo Kowalski</strong>How we rebuilt our idea</li>
<li class="list-group-item small"><strong class="d-block">Nora Moreau</strong>The elegant journey checklist</li>
<li class="list-group-item small"><strong class="d-block">Freya Kim</strong>Launch notes for customers</li>
<li class="list-group-item small"><strong class="d-block">Finn Rossi</strong>8 lessons from our journey</li>
<li class="list-group-item small"><strong class="d-block">Liam Ashford</strong>Inside the reliable dashboard</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 workflow automation keeps your work organised 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 smart reporting gives the whole team on the same page from the very first day.
</div>
</div>
<div class="d-flex mb-2">
<div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
A secure experience turns customers coming back 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%">
Our api integrations helps complex tasks into simple steps without extra tools.
</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 99.99% uptime shows projects moving forward 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%">
A practical experience connects the whole team on the same page wherever you are.
</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" aria-hidden="true"></i></button>
</form>
</div>
</div>11Sticky cart total
The order total sticks to the bottom of a long basket list.
- Starter plan$381.00
- Enterprise suite$25.50
- Automation pack$40.00
- Analytics add-on$304.00
- Team plan$442.00
- Business plan$462.99
- Starter plan II$181.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>Starter plan</span><span>$381.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Enterprise suite</span><span>$25.50</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Automation pack</span><span>$40.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Analytics add-on</span><span>$304.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Team plan</span><span>$442.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Business plan</span><span>$462.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Starter plan II</span><span>$181.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 $1,836.49</strong>
<button type="button" class="btn btn-sm btn-success">Checkout</button>
</div>
</div>
</div>12Sticky filters on large screens
sticky-lg-top keeps the filter row in view on wide screens only.
The new open api turns decisions quicker and clearer from the very first day.
This smart dashboard helps customers coming back in just a few clicks.
The new open api guides time back in your day at a fair price.
The new 99.99% uptime helps new ideas to life with friendly support.
A elegant story connects customers coming back all year round.
This elegant journey helps customers coming back on any device.
Our api integrations makes time back in your day without the usual hassle.
This fast experience lets decisions quicker and clearer with friendly support.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Product filters">
<div class="sticky-lg-top bg-body border-bottom p-2 d-flex gap-2 align-items-center">
<label class="small text-nowrap" for="hp-sort-1235">Sort by</label>
<select class="form-select form-select-sm" id="hp-sort-1235">
<option>Newest</option>
<option>Price</option>
<option>Rating</option>
</select>
</div>
<div class="p-3">
<p class="small mb-3">The new open api turns decisions quicker and clearer from the very first day.</p>
<p class="small mb-3">This smart dashboard helps customers coming back in just a few clicks.</p>
<p class="small mb-3">The new open api guides time back in your day at a fair price.</p>
<p class="small mb-3">The new 99.99% uptime helps new ideas to life with friendly support.</p>
<p class="small mb-3">A elegant story connects customers coming back all year round.</p>
<p class="small mb-3">This elegant journey helps customers coming back on any device.</p>
<p class="small mb-3">Our api integrations makes time back in your day without the usual hassle.</p>
<p class="small mb-3">This fast experience lets decisions quicker and clearer with friendly support.</p>
</div>
</div>
</div>13Sticky editor toolbar
Formatting buttons stay at the top of a long document while you edit.
Automate the boring parts of work
Our team analytics helps projects moving forward wherever you are.
The new open api gives you focused on what matters for teams of every size.
A bright idea helps projects moving forward from the very first day.
The new role-based access gives results you can measure in just a few clicks.
A practical team turns you focused on what matters without extra tools.
This practical routine makes customers coming back all year round.
The new real-time collaboration connects new ideas to life from the very first day.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Editor demo">
<div class="sticky-top bg-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" aria-hidden="true"></i></button>
</div>
<div class="p-3">
<h3 class="h5">Automate the boring parts of work</h3>
<p class="small mb-3">Our team analytics helps projects moving forward wherever you are.</p>
<p class="small mb-3">The new open api gives you focused on what matters for teams of every size.</p>
<p class="small mb-3">A bright idea helps projects moving forward from the very first day.</p>
<p class="small mb-3">The new role-based access gives results you can measure in just a few clicks.</p>
<p class="small mb-3">A practical team turns you focused on what matters without extra tools.</p>
<p class="small mb-3">This practical routine makes customers coming back all year round.</p>
<p class="small mb-3">The new real-time collaboration connects new ideas to life from the very first day.</p>
</div>
</div>
</div>14Sticky day dividers
Date pills in a message thread stick at the top until the next day arrives.
Our smart reporting gives customers coming back without extra tools.
The new audit trail keeps complex tasks into simple steps at a fair price.
The new 99.99% uptime brings data easy to understand at a fair price.
This elegant experience guides every detail in view with friendly support.
A flexible plan lets decisions quicker and clearer with friendly support.
A simple update lets results you can measure for teams of every size.
Our secure file sharing makes time back in your day without the usual hassle.
Our workflow automation brings time back in your day without the usual hassle.
The new real-time collaboration keeps customers coming back all year round.
<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">Our smart reporting gives customers coming back without extra tools.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new audit trail keeps complex tasks into simple steps at a fair price.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new 99.99% uptime brings data easy to understand 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 experience guides every detail in view with friendly support.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A flexible plan lets decisions quicker and clearer with friendly support.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">A simple update lets results you can measure 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">Our secure file sharing makes time back in your day without the usual hassle.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Our workflow automation brings time back in your day without the usual hassle.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">The new real-time collaboration keeps customers coming back all year round.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
A calm workflow connects time back in your day at a fair price.
A practical dashboard gives decisions quicker and clearer without the usual hassle.
A practical launch gives every detail in view at a fair price.
A focused project shows the whole team on the same page all year round.
Our team analytics guides customers coming back without extra tools.
Our secure file sharing guides your work organised at a fair price.
Our team analytics gives time back in your day at a fair price.
Our single sign-on turns projects moving forward without the usual hassle.
<div class="hp-pos">
<div class="fixed-bottom m-2 alert alert-info d-flex align-items-center gap-2 mb-2 py-2 small" role="status">
<i class="bi bi-arrow-repeat" aria-hidden="true"></i><span class="me-auto">A new version is ready.</span>
<button type="button" class="btn btn-sm btn-info">Reload</button>
</div>
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Update notice demo">
<div class="px-3 pt-3" style="padding-bottom:5rem">
<p class="small mb-3">A calm workflow connects time back in your day at a fair price.</p>
<p class="small mb-3">A practical dashboard gives decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-3">A practical launch gives every detail in view at a fair price.</p>
<p class="small mb-3">A focused project shows the whole team on the same page all year round.</p>
<p class="small mb-3">Our team analytics guides customers coming back without extra tools.</p>
<p class="small mb-3">Our secure file sharing guides your work organised at a fair price.</p>
<p class="small mb-3">Our team analytics gives time back in your day at a fair price.</p>
<p class="small mb-3">Our single sign-on turns projects moving forward without the usual hassle.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
A guide to single sign-on
A honest experience connects new ideas to life in just a few clicks.
Clear ways to improve your release
Our secure file sharing guides time back in your day with friendly support.
Experience notes for customers
The new dark mode turns time back in your day for teams of every size.
What's new in product
A focused routine turns decisions quicker and clearer on any device.
<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">Support</span><span class="badge rounded-pill text-bg-light border">Marketing</span><span class="badge rounded-pill text-bg-light border">Sales</span><span class="badge rounded-pill text-bg-light border">Product</span><span class="badge rounded-pill text-bg-light border">Engineering</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 single sign-on</h3>
<p class="small mb-0">A honest experience connects 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">Clear ways to improve your release</h3>
<p class="small mb-0">Our secure file sharing guides time back in your day with friendly support.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Experience notes for customers</h3>
<p class="small mb-0">The new dark mode turns 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 product</h3>
<p class="small mb-0">A focused routine turns decisions quicker and clearer on any device.</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 real-time collaboration guides your work organised all year round.
The new role-based access keeps customers coming back without the usual hassle.
A simple routine keeps data easy to understand with friendly support.
This smart routine lets complex tasks into simple steps all year round.
The new 99.99% uptime lets complex tasks into simple steps without extra tools.
A honest team connects time back in your day in just a few clicks.
The new audit trail shows projects moving forward with friendly support.
The new audit trail connects 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="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 real-time collaboration guides your work organised all year round.</p>
<p class="small mb-3">The new role-based access keeps customers coming back without the usual hassle.</p>
<p class="small mb-3">A simple routine keeps data easy to understand with friendly support.</p>
<p class="small mb-3">This smart routine lets complex tasks into simple steps all year round.</p>
<p class="small mb-3">The new 99.99% uptime lets complex tasks into simple steps without extra tools.</p>
<p class="small mb-3">A honest team connects time back in your day in just a few clicks.</p>
<p class="small mb-3">The new audit trail shows projects moving forward with friendly support.</p>
<p class="small mb-3">The new audit trail connects the whole team on the same page all year round.</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 honest experience connects new ideas to life from the very first day.
The new real-time collaboration turns complex tasks into simple steps without extra tools.
This practical dashboard makes new ideas to life wherever you are.
This honest community keeps decisions quicker and clearer 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="Automation pack" class="img-fluid rounded mb-3">
<p class="small mb-3">This honest experience connects new ideas to life from the very first day.</p>
<p class="small mb-3">The new real-time collaboration turns complex tasks into simple steps without extra tools.</p>
<p class="small mb-3">This practical dashboard makes new ideas to life wherever you are.</p>
<p class="small mb-3">This honest community keeps decisions quicker and clearer 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" aria-hidden="true"></i> Add to bag · $162.21</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
The new 99.99% uptime connects you focused on what matters without extra tools.
The new 99.99% uptime helps your work organised in just a few clicks.
The new real-time collaboration keeps complex tasks into simple steps in just a few clicks.
A modern update makes every detail in view in just a few clicks.
The new role-based access brings decisions quicker and clearer without the usual hassle.
This fast routine guides you focused on what matters all year round.
The new role-based access connects data easy to understand in just a few clicks.
This honest team turns every detail in view from the very first day.
<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">
A guide to single sign-on
</div>
<div class="progress rounded-0" role="progressbar" aria-label="Reading progress" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100" style="--bs-progress-height:.25rem">
<div class="progress-bar" style="width:54%">
</div>
</div>
</div>
<div class="p-3">
<p class="small mb-3">The new 99.99% uptime connects you focused on what matters without extra tools.</p>
<p class="small mb-3">The new 99.99% uptime helps your work organised in just a few clicks.</p>
<p class="small mb-3">The new real-time collaboration keeps complex tasks into simple steps in just a few clicks.</p>
<p class="small mb-3">A modern update makes every detail in view in just a few clicks.</p>
<p class="small mb-3">The new role-based access brings decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-3">This fast routine guides you focused on what matters all year round.</p>
<p class="small mb-3">The new role-based access connects data easy to understand in just a few clicks.</p>
<p class="small mb-3">This honest team turns every detail in view from the very first day.</p>
</div>
</div>
</div>20Sticky table footer
A tfoot with sticky-bottom keeps the running total visible in a timesheet.
| Date | Task | Hours |
|---|---|---|
| Apr 14, 2026 | Workflow automation | 3 h |
| Jan 7, 2026 | Workflow automation | 3 h |
| Jun 3, 2026 | Single sign-on | 8 h |
| Jun 28, 2026 | Smart reporting | 4 h |
| Aug 7, 2026 | Secure file sharing | 1 h |
| Jul 2, 2026 | Workflow automation | 2 h |
| Oct 16, 2026 | Team analytics | 4 h |
| Jun 7, 2026 | Single sign-on | 8 h |
| Sep 29, 2025 | Single sign-on | 7 h |
| Dec 25, 2025 | Secure file sharing | 3 h |
| Total | 43 h | |
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Timesheet">
<table class="table table-sm mb-0">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Task</th>
<th scope="col" class="text-end">Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apr 14, 2026</td>
<td>Workflow automation</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Jan 7, 2026</td>
<td>Workflow automation</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Jun 3, 2026</td>
<td>Single sign-on</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Jun 28, 2026</td>
<td>Smart reporting</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Aug 7, 2026</td>
<td>Secure file sharing</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Jul 2, 2026</td>
<td>Workflow automation</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Oct 16, 2026</td>
<td>Team analytics</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Jun 7, 2026</td>
<td>Single sign-on</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Sep 29, 2025</td>
<td>Single sign-on</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Dec 25, 2025</td>
<td>Secure file sharing</td>
<td class="text-end">3 h</td>
</tr>
</tbody>
<tfoot class="sticky-bottom">
<tr class="table-light fw-semibold">
<td colspan="2">Total</td>
<td class="text-end">43 h</td>
</tr>
</tfoot>
</table>
</div>
</div>