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 reliable plan gives customers coming back on any device.
A secure experience turns time back in your day wherever you are.
A practical routine gives your work organised on any device.
The new award-winning team makes you focused on what matters without the usual hassle.
Our motion graphics shows your work organised without extra tools.
The new global clients keeps decisions quicker and clearer in just a few clicks.
The new global clients lets new ideas to life with friendly support.
Our ux research makes you focused on what matters without the usual hassle.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Sticky header demo">
<header class="sticky-top bg-page border-b px-4 py-2 font-semibold">
<i class="bi bi-journal-text" aria-hidden="true"></i> A guide to campaign production
</header>
<div class="p-4">
<p class="small mb-4">This reliable plan gives customers coming back on any device.</p>
<p class="small mb-4">A secure experience turns time back in your day wherever you are.</p>
<p class="small mb-4">A practical routine gives your work organised on any device.</p>
<p class="small mb-4">The new award-winning team makes you focused on what matters without the usual hassle.</p>
<p class="small mb-4">Our motion graphics shows your work organised without extra tools.</p>
<p class="small mb-4">The new global clients keeps decisions quicker and clearer in just a few clicks.</p>
<p class="small mb-4">The new global clients lets new ideas to life with friendly support.</p>
<p class="small mb-4">Our ux research makes you focused on what matters without the usual hassle.</p>
</div>
</div>
</div>2Sticky save bar
sticky-bottom keeps form actions at the bottom edge of the scrolling area.
Our motion graphics keeps complex tasks into simple steps all year round.
Our ux research makes decisions quicker and clearer in just a few clicks.
The new senior designers only makes complex tasks into simple steps all year round.
The new weekly demos gives you focused on what matters on any device.
Our campaign production keeps your work organised wherever you are.
The new award-winning team shows decisions quicker and clearer in just a few clicks.
Our motion graphics guides time back in your day from the very first day.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Sticky save bar demo">
<div class="p-4">
<p class="small mb-4">Our motion graphics keeps complex tasks into simple steps all year round.</p>
<p class="small mb-4">Our ux research makes decisions quicker and clearer in just a few clicks.</p>
<p class="small mb-4">The new senior designers only makes complex tasks into simple steps all year round.</p>
<p class="small mb-4">The new weekly demos gives you focused on what matters on any device.</p>
<p class="small mb-4">Our campaign production keeps your work organised wherever you are.</p>
<p class="small mb-4">The new award-winning team shows decisions quicker and clearer in just a few clicks.</p>
<p class="small mb-4">Our motion graphics guides time back in your day from the very first day.</p>
</div>
<div class="sticky-bottom bg-surface-3 border-t p-2 flex justify-end gap-2">
<button type="button" class="btn btn-sm btn-light">Discard</button>
<button type="button" class="btn btn-sm btn-primary">Save changes</button>
</div>
</div>
</div>3Sticky table header
Put sticky-top on the thead so the column names stay visible in a long table.
| Name | Role | City |
|---|---|---|
| Ella Alvarez | Frontend Engineer | Oslo |
| Ava Delgado | Customer Success | Valencia |
| Ivy Ortega | Marketing Lead | Austin |
| Finn Alvarez | Content Writer | Vancouver |
| Lucas Carter | Product Designer | Barcelona |
| Samir Rossi | Sales Executive | Porto |
| Jonah Ortega | HR Partner | Vancouver |
| Priya Tanaka | Marketing Lead | Montreal |
| Kai Tanaka | Backend Engineer | Lisbon |
| Freya Hughes | Art Director | Montreal |
| Lea Carter | Project Manager | Dublin |
| Lea Moreau | Finance Lead | 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>Ella Alvarez</td>
<td>Frontend Engineer</td>
<td>Oslo</td>
</tr>
<tr>
<td>Ava Delgado</td>
<td>Customer Success</td>
<td>Valencia</td>
</tr>
<tr>
<td>Ivy Ortega</td>
<td>Marketing Lead</td>
<td>Austin</td>
</tr>
<tr>
<td>Finn Alvarez</td>
<td>Content Writer</td>
<td>Vancouver</td>
</tr>
<tr>
<td>Lucas Carter</td>
<td>Product Designer</td>
<td>Barcelona</td>
</tr>
<tr>
<td>Samir Rossi</td>
<td>Sales Executive</td>
<td>Porto</td>
</tr>
<tr>
<td>Jonah Ortega</td>
<td>HR Partner</td>
<td>Vancouver</td>
</tr>
<tr>
<td>Priya Tanaka</td>
<td>Marketing Lead</td>
<td>Montreal</td>
</tr>
<tr>
<td>Kai Tanaka</td>
<td>Backend Engineer</td>
<td>Lisbon</td>
</tr>
<tr>
<td>Freya Hughes</td>
<td>Art Director</td>
<td>Montreal</td>
</tr>
<tr>
<td>Lea Carter</td>
<td>Project Manager</td>
<td>Dublin</td>
</tr>
<tr>
<td>Lea Moreau</td>
<td>Finance Lead</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.
A
- Alvarez, Omar
- Ashford, Arjun
- Ashford, Ruby
B
- Brennan, Ethan
D
- Delgado, Isla
F
- Fischer, Ava
- Fischer, Samir
H
- Haddad, Elena
- Haddad, Luna
- Harlow, Hana
- Harlow, Sofia
I
- Ibrahim, Theo
K
- Kowalski, Priya
L
- Larsen, Leo
M
- Mensah, Ella
- Moreau, Diego
- Moreau, Freya
- Morgan, Jonah
N
- Nguyen, Aria
O
- Okafor, Ella
- Ortega, Lea
S
- Silva, Kenji
T
- Tanaka, Aria
W
- Whitaker, Nora
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Contacts">
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">A</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Alvarez, Omar</li>
<li class="py-1">Ashford, Arjun</li>
<li class="py-1">Ashford, Ruby</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">B</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Brennan, Ethan</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">D</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Delgado, Isla</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">F</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Fischer, Ava</li>
<li class="py-1">Fischer, Samir</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">H</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Haddad, Elena</li>
<li class="py-1">Haddad, Luna</li>
<li class="py-1">Harlow, Hana</li>
<li class="py-1">Harlow, Sofia</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">I</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Ibrahim, Theo</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">K</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Kowalski, Priya</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">L</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Larsen, Leo</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">M</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Mensah, Ella</li>
<li class="py-1">Moreau, Diego</li>
<li class="py-1">Moreau, Freya</li>
<li class="py-1">Morgan, Jonah</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">N</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Nguyen, Aria</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">O</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Okafor, Ella</li>
<li class="py-1">Ortega, Lea</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">S</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Silva, Kenji</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">T</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Tanaka, Aria</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-surface-2 h6 mb-0 px-4 py-1">W</h3>
<ul class="list-unstyled px-4 py-2 mb-0">
<li class="py-1">Whitaker, Nora</li>
</ul>
</section>
</div>
</div>5Sticky sidebar
A column with a sticky-top block stays in view next to a long content column.
A modern update keeps time back in your day in just a few clicks.
This secure launch turns your work organised on any device.
Our campaign production turns results you can measure with friendly support.
The new fixed-price projects gives every detail in view in just a few clicks.
Our motion graphics connects your work organised in just a few clicks.
This reliable launch guides projects moving forward for teams of every size.
This reliable launch helps projects moving forward with friendly support.
This focused launch connects decisions quicker and clearer without the usual hassle.
This bright journey keeps the whole team on the same page from the very first day.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Article with sidebar">
<div class="row g-0">
<div class="col-4 border-e">
<nav class="sticky-top p-2 small" aria-label="On this page">
<div class="font-semibold mb-1">
On this page
</div>
<a class="block" href="#">Overview</a><a class="block" href="#">Setup</a><a class="block" href="#">FAQ</a>
</nav>
</div>
<div class="col-8 p-4">
<p class="small mb-4">A modern update keeps time back in your day in just a few clicks.</p>
<p class="small mb-4">This secure launch turns your work organised on any device.</p>
<p class="small mb-4">Our campaign production turns results you can measure with friendly support.</p>
<p class="small mb-4">The new fixed-price projects gives every detail in view in just a few clicks.</p>
<p class="small mb-4">Our motion graphics connects your work organised in just a few clicks.</p>
<p class="small mb-4">This reliable launch guides projects moving forward for teams of every size.</p>
<p class="small mb-4">This reliable launch helps projects moving forward with friendly support.</p>
<p class="small mb-4">This focused launch connects decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-4">This bright journey keeps the whole team on the same page from the very first day.</p>
</div>
</div>
</div>
</div>6Responsive sticky (md and up)
sticky-md-top only sticks from the md breakpoint; on phones the bar scrolls away with the page.
This elegant idea brings decisions quicker and clearer wherever you are.
Our content strategy helps your work organised in just a few clicks.
The new weekly demos guides decisions quicker and clearer in just a few clicks.
A practical experience gives the whole team on the same page from the very first day.
A flexible process connects every detail in view wherever you are.
This focused update brings the whole team on the same page with friendly support.
Our content strategy connects results you can measure at a fair price.
Our content strategy keeps time back in your day on any device.
<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-4 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-4">
<p class="small mb-4">This elegant idea brings decisions quicker and clearer wherever you are.</p>
<p class="small mb-4">Our content strategy helps your work organised in just a few clicks.</p>
<p class="small mb-4">The new weekly demos guides decisions quicker and clearer in just a few clicks.</p>
<p class="small mb-4">A practical experience gives the whole team on the same page from the very first day.</p>
<p class="small mb-4">A flexible process connects every detail in view wherever you are.</p>
<p class="small mb-4">This focused update brings the whole team on the same page with friendly support.</p>
<p class="small mb-4">Our content strategy connects results you can measure at a fair price.</p>
<p class="small mb-4">Our content strategy keeps time back in your day on any device.</p>
</div>
</div>
</div>7Fixed-top navbar
fixed-top pins a navbar to the top edge; the frame acts as the viewport, so the bar stays inside the example.
Our ux research keeps results you can measure without the usual hassle.
The new senior designers only helps you focused on what matters wherever you are.
Our brand identity lets new ideas to life wherever you are.
This calm story keeps the whole team on the same page all year round.
Our ux research gives data easy to understand without extra tools.
This clear plan keeps results you can measure for teams of every size.
This focused idea lets projects moving forward wherever you are.
A bright process brings new ideas to life without the usual hassle.
<div class="hp-pos">
<nav class="navbar fixed-top bg-page border-b px-4 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 4</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-4 pb-4" style="padding-top:4rem">
<p class="small mb-4">Our ux research keeps results you can measure without the usual hassle.</p>
<p class="small mb-4">The new senior designers only helps you focused on what matters wherever you are.</p>
<p class="small mb-4">Our brand identity lets new ideas to life wherever you are.</p>
<p class="small mb-4">This calm story keeps the whole team on the same page all year round.</p>
<p class="small mb-4">Our ux research gives data easy to understand without extra tools.</p>
<p class="small mb-4">This clear plan keeps results you can measure for teams of every size.</p>
<p class="small mb-4">This focused idea lets projects moving forward wherever you are.</p>
<p class="small mb-4">A bright process brings new ideas to life without the usual hassle.</p>
</div>
</div>
</div>8Fixed-bottom tab bar
A mobile style tab bar with fixed-bottom; content gets bottom padding so nothing hides behind it.
Our ux research brings every detail in view on any device.
A fast dashboard guides projects moving forward in just a few clicks.
The new fixed-price projects brings your work organised from the very first day.
This bright idea brings results you can measure wherever you are.
Our brand identity helps your work organised without the usual hassle.
A focused community lets decisions quicker and clearer wherever you are.
Our motion graphics connects the whole team on the same page from the very first day.
A simple project shows time back in your day at a fair price.
<div class="hp-pos">
<nav class="fixed-bottom flex bg-page border-t" aria-label="App">
<a href="#" class="flex-auto text-center small py-2 no-underline text-primary" aria-current="page"><i class="bi bi-house-fill" aria-hidden="true"></i><span class="block">Home</span></a><a href="#" class="flex-auto text-center small py-2 no-underline text-muted"><i class="bi bi-search" aria-hidden="true"></i><span class="block">Search</span></a><a href="#" class="flex-auto text-center small py-2 no-underline text-muted"><i class="bi bi-heart-fill" aria-hidden="true"></i><span class="block">Saved</span></a><a href="#" class="flex-auto text-center small py-2 no-underline text-muted"><i class="bi bi-person-fill" aria-hidden="true"></i><span class="block">Profile</span></a>
</nav>
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Mobile tab bar demo">
<div class="px-4 pt-4" style="padding-bottom:4.5rem">
<p class="small mb-4">Our ux research brings every detail in view on any device.</p>
<p class="small mb-4">A fast dashboard guides projects moving forward in just a few clicks.</p>
<p class="small mb-4">The new fixed-price projects brings your work organised from the very first day.</p>
<p class="small mb-4">This bright idea brings results you can measure wherever you are.</p>
<p class="small mb-4">Our brand identity helps your work organised without the usual hassle.</p>
<p class="small mb-4">A focused community lets decisions quicker and clearer wherever you are.</p>
<p class="small mb-4">Our motion graphics connects the whole team on the same page from the very first day.</p>
<p class="small mb-4">A simple project shows time back in your day at a fair price.</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.
- Theo DuarteInside the clear update
- Mateo SatoWhat's new in print
- Omar AshfordSimple ways to improve your workflow
- Mason MoreauHow we rebuilt our dashboard
- Lea LindqvistInside the flexible idea
- Elena MensahInside the modern community
- Luna Ashford6 lessons from our journey
- Nadia HughesThe powerful experience checklist
- Ava MensahA guide to web design
<div class="hp-pos">
<div class="fixed-top text-bg-dark px-4 py-2 small font-semibold">
<i class="bi bi-inbox-fill" aria-hidden="true"></i> Inbox
</div>
<div class="fixed-bottom bg-surface-3 border-t px-4 py-1 small text-muted">
Synced 3 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="block">Theo Duarte</strong>Inside the clear update</li>
<li class="list-group-item small"><strong class="block">Mateo Sato</strong>What's new in print</li>
<li class="list-group-item small"><strong class="block">Omar Ashford</strong>Simple ways to improve your workflow</li>
<li class="list-group-item small"><strong class="block">Mason Moreau</strong>How we rebuilt our dashboard</li>
<li class="list-group-item small"><strong class="block">Lea Lindqvist</strong>Inside the flexible idea</li>
<li class="list-group-item small"><strong class="block">Elena Mensah</strong>Inside the modern community</li>
<li class="list-group-item small"><strong class="block">Luna Ashford</strong>6 lessons from our journey</li>
<li class="list-group-item small"><strong class="block">Nadia Hughes</strong>The powerful experience checklist</li>
<li class="list-group-item small"><strong class="block">Ava Mensah</strong>A guide to web design</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-4">
<div class="flex mb-2">
<div class="px-4 py-2 rounded-lg small bg-surface-3" style="max-width:75%">
This friendly experience helps results you can measure all year round.
</div>
</div>
<div class="flex justify-end mb-2">
<div class="px-4 py-2 rounded-lg small text-bg-primary" style="max-width:75%">
A clear update lets every detail in view on any device.
</div>
</div>
<div class="flex mb-2">
<div class="px-4 py-2 rounded-lg small bg-surface-3" style="max-width:75%">
The new fixed-price projects connects decisions quicker and clearer from the very first day.
</div>
</div>
<div class="flex justify-end mb-2">
<div class="px-4 py-2 rounded-lg small text-bg-primary" style="max-width:75%">
This calm workflow lets new ideas to life at a fair price.
</div>
</div>
<div class="flex mb-2">
<div class="px-4 py-2 rounded-lg small bg-surface-3" style="max-width:75%">
This focused community connects the whole team on the same page at a fair price.
</div>
</div>
<div class="flex justify-end mb-2">
<div class="px-4 py-2 rounded-lg small text-bg-primary" style="max-width:75%">
Our content strategy lets complex tasks into simple steps without extra tools.
</div>
</div>
</div>
<form class="sticky-bottom bg-page border-t p-2 flex gap-2">
<label class="sr-only" 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.
- Design retainer$135.99
- Website package$405.99
- Brand sprint$186.99
- Video edit$471.00
- Social kit$63.00
- Launch campaign$317.99
- Design retainer Lite$359.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 flex justify-between small"><span>Design retainer</span><span>$135.99</span></li>
<li class="list-group-item flex justify-between small"><span>Website package</span><span>$405.99</span></li>
<li class="list-group-item flex justify-between small"><span>Brand sprint</span><span>$186.99</span></li>
<li class="list-group-item flex justify-between small"><span>Video edit</span><span>$471.00</span></li>
<li class="list-group-item flex justify-between small"><span>Social kit</span><span>$63.00</span></li>
<li class="list-group-item flex justify-between small"><span>Launch campaign</span><span>$317.99</span></li>
<li class="list-group-item flex justify-between small"><span>Design retainer Lite</span><span>$359.00</span></li>
</ul>
<div class="sticky-bottom text-bg-light border-t flex justify-between items-center px-4 py-2">
<strong>Total $1,939.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.
Our motion graphics keeps complex tasks into simple steps without the usual hassle.
This clear launch turns your work organised in just a few clicks.
This practical story lets complex tasks into simple steps at a fair price.
The new senior designers only turns you focused on what matters wherever you are.
This calm dashboard lets data easy to understand without extra tools.
Our content strategy makes time back in your day from the very first day.
Our campaign production keeps complex tasks into simple steps with friendly support.
Our brand identity helps projects moving forward 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-page border-b p-2 flex gap-2 items-center">
<label class="small whitespace-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-4">
<p class="small mb-4">Our motion graphics keeps complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-4">This clear launch turns your work organised in just a few clicks.</p>
<p class="small mb-4">This practical story lets complex tasks into simple steps at a fair price.</p>
<p class="small mb-4">The new senior designers only turns you focused on what matters wherever you are.</p>
<p class="small mb-4">This calm dashboard lets data easy to understand without extra tools.</p>
<p class="small mb-4">Our content strategy makes time back in your day from the very first day.</p>
<p class="small mb-4">Our campaign production keeps complex tasks into simple steps with friendly support.</p>
<p class="small mb-4">Our brand identity helps projects moving forward 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.
Strategy, design and code under one roof
The new fixed-price projects brings the whole team on the same page in just a few clicks.
This honest process gives the whole team on the same page without the usual hassle.
The new weekly demos makes results you can measure on any device.
Our content strategy connects results you can measure without extra tools.
The new fast turnaround lets your work organised at a fair price.
This honest release lets results you can measure at a fair price.
The new fast turnaround gives every detail in view in just a few clicks.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Editor demo">
<div class="sticky-top bg-surface-3 border-b p-1 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-4">
<h3 class="h5">Strategy, design and code under one roof</h3>
<p class="small mb-4">The new fixed-price projects brings the whole team on the same page in just a few clicks.</p>
<p class="small mb-4">This honest process gives the whole team on the same page without the usual hassle.</p>
<p class="small mb-4">The new weekly demos makes results you can measure on any device.</p>
<p class="small mb-4">Our content strategy connects results you can measure without extra tools.</p>
<p class="small mb-4">The new fast turnaround lets your work organised at a fair price.</p>
<p class="small mb-4">This honest release lets results you can measure at a fair price.</p>
<p class="small mb-4">The new fast turnaround gives every detail in view in just a few clicks.</p>
</div>
</div>
</div>14Sticky day dividers
Date pills in a message thread stick at the top until the next day arrives.
This honest community guides the whole team on the same page with friendly support.
A focused launch guides customers coming back for teams of every size.
Our content strategy shows data easy to understand from the very first day.
This modern update helps decisions quicker and clearer for teams of every size.
Our motion graphics connects decisions quicker and clearer all year round.
Our brand identity helps time back in your day on any device.
This clear idea lets data easy to understand from the very first day.
Our motion graphics brings decisions quicker and clearer with friendly support.
The new fast turnaround gives new ideas to life at a fair price.
<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-full text-bg-secondary">Monday</span>
</div>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">This honest community guides the whole team on the same page with friendly support.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">A focused launch guides customers coming back for teams of every size.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">Our content strategy shows data easy to understand from the very first day.</p>
<div class="sticky-top text-center py-1">
<span class="badge rounded-full text-bg-secondary">Yesterday</span>
</div>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">This modern update helps decisions quicker and clearer for teams of every size.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">Our motion graphics connects decisions quicker and clearer all year round.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">Our brand identity helps time back in your day on any device.</p>
<div class="sticky-top text-center py-1">
<span class="badge rounded-full text-bg-secondary">Today</span>
</div>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">This clear idea lets data easy to understand from the very first day.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">Our motion graphics brings decisions quicker and clearer with friendly support.</p>
<p class="small bg-surface-3 rounded-lg px-4 py-2 mx-4">The new fast turnaround gives new ideas to life at a fair price.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
A powerful project brings data easy to understand from the very first day.
The new fixed-price projects connects projects moving forward without extra tools.
The new weekly demos brings results you can measure for teams of every size.
The new fixed-price projects keeps you focused on what matters in just a few clicks.
This fast story connects the whole team on the same page on any device.
This simple goal makes results you can measure from the very first day.
A calm routine makes you focused on what matters for teams of every size.
A fast project helps time back in your day for teams of every size.
<div class="hp-pos">
<div class="fixed-bottom m-2 alert alert-info flex 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-4 pt-4" style="padding-bottom:5rem">
<p class="small mb-4">A powerful project brings data easy to understand from the very first day.</p>
<p class="small mb-4">The new fixed-price projects connects projects moving forward without extra tools.</p>
<p class="small mb-4">The new weekly demos brings results you can measure for teams of every size.</p>
<p class="small mb-4">The new fixed-price projects keeps you focused on what matters in just a few clicks.</p>
<p class="small mb-4">This fast story connects the whole team on the same page on any device.</p>
<p class="small mb-4">This simple goal makes results you can measure from the very first day.</p>
<p class="small mb-4">A calm routine makes you focused on what matters for teams of every size.</p>
<p class="small mb-4">A fast project helps time back in your day for teams of every size.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
How we rebuilt our dashboard
This fast routine makes time back in your day without the usual hassle.
A guide to content strategy
A powerful team turns time back in your day without the usual hassle.
How we rebuilt our plan
This modern dashboard keeps results you can measure on any device.
6 lessons from our goal
This focused update turns 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="Category feed">
<div class="sticky-top bg-page p-2 flex flex-wrap gap-1 border-b">
<span class="badge rounded-full text-bg-light border">Web</span><span class="badge rounded-full text-bg-light border">Branding</span><span class="badge rounded-full text-bg-light border">Social</span><span class="badge rounded-full text-bg-light border">Motion</span><span class="badge rounded-full text-bg-light border">Print</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 dashboard</h3>
<p class="small mb-0">This fast routine 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">A guide to content strategy</h3>
<p class="small mb-0">A powerful team turns 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">How we rebuilt our plan</h3>
<p class="small mb-0">This modern dashboard keeps results you can measure on any device.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">6 lessons from our goal</h3>
<p class="small mb-0">This focused update turns the whole team on the same page without extra tools.</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 launch helps complex tasks into simple steps without the usual hassle.
This flexible update guides time back in your day at a fair price.
The new weekly demos keeps projects moving forward in just a few clicks.
The new senior designers only gives customers coming back on any device.
The new award-winning team makes projects moving forward from the very first day.
The new award-winning team brings results you can measure without extra tools.
A powerful update helps time back in your day with friendly support.
Our campaign production keeps decisions quicker and clearer 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-surface-3 border-b px-4 py-2 small">
<i class="bi bi-list-nested" aria-hidden="true"></i> Contents: Introduction · Install · Usage
</div>
<div class="p-4">
<p class="small mb-4">A secure launch helps complex tasks into simple steps without the usual hassle.</p>
<p class="small mb-4">This flexible update guides time back in your day at a fair price.</p>
<p class="small mb-4">The new weekly demos keeps projects moving forward in just a few clicks.</p>
<p class="small mb-4">The new senior designers only gives customers coming back on any device.</p>
<p class="small mb-4">The new award-winning team makes projects moving forward from the very first day.</p>
<p class="small mb-4">The new award-winning team brings results you can measure without extra tools.</p>
<p class="small mb-4">A powerful update helps time back in your day with friendly support.</p>
<p class="small mb-4">Our campaign production keeps decisions quicker and clearer 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 global clients gives decisions quicker and clearer without the usual hassle.
A reliable update lets projects moving forward without the usual hassle.
The new weekly demos lets results you can measure wherever you are.
This fast plan lets complex tasks into simple steps with friendly support.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Product details">
<div class="p-4">
<img src="../assets/img/product-5.svg" alt="Video edit" class="img-fluid rounded-md mb-4">
<p class="small mb-4">The new global clients gives decisions quicker and clearer without the usual hassle.</p>
<p class="small mb-4">A reliable update lets projects moving forward without the usual hassle.</p>
<p class="small mb-4">The new weekly demos lets results you can measure wherever you are.</p>
<p class="small mb-4">This fast plan lets complex tasks into simple steps with friendly support.</p>
</div>
<div class="sticky-sm-bottom bg-page border-t p-2">
<button type="button" class="btn btn-primary w-full"><i class="bi bi-bag-plus-fill" aria-hidden="true"></i> Add to bag · $185.87</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
Our campaign production keeps decisions quicker and clearer all year round.
The new fast turnaround brings new ideas to life at a fair price.
A smart community turns complex tasks into simple steps for teams of every size.
This honest journey gives you focused on what matters at a fair price.
This fast update gives results you can measure without the usual hassle.
A clear experience connects customers coming back wherever you are.
This smart workflow guides time back in your day for teams of every size.
This calm experience brings your work organised without extra tools.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Reading demo">
<div class="sticky-top bg-page">
<div class="px-4 py-2 small font-semibold">
How we rebuilt our process
</div>
<div class="progress rounded-none" role="progressbar" aria-label="Reading progress" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100" style="--ui-progress-height:.25rem">
<div class="progress-bar" style="width:37%">
</div>
</div>
</div>
<div class="p-4">
<p class="small mb-4">Our campaign production keeps decisions quicker and clearer all year round.</p>
<p class="small mb-4">The new fast turnaround brings new ideas to life at a fair price.</p>
<p class="small mb-4">A smart community turns complex tasks into simple steps for teams of every size.</p>
<p class="small mb-4">This honest journey gives you focused on what matters at a fair price.</p>
<p class="small mb-4">This fast update gives results you can measure without the usual hassle.</p>
<p class="small mb-4">A clear experience connects customers coming back wherever you are.</p>
<p class="small mb-4">This smart workflow guides time back in your day for teams of every size.</p>
<p class="small mb-4">This calm experience brings your work organised without extra tools.</p>
</div>
</div>
</div>20Sticky table footer
A tfoot with sticky-bottom keeps the running total visible in a timesheet.
| Date | Task | Hours |
|---|---|---|
| Nov 5, 2025 | Web design | 3 h |
| Sep 18, 2026 | Content strategy | 2 h |
| Nov 27, 2025 | UX research | 7 h |
| Sep 20, 2026 | Content strategy | 4 h |
| Sep 3, 2026 | Motion graphics | 2 h |
| Dec 12, 2025 | Web design | 8 h |
| Jan 13, 2026 | UX research | 1 h |
| Jan 8, 2026 | Campaign production | 3 h |
| Mar 12, 2026 | Brand identity | 4 h |
| Feb 13, 2026 | UX research | 4 h |
| Total | 38 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>Nov 5, 2025</td>
<td>Web design</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Sep 18, 2026</td>
<td>Content strategy</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Nov 27, 2025</td>
<td>UX research</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Sep 20, 2026</td>
<td>Content strategy</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Sep 3, 2026</td>
<td>Motion graphics</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Dec 12, 2025</td>
<td>Web design</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Jan 13, 2026</td>
<td>UX research</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Jan 8, 2026</td>
<td>Campaign production</td>
<td class="text-end">3 h</td>
</tr>
<tr>
<td>Mar 12, 2026</td>
<td>Brand identity</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Feb 13, 2026</td>
<td>UX research</td>
<td class="text-end">4 h</td>
</tr>
</tbody>
<tfoot class="sticky-bottom">
<tr class="table-light font-semibold">
<td colspan="2">Total</td>
<td class="text-end">38 h</td>
</tr>
</tfoot>
</table>
</div>
</div>