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.
The networking app helps you meet the right people before you arrive.
We keep things simple, so you can focus on what matters to you.
Three days of keynotes, hands-on workshops and evening meetups.
More than eighty speakers share what they have learned the hard way.
We measure success by how many attendees come back and tell their friends.
We listen first, then build a plan around what you actually need.
Every attendee receives a certificate of participation.
Every detail is handled by people who care about getting it right.
<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> Looking back at a busy season
</header>
<div class="p-3">
<p class="small mb-3">The networking app helps you meet the right people before you arrive.</p>
<p class="small mb-3">We keep things simple, so you can focus on what matters to you.</p>
<p class="small mb-3">Three days of keynotes, hands-on workshops and evening meetups.</p>
<p class="small mb-3">More than eighty speakers share what they have learned the hard way.</p>
<p class="small mb-3">We measure success by how many attendees come back and tell their friends.</p>
<p class="small mb-3">We listen first, then build a plan around what you actually need.</p>
<p class="small mb-3">Every attendee receives a certificate of participation.</p>
<p class="small mb-3">Every detail is handled by people who care about getting it right.</p>
</div>
</div>
</div>2Sticky save bar
sticky-bottom keeps form actions at the bottom edge of the scrolling area.
Group tickets include a private meeting room for your team.
Friendly people answer your questions quickly, by phone, chat or email.
Our evening party is the best place to turn talks into friendships.
Early bird tickets save you up to forty percent until the end of the month.
Virtual passes let you join the main stage live from anywhere.
Sponsors meet decision-makers in a relaxed, friendly setting.
Every detail is handled by people who care about getting it right.
<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">Group tickets include a private meeting room for your team.</p>
<p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</p>
<p class="small mb-3">Our evening party is the best place to turn talks into friendships.</p>
<p class="small mb-3">Early bird tickets save you up to forty percent until the end of the month.</p>
<p class="small mb-3">Virtual passes let you join the main stage live from anywhere.</p>
<p class="small mb-3">Sponsors meet decision-makers in a relaxed, friendly setting.</p>
<p class="small mb-3">Every detail is handled by people who care about getting it right.</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 |
|---|---|---|
| Elena Patel | Finance Lead | Melbourne |
| Maya Okafor | HR Partner | Kyoto |
| Finn Nguyen | Backend Engineer | Lisbon |
| Lucas Kowalski | Art Director | Porto |
| Ivy Duarte | Product Designer | Dublin |
| Ruby Varga | Backend Engineer | Auckland |
| Lea Harlow | Product Designer | Seoul |
| Mateo Morgan | QA Engineer | Porto |
| Hana Lindqvist | Marketing Lead | Oslo |
| Felix Tanaka | Product Designer | Lisbon |
| Nadia Kim | Finance Lead | Cape Town |
| Maya Haddad | Operations Manager | Barcelona |
<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>Elena Patel</td>
<td>Finance Lead</td>
<td>Melbourne</td>
</tr>
<tr>
<td>Maya Okafor</td>
<td>HR Partner</td>
<td>Kyoto</td>
</tr>
<tr>
<td>Finn Nguyen</td>
<td>Backend Engineer</td>
<td>Lisbon</td>
</tr>
<tr>
<td>Lucas Kowalski</td>
<td>Art Director</td>
<td>Porto</td>
</tr>
<tr>
<td>Ivy Duarte</td>
<td>Product Designer</td>
<td>Dublin</td>
</tr>
<tr>
<td>Ruby Varga</td>
<td>Backend Engineer</td>
<td>Auckland</td>
</tr>
<tr>
<td>Lea Harlow</td>
<td>Product Designer</td>
<td>Seoul</td>
</tr>
<tr>
<td>Mateo Morgan</td>
<td>QA Engineer</td>
<td>Porto</td>
</tr>
<tr>
<td>Hana Lindqvist</td>
<td>Marketing Lead</td>
<td>Oslo</td>
</tr>
<tr>
<td>Felix Tanaka</td>
<td>Product Designer</td>
<td>Lisbon</td>
</tr>
<tr>
<td>Nadia Kim</td>
<td>Finance Lead</td>
<td>Cape Town</td>
</tr>
<tr>
<td>Maya Haddad</td>
<td>Operations Manager</td>
<td>Barcelona</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, Diego
- Alvarez, Ivy
- Ashford, Lucas
B
- Brennan, Mason
- Brennan, Zoe
D
- Delgado, Chloe
- Delgado, Elena
F
- Fischer, Ava
H
- Hughes, Finn
- Hughes, Jonah
I
- Ibrahim, Freya
K
- Kim, Kenji
- Kowalski, Priya
M
- Moreau, Nora
N
- Novak, Leo
O
- Okafor, Luna
- Ortega, Arjun
Q
- Quinn, Isla
R
- Rossi, Amara
- Rossi, Kai
S
- Sato, Mia
- Sato, Theo
- Silva, Ethan
W
- Whitaker, Owen
<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, Diego</li>
<li class="py-1">Alvarez, Ivy</li>
<li class="py-1">Ashford, Lucas</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, Mason</li>
<li class="py-1">Brennan, Zoe</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">D</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Delgado, Chloe</li>
<li class="py-1">Delgado, Elena</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, Ava</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">Hughes, Finn</li>
<li class="py-1">Hughes, Jonah</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, Freya</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">K</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Kim, Kenji</li>
<li class="py-1">Kowalski, Priya</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">Moreau, Nora</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, Leo</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, Luna</li>
<li class="py-1">Ortega, Arjun</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, Isla</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, Amara</li>
<li class="py-1">Rossi, Kai</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, Mia</li>
<li class="py-1">Sato, Theo</li>
<li class="py-1">Silva, Ethan</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, Owen</li>
</ul>
</section>
</div>
</div>5Sticky sidebar
A column with a sticky-top block stays in view next to a long content column.
More than eighty speakers share what they have learned the hard way.
The networking app helps you meet the right people before you arrive.
Friendly people answer your questions quickly, by phone, chat or email.
Every attendee receives a certificate of participation.
Start in minutes and get help from a real person whenever you need it.
Early bird tickets save you up to forty percent until the end of the month.
We keep things simple, so you can focus on what matters to you.
Three days of keynotes, hands-on workshops and evening meetups.
Workshops are limited to thirty seats, so everyone gets hands-on time.
<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">More than eighty speakers share what they have learned the hard way.</p>
<p class="small mb-3">The networking app helps you meet the right people before you arrive.</p>
<p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</p>
<p class="small mb-3">Every attendee receives a certificate of participation.</p>
<p class="small mb-3">Start in minutes and get help from a real person whenever you need it.</p>
<p class="small mb-3">Early bird tickets save you up to forty percent until the end of the month.</p>
<p class="small mb-3">We keep things simple, so you can focus on what matters to you.</p>
<p class="small mb-3">Three days of keynotes, hands-on workshops and evening meetups.</p>
<p class="small mb-3">Workshops are limited to thirty seats, so everyone gets hands-on time.</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 team has done this many times, so you never have to guess.
The venue is a short walk from the station and fully accessible.
We listen first, then build a plan around what you actually need.
We measure success by how many attendees come back and tell their friends.
Clear prices, honest advice and no surprises along the way.
Our evening party is the best place to turn talks into friendships.
Every session is recorded, so you can catch up on anything you missed.
Thousands of attendees already trust us, and we work hard to keep it that way.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Responsive sticky demo">
<div class="sticky-md-top text-bg-primary 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 team has done this many times, so you never have to guess.</p>
<p class="small mb-3">The venue is a short walk from the station and fully accessible.</p>
<p class="small mb-3">We listen first, then build a plan around what you actually need.</p>
<p class="small mb-3">We measure success by how many attendees come back and tell their friends.</p>
<p class="small mb-3">Clear prices, honest advice and no surprises along the way.</p>
<p class="small mb-3">Our evening party is the best place to turn talks into friendships.</p>
<p class="small mb-3">Every session is recorded, so you can catch up on anything you missed.</p>
<p class="small mb-3">Thousands of attendees already trust us, and we work hard to keep it that way.</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.
Group tickets include a private meeting room for your team.
Our team has done this many times, so you never have to guess.
Sponsors meet decision-makers in a relaxed, friendly setting.
Three days of keynotes, hands-on workshops and evening meetups.
More than eighty speakers share what they have learned the hard way.
We measure success by how many attendees come back and tell their friends.
Group tickets include a private meeting room for your team.
Friendly people answer your questions quickly, by phone, chat or email.
<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> Koraan Hub</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">Group tickets include a private meeting room for your team.</p>
<p class="small mb-3">Our team has done this many times, so you never have to guess.</p>
<p class="small mb-3">Sponsors meet decision-makers in a relaxed, friendly setting.</p>
<p class="small mb-3">Three days of keynotes, hands-on workshops and evening meetups.</p>
<p class="small mb-3">More than eighty speakers share what they have learned the hard way.</p>
<p class="small mb-3">We measure success by how many attendees come back and tell their friends.</p>
<p class="small mb-3">Group tickets include a private meeting room for your team.</p>
<p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</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.
Thousands of attendees already trust us, and we work hard to keep it that way.
Virtual passes let you join the main stage live from anywhere.
Workshops are limited to thirty seats, so everyone gets hands-on time.
We listen first, then build a plan around what you actually need.
Every session is recorded, so you can catch up on anything you missed.
Early bird tickets save you up to forty percent until the end of the month.
Every attendee receives a certificate of participation.
Every detail is handled by people who care about getting it right.
<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">Thousands of attendees already trust us, and we work hard to keep it that way.</p>
<p class="small mb-3">Virtual passes let you join the main stage live from anywhere.</p>
<p class="small mb-3">Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
<p class="small mb-3">We listen first, then build a plan around what you actually need.</p>
<p class="small mb-3">Every session is recorded, so you can catch up on anything you missed.</p>
<p class="small mb-3">Early bird tickets save you up to forty percent until the end of the month.</p>
<p class="small mb-3">Every attendee receives a certificate of participation.</p>
<p class="small mb-3">Every detail is handled by people who care about getting it right.</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.
- Ella AshfordHow to pitch a talk that gets accepted
- Liam FischerBehind the scenes: building the stage
- Sofia QuinnHow to get the most out of a conference
- Aria MoreauFive things we learned this year
- Samir DuarteHighlights from last year's workshops
- Tariq HarlowJoining online: how the virtual pass works
- Ravi WhitakerA guide to the city for visiting attendees
- Omar CarterAnnouncing our first keynote speakers
- Noah MensahOur favourite tips for busy weeks
<div class="hp-pos">
<div class="fixed-top text-bg-dark px-3 py-2 small fw-semibold">
<i class="bi bi-inbox-fill" aria-hidden="true"></i> Inbox
</div>
<div class="fixed-bottom bg-body-tertiary border-top px-3 py-1 small text-body-secondary">
Synced 1 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">Ella Ashford</strong>How to pitch a talk that gets accepted</li>
<li class="list-group-item small"><strong class="d-block">Liam Fischer</strong>Behind the scenes: building the stage</li>
<li class="list-group-item small"><strong class="d-block">Sofia Quinn</strong>How to get the most out of a conference</li>
<li class="list-group-item small"><strong class="d-block">Aria Moreau</strong>Five things we learned this year</li>
<li class="list-group-item small"><strong class="d-block">Samir Duarte</strong>Highlights from last year's workshops</li>
<li class="list-group-item small"><strong class="d-block">Tariq Harlow</strong>Joining online: how the virtual pass works</li>
<li class="list-group-item small"><strong class="d-block">Ravi Whitaker</strong>A guide to the city for visiting attendees</li>
<li class="list-group-item small"><strong class="d-block">Omar Carter</strong>Announcing our first keynote speakers</li>
<li class="list-group-item small"><strong class="d-block">Noah Mensah</strong>Our favourite tips for busy weeks</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%">
The networking app helps you meet the right people before you arrive.
</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 evening party is the best place to turn talks into friendships.
</div>
</div>
<div class="d-flex mb-2">
<div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
We keep things simple, so you can focus on what matters to you.
</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%">
Start in minutes and get help from a real person whenever you need it.
</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 venue is a short walk from the station and fully accessible.
</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%">
Clear prices, honest advice and no surprises along the way.
</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.
- Workshop ticket$139.99
- Early bird pass$284.00
- Masterclass$234.00
- Evening meetup$24.99
- Full access pass$454.00
- Student pass$139.00
- VIP pass$808.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>Workshop ticket</span><span>$139.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Early bird pass</span><span>$284.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Masterclass</span><span>$234.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Evening meetup</span><span>$24.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Full access pass</span><span>$454.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Student pass</span><span>$139.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>VIP pass</span><span>$808.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 $2,084.97</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 venue is a short walk from the station and fully accessible.
Workshops are limited to thirty seats, so everyone gets hands-on time.
Group tickets include a private meeting room for your team.
We measure success by how many attendees come back and tell their friends.
Every detail is handled by people who care about getting it right.
Early bird tickets save you up to forty percent until the end of the month.
We listen first, then build a plan around what you actually need.
Clear prices, honest advice and no surprises along the way.
<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 venue is a short walk from the station and fully accessible.</p>
<p class="small mb-3">Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
<p class="small mb-3">Group tickets include a private meeting room for your team.</p>
<p class="small mb-3">We measure success by how many attendees come back and tell their friends.</p>
<p class="small mb-3">Every detail is handled by people who care about getting it right.</p>
<p class="small mb-3">Early bird tickets save you up to forty percent until the end of the month.</p>
<p class="small mb-3">We listen first, then build a plan around what you actually need.</p>
<p class="small mb-3">Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
</div>13Sticky editor toolbar
Formatting buttons stay at the top of a long document while you edit.
Three days that change how you work
More than eighty speakers share what they have learned the hard way.
Friendly people answer your questions quickly, by phone, chat or email.
Virtual passes let you join the main stage live from anywhere.
The networking app helps you meet the right people before you arrive.
We keep things simple, so you can focus on what matters to you.
Sponsors meet decision-makers in a relaxed, friendly setting.
Every session is recorded, so you can catch up on anything you missed.
<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">Three days that change how you work</h3>
<p class="small mb-3">More than eighty speakers share what they have learned the hard way.</p>
<p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</p>
<p class="small mb-3">Virtual passes let you join the main stage live from anywhere.</p>
<p class="small mb-3">The networking app helps you meet the right people before you arrive.</p>
<p class="small mb-3">We keep things simple, so you can focus on what matters to you.</p>
<p class="small mb-3">Sponsors meet decision-makers in a relaxed, friendly setting.</p>
<p class="small mb-3">Every session is recorded, so you can catch up on anything you missed.</p>
</div>
</div>
</div>14Sticky day dividers
Date pills in a message thread stick at the top until the next day arrives.
Three days of keynotes, hands-on workshops and evening meetups.
Start in minutes and get help from a real person whenever you need it.
Our evening party is the best place to turn talks into friendships.
Our team has done this many times, so you never have to guess.
Thousands of attendees already trust us, and we work hard to keep it that way.
Every attendee receives a certificate of participation.
Our evening party is the best place to turn talks into friendships.
We listen first, then build a plan around what you actually need.
Workshops are limited to thirty seats, so everyone gets hands-on time.
<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">Three days of keynotes, hands-on workshops and evening meetups.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Start in minutes and get help from a real person whenever you need it.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Our evening party is the best place to turn talks into friendships.</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">Our team has done this many times, so you never have to guess.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Thousands of attendees already trust us, and we work hard to keep it that way.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Every attendee receives a certificate of participation.</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 evening party is the best place to turn talks into friendships.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">We listen first, then build a plan around what you actually need.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
Group tickets include a private meeting room for your team.
Friendly people answer your questions quickly, by phone, chat or email.
Every session is recorded, so you can catch up on anything you missed.
We measure success by how many attendees come back and tell their friends.
Virtual passes let you join the main stage live from anywhere.
Sponsors meet decision-makers in a relaxed, friendly setting.
Our team has done this many times, so you never have to guess.
Early bird tickets save you up to forty percent until the end of the month.
<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">Group tickets include a private meeting room for your team.</p>
<p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</p>
<p class="small mb-3">Every session is recorded, so you can catch up on anything you missed.</p>
<p class="small mb-3">We measure success by how many attendees come back and tell their friends.</p>
<p class="small mb-3">Virtual passes let you join the main stage live from anywhere.</p>
<p class="small mb-3">Sponsors meet decision-makers in a relaxed, friendly setting.</p>
<p class="small mb-3">Our team has done this many times, so you never have to guess.</p>
<p class="small mb-3">Early bird tickets save you up to forty percent until the end of the month.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
What our attendees asked us most
Start in minutes and get help from a real person whenever you need it.
What we learned from last year's feedback
Clear prices, honest advice and no surprises along the way.
Our favourite tips for busy weeks
Three days of keynotes, hands-on workshops and evening meetups.
Highlights from last year's workshops
More than eighty speakers share what they have learned the hard way.
<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">Workshop</span><span class="badge rounded-pill text-bg-light border">Webinar</span><span class="badge rounded-pill text-bg-light border">Keynote</span><span class="badge rounded-pill text-bg-light border">Panel</span><span class="badge rounded-pill text-bg-light border">Meetup</span>
</div>
<div class="p-2 vstack gap-2">
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">What our attendees asked us most</h3>
<p class="small mb-0">Start in minutes and get help from a real person whenever you need it.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">What we learned from last year's feedback</h3>
<p class="small mb-0">Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Our favourite tips for busy weeks</h3>
<p class="small mb-0">Three days of keynotes, hands-on workshops and evening meetups.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">Highlights from last year's workshops</h3>
<p class="small mb-0">More than eighty speakers share what they have learned the hard way.</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.
We keep things simple, so you can focus on what matters to you.
Every attendee receives a certificate of participation.
Thousands of attendees already trust us, and we work hard to keep it that way.
The venue is a short walk from the station and fully accessible.
The networking app helps you meet the right people before you arrive.
Every detail is handled by people who care about getting it right.
Friendly people answer your questions quickly, by phone, chat or email.
Sponsors meet decision-makers in a relaxed, friendly setting.
<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">We keep things simple, so you can focus on what matters to you.</p>
<p class="small mb-3">Every attendee receives a certificate of participation.</p>
<p class="small mb-3">Thousands of attendees already trust us, and we work hard to keep it that way.</p>
<p class="small mb-3">The venue is a short walk from the station and fully accessible.</p>
<p class="small mb-3">The networking app helps you meet the right people before you arrive.</p>
<p class="small mb-3">Every detail is handled by people who care about getting it right.</p>
<p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</p>
<p class="small mb-3">Sponsors meet decision-makers in a relaxed, friendly setting.</p>
</div>
</div>
</div>18Checkout button on phones
sticky-sm-bottom sticks the call to action at the bottom from the sm breakpoint up.
Clear prices, honest advice and no surprises along the way.
Early bird tickets save you up to forty percent until the end of the month.
We keep things simple, so you can focus on what matters to you.
We listen first, then build a plan around what you actually need.
<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="Virtual pass" class="img-fluid rounded mb-3">
<p class="small mb-3">Clear prices, honest advice and no surprises along the way.</p>
<p class="small mb-3">Early bird tickets save you up to forty percent until the end of the month.</p>
<p class="small mb-3">We keep things simple, so you can focus on what matters to you.</p>
<p class="small mb-3">We listen first, then build a plan around what you actually need.</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 · $75.86</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
Every attendee receives a certificate of participation.
Thousands of attendees already trust us, and we work hard to keep it that way.
Our evening party is the best place to turn talks into friendships.
The networking app helps you meet the right people before you arrive.
Start in minutes and get help from a real person whenever you need it.
Every session is recorded, so you can catch up on anything you missed.
Every detail is handled by people who care about getting it right.
Workshops are limited to thirty seats, so everyone gets hands-on time.
<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">
Behind the scenes: building the stage
</div>
<div class="progress rounded-0" role="progressbar" aria-label="Reading progress" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="--bs-progress-height:.25rem">
<div class="progress-bar" style="width:78%">
</div>
</div>
</div>
<div class="p-3">
<p class="small mb-3">Every attendee receives a certificate of participation.</p>
<p class="small mb-3">Thousands of attendees already trust us, and we work hard to keep it that way.</p>
<p class="small mb-3">Our evening party is the best place to turn talks into friendships.</p>
<p class="small mb-3">The networking app helps you meet the right people before you arrive.</p>
<p class="small mb-3">Start in minutes and get help from a real person whenever you need it.</p>
<p class="small mb-3">Every session is recorded, so you can catch up on anything you missed.</p>
<p class="small mb-3">Every detail is handled by people who care about getting it right.</p>
<p class="small mb-3">Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
</div>
</div>
</div>20Sticky table footer
A tfoot with sticky-bottom keeps the running total visible in a timesheet.
| Date | Task | Hours |
|---|---|---|
| Jul 5, 2026 | Networking app | 7 h |
| Sep 19, 2025 | Live streaming | 5 h |
| Nov 7, 2025 | Sponsorship | 1 h |
| Dec 1, 2025 | Live streaming | 2 h |
| Jul 26, 2026 | Speaker management | 8 h |
| May 22, 2026 | Ticketing | 6 h |
| Jul 15, 2026 | Live streaming | 7 h |
| Apr 28, 2026 | Networking app | 2 h |
| Feb 16, 2026 | Sponsorship | 7 h |
| Oct 4, 2026 | Sponsorship | 3 h |
| Total | 48 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>Jul 5, 2026</td>
<td>Networking app</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Sep 19, 2025</td>
<td>Live streaming</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Nov 7, 2025</td>
<td>Sponsorship</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Dec 1, 2025</td>
<td>Live streaming</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Jul 26, 2026</td>
<td>Speaker management</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>May 22, 2026</td>
<td>Ticketing</td>
<td class="text-end">6 h</td>
</tr>
<tr>
<td>Jul 15, 2026</td>
<td>Live streaming</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Apr 28, 2026</td>
<td>Networking app</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Feb 16, 2026</td>
<td>Sponsorship</td>
<td class="text-end">7 h</td>
</tr>
<tr>
<td>Oct 4, 2026</td>
<td>Sponsorship</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">48 h</td>
</tr>
</tfoot>
</table>
</div>
</div>