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.
Career coaches help with your CV, portfolio and interview practice.
Every detail is handled by people who care about getting it right.
We measure success by how many students come back and tell their friends.
Thousands of students already trust us, and we work hard to keep it that way.
The mobile app downloads lessons, so you can learn on the train.
We keep things simple, so you can focus on what matters to you.
Guided learning paths take you from beginner to job-ready step by step.
Every course is built around hands-on projects you can add to your portfolio.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Sticky header demo">
<header class="sticky-top bg-body border-bottom px-3 py-2 fw-semibold">
<i class="bi bi-journal-text" aria-hidden="true"></i> What our students asked us most
</header>
<div class="p-3">
<p class="small mb-3">Career coaches help with your CV, portfolio and interview practice.</p>
<p class="small mb-3">Every detail is handled by people who care about getting it right.</p>
<p class="small mb-3">We measure success by how many students come back and tell their friends.</p>
<p class="small mb-3">Thousands of students already trust us, and we work hard to keep it that way.</p>
<p class="small mb-3">The mobile app downloads lessons, so you can learn on the train.</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">Guided learning paths take you from beginner to job-ready step by step.</p>
<p class="small mb-3">Every course is built around hands-on projects you can add to your portfolio.</p>
</div>
</div>
</div>2Sticky save bar
sticky-bottom keeps form actions at the bottom edge of the scrolling area.
Clear prices, honest advice and no surprises along the way.
Thousands of students already trust us, and we work hard to keep it that way.
The mobile app downloads lessons, so you can learn on the train.
Every course is built around hands-on projects you can add to your portfolio.
Every detail is handled by people who care about getting it right.
Study groups and a friendly forum keep you motivated along the way.
Instructors are working professionals who teach what they use every day.
<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">Clear prices, honest advice and no surprises along the way.</p>
<p class="small mb-3">Thousands of students already trust us, and we work hard to keep it that way.</p>
<p class="small mb-3">The mobile app downloads lessons, so you can learn on the train.</p>
<p class="small mb-3">Every course is built around hands-on projects you can add to your portfolio.</p>
<p class="small mb-3">Every detail is handled by people who care about getting it right.</p>
<p class="small mb-3">Study groups and a friendly forum keep you motivated along the way.</p>
<p class="small mb-3">Instructors are working professionals who teach what they use every day.</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 |
|---|---|---|
| Lea Alvarez | Project Manager | Denver |
| Maya Delgado | Marketing Lead | Montreal |
| Priya Nguyen | Support Specialist | Lisbon |
| Aria Quinn | Support Specialist | Copenhagen |
| Mia Whitaker | HR Partner | Cape Town |
| Samir Ibrahim | QA Engineer | Seoul |
| Mia Varga | HR Partner | Lisbon |
| Ethan Rossi | Frontend Engineer | Seoul |
| Chloe Silva | HR Partner | Copenhagen |
| Nora Larsen | Product Designer | Auckland |
| Jonah Kowalski | QA Engineer | Cape Town |
| Kenji Kim | QA Engineer | Austin |
<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>Lea Alvarez</td>
<td>Project Manager</td>
<td>Denver</td>
</tr>
<tr>
<td>Maya Delgado</td>
<td>Marketing Lead</td>
<td>Montreal</td>
</tr>
<tr>
<td>Priya Nguyen</td>
<td>Support Specialist</td>
<td>Lisbon</td>
</tr>
<tr>
<td>Aria Quinn</td>
<td>Support Specialist</td>
<td>Copenhagen</td>
</tr>
<tr>
<td>Mia Whitaker</td>
<td>HR Partner</td>
<td>Cape Town</td>
</tr>
<tr>
<td>Samir Ibrahim</td>
<td>QA Engineer</td>
<td>Seoul</td>
</tr>
<tr>
<td>Mia Varga</td>
<td>HR Partner</td>
<td>Lisbon</td>
</tr>
<tr>
<td>Ethan Rossi</td>
<td>Frontend Engineer</td>
<td>Seoul</td>
</tr>
<tr>
<td>Chloe Silva</td>
<td>HR Partner</td>
<td>Copenhagen</td>
</tr>
<tr>
<td>Nora Larsen</td>
<td>Product Designer</td>
<td>Auckland</td>
</tr>
<tr>
<td>Jonah Kowalski</td>
<td>QA Engineer</td>
<td>Cape Town</td>
</tr>
<tr>
<td>Kenji Kim</td>
<td>QA Engineer</td>
<td>Austin</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
- Ashford, Diego
- Ashford, Mason
C
- Carter, Arjun
D
- Duarte, Hana
- Duarte, Maya
F
- Fischer, Ivy
H
- Haddad, Felix
- Haddad, Isla
- Hughes, Omar
L
- Larsen, Priya
- Lindqvist, Mateo
M
- Mensah, Nadia
- Mensah, Owen
- Moreau, Lea
- Moreau, Lucas
- Morgan, Noah
N
- Novak, Liam
O
- Okafor, Ravi
- Ortega, Elena
- Ortega, Sofia
P
- Patel, Freya
R
- Rossi, Ruby
T
- Tanaka, Finn
W
- Whitaker, Theo
<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">Ashford, Diego</li>
<li class="py-1">Ashford, Mason</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, Arjun</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">D</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Duarte, Hana</li>
<li class="py-1">Duarte, Maya</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, Ivy</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">H</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Haddad, Felix</li>
<li class="py-1">Haddad, Isla</li>
<li class="py-1">Hughes, Omar</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">L</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Larsen, Priya</li>
<li class="py-1">Lindqvist, Mateo</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, Nadia</li>
<li class="py-1">Mensah, Owen</li>
<li class="py-1">Moreau, Lea</li>
<li class="py-1">Moreau, Lucas</li>
<li class="py-1">Morgan, Noah</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, Liam</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, Ravi</li>
<li class="py-1">Ortega, Elena</li>
<li class="py-1">Ortega, Sofia</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">P</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Patel, Freya</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">R</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Rossi, Ruby</li>
</ul>
</section>
<section>
<h3 class="sticky-top bg-body-secondary h6 mb-0 px-3 py-1">T</h3>
<ul class="list-unstyled px-3 py-2 mb-0">
<li class="py-1">Tanaka, Finn</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, Theo</li>
</ul>
</section>
</div>
</div>5Sticky sidebar
A column with a sticky-top block stays in view next to a long content column.
Learn on your schedule, with lessons that fit into a lunch break.
Lifetime access means you can revisit lessons whenever you need a refresher.
Career coaches help with your CV, portfolio and interview practice.
Our team has done this many times, so you never have to guess.
Clear prices, honest advice and no surprises along the way.
Earn a certificate at the end of each course and share it with employers.
Guided learning paths take you from beginner to job-ready step by step.
We listen first, then build a plan around what you actually need.
We keep things simple, so you can focus on what matters to you.
<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">Learn on your schedule, with lessons that fit into a lunch break.</p>
<p class="small mb-3">Lifetime access means you can revisit lessons whenever you need a refresher.</p>
<p class="small mb-3">Career coaches help with your CV, portfolio and interview practice.</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">Clear prices, honest advice and no surprises along the way.</p>
<p class="small mb-3">Earn a certificate at the end of each course and share it with employers.</p>
<p class="small mb-3">Guided learning paths take you from beginner to job-ready step by step.</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 keep things simple, so you can focus on what matters to you.</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.
Start in minutes and get help from a real person whenever you need it.
Short quizzes after each lesson help new knowledge stick.
Try the first lesson of any course for free before you decide.
We measure success by how many students come back and tell their friends.
Mentors review your projects and give feedback within two days.
Friendly people answer your questions quickly, by phone, chat or email.
Learn on your schedule, with lessons that fit into a lunch break.
We measure success by how many students come back and tell their friends.
<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" aria-hidden="true"></i> Sticky from md, normal flow on small screens
</div>
<div class="p-3">
<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">Short quizzes after each lesson help new knowledge stick.</p>
<p class="small mb-3">Try the first lesson of any course for free before you decide.</p>
<p class="small mb-3">We measure success by how many students come back and tell their friends.</p>
<p class="small mb-3">Mentors review your projects and give feedback within two days.</p>
<p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</p>
<p class="small mb-3">Learn on your schedule, with lessons that fit into a lunch break.</p>
<p class="small mb-3">We measure success by how many students come back and tell their friends.</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.
Clear prices, honest advice and no surprises along the way.
Every course is built around hands-on projects you can add to your portfolio.
Study groups and a friendly forum keep you motivated along the way.
Every detail is handled by people who care about getting it right.
Start in minutes and get help from a real person whenever you need it.
The mobile app downloads lessons, so you can learn on the train.
Career coaches help with your CV, portfolio and interview practice.
Try the first lesson of any course for free before you decide.
<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> Nimbus Labs</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">Clear prices, honest advice and no surprises along the way.</p>
<p class="small mb-3">Every course is built around hands-on projects you can add to your portfolio.</p>
<p class="small mb-3">Study groups and a friendly forum keep you motivated along the way.</p>
<p class="small mb-3">Every detail is handled by people who care about getting it right.</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">The mobile app downloads lessons, so you can learn on the train.</p>
<p class="small mb-3">Career coaches help with your CV, portfolio and interview practice.</p>
<p class="small mb-3">Try the first lesson of any course for free before you decide.</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 students already trust us, and we work hard to keep it that way.
Friendly people answer your questions quickly, by phone, chat or email.
Our team has done this many times, so you never have to guess.
Earn a certificate at the end of each course and share it with employers.
Mentors review your projects and give feedback within two days.
Short quizzes after each lesson help new knowledge stick.
We listen first, then build a plan around what you actually need.
Instructors are working professionals who teach what they use every day.
<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">Thousands of students already trust us, and we work hard to keep it that way.</p>
<p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</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">Earn a certificate at the end of each course and share it with employers.</p>
<p class="small mb-3">Mentors review your projects and give feedback within two days.</p>
<p class="small mb-3">Short quizzes after each lesson help new knowledge stick.</p>
<p class="small mb-3">We listen first, then build a plan around what you actually need.</p>
<p class="small mb-3">Instructors are working professionals who teach what they use every day.</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.
- Amara QuinnFive study habits that actually work
- Zoe LindqvistFive things we learned this year
- Kai FischerHeadlines people actually click
- Aria MorganHow to choose the right course
- Tariq IbrahimBuilding a portfolio that gets interviews
- Ava HughesOur favourite tips for busy weeks
- Leo SatoWhat employers look for in junior analysts
- Ella KimHow to stay motivated when learning online
- Luna KowalskiLooking back at a busy season
<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 just now
</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">Amara Quinn</strong>Five study habits that actually work</li>
<li class="list-group-item small"><strong class="d-block">Zoe Lindqvist</strong>Five things we learned this year</li>
<li class="list-group-item small"><strong class="d-block">Kai Fischer</strong>Headlines people actually click</li>
<li class="list-group-item small"><strong class="d-block">Aria Morgan</strong>How to choose the right course</li>
<li class="list-group-item small"><strong class="d-block">Tariq Ibrahim</strong>Building a portfolio that gets interviews</li>
<li class="list-group-item small"><strong class="d-block">Ava Hughes</strong>Our favourite tips for busy weeks</li>
<li class="list-group-item small"><strong class="d-block">Leo Sato</strong>What employers look for in junior analysts</li>
<li class="list-group-item small"><strong class="d-block">Ella Kim</strong>How to stay motivated when learning online</li>
<li class="list-group-item small"><strong class="d-block">Luna Kowalski</strong>Looking back at a busy season</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%">
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%">
Lifetime access means you can revisit lessons whenever you need a refresher.
</div>
</div>
<div class="d-flex mb-2">
<div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
Guided learning paths take you from beginner to job-ready step by step.
</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%">
Lifetime access means you can revisit lessons whenever you need a refresher.
</div>
</div>
<div class="d-flex mb-2">
<div class="px-3 py-2 rounded-3 small bg-body-tertiary" style="max-width:75%">
Start in minutes and get help from a real person whenever you need it.
</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%">
Mentors review your projects and give feedback within two days.
</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.
- Data analysis$195.00
- Public speaking$71.00
- UX fundamentals$151.99
- Brand design$126.00
- Project management$158.99
- Video editing$107.99
- Leadership skills$172.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>Data analysis</span><span>$195.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Public speaking</span><span>$71.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>UX fundamentals</span><span>$151.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Brand design</span><span>$126.00</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Project management</span><span>$158.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Video editing</span><span>$107.99</span></li>
<li class="list-group-item d-flex justify-content-between small"><span>Leadership skills</span><span>$172.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 $983.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.
Try the first lesson of any course for free before you decide.
Our team has done this many times, so you never have to guess.
Thousands of students already trust us, and we work hard to keep it that way.
We listen first, then build a plan around what you actually need.
Career coaches help with your CV, portfolio and interview practice.
Study groups and a friendly forum keep you motivated along the way.
Short quizzes after each lesson help new knowledge stick.
We keep things simple, so you can focus on what matters to you.
<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">Try the first lesson of any course for free before you decide.</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">Thousands of students already trust us, and we work hard to keep it that way.</p>
<p class="small mb-3">We listen first, then build a plan around what you actually need.</p>
<p class="small mb-3">Career coaches help with your CV, portfolio and interview practice.</p>
<p class="small mb-3">Study groups and a friendly forum keep you motivated along the way.</p>
<p class="small mb-3">Short quizzes after each lesson help new knowledge stick.</p>
<p class="small mb-3">We keep things simple, so you can focus on what matters to you.</p>
</div>
</div>
</div>13Sticky editor toolbar
Formatting buttons stay at the top of a long document while you edit.
Short courses, real results
We measure success by how many students come back and tell their friends.
The mobile app downloads lessons, so you can learn on the train.
Every detail is handled by people who care about getting it right.
Guided learning paths take you from beginner to job-ready step by step.
Clear prices, honest advice and no surprises along the way.
Every course is built around hands-on projects you can add to your portfolio.
Friendly people answer your questions quickly, by phone, chat or email.
<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">Short courses, real results</h3>
<p class="small mb-3">We measure success by how many students come back and tell their friends.</p>
<p class="small mb-3">The mobile app downloads lessons, so you can learn on the train.</p>
<p class="small mb-3">Every detail is handled by people who care about getting it right.</p>
<p class="small mb-3">Guided learning paths take you from beginner to job-ready step by step.</p>
<p class="small mb-3">Clear prices, honest advice and no surprises along the way.</p>
<p class="small mb-3">Every course is built around hands-on projects you can add to your portfolio.</p>
<p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>
</div>14Sticky day dividers
Date pills in a message thread stick at the top until the next day arrives.
Instructors are working professionals who teach what they use every day.
Learn on your schedule, with lessons that fit into a lunch break.
Earn a certificate at the end of each course and share it with employers.
Clear prices, honest advice and no surprises along the way.
We measure success by how many students come back and tell their friends.
Guided learning paths take you from beginner to job-ready step by step.
Career coaches help with your CV, portfolio and interview practice.
Thousands of students already trust us, and we work hard to keep it that way.
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="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">Instructors are working professionals who teach what they use every day.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Learn on your schedule, with lessons that fit into a lunch break.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Earn a certificate at the end of each course and share it with employers.</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">Clear prices, honest advice and no surprises along the way.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">We measure success by how many students come back and tell their friends.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Guided learning paths take you from beginner to job-ready step by step.</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">Career coaches help with your CV, portfolio and interview practice.</p>
<p class="small bg-body-tertiary rounded-3 px-3 py-2 mx-3">Thousands of students 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 detail is handled by people who care about getting it right.</p>
</div>
</div>15Fixed-bottom update notice
A dismissible style notice pinned with fixed-bottom over scrolling content.
Learn on your schedule, with lessons that fit into a lunch break.
Lifetime access means you can revisit lessons whenever you need a refresher.
Every course is built around hands-on projects you can add to your portfolio.
We keep things simple, so you can focus on what matters to you.
Friendly people answer your questions quickly, by phone, chat or email.
Our team has done this many times, so you never have to guess.
Short quizzes after each lesson help new knowledge stick.
Mentors review your projects and give feedback within two days.
<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">Learn on your schedule, with lessons that fit into a lunch break.</p>
<p class="small mb-3">Lifetime access means you can revisit lessons whenever you need a refresher.</p>
<p class="small mb-3">Every course is built around hands-on projects you can add to your portfolio.</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">Friendly people answer your questions quickly, by phone, chat or email.</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">Short quizzes after each lesson help new knowledge stick.</p>
<p class="small mb-3">Mentors review your projects and give feedback within two days.</p>
</div>
</div>
</div>16Sticky category chips
A horizontal row of chips with sticky-top above a feed of cards.
The small habits that make a big difference
Earn a certificate at the end of each course and share it with employers.
How we build a course, start to finish
Study groups and a friendly forum keep you motivated along the way.
Our favourite tips for busy weeks
Instructors are working professionals who teach what they use every day.
The small habits that make a big difference
The mobile app downloads lessons, so you can learn on the train.
<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">Lifestyle</span><span class="badge rounded-pill text-bg-light border">Design</span><span class="badge rounded-pill text-bg-light border">Marketing</span><span class="badge rounded-pill text-bg-light border">Development</span><span class="badge rounded-pill text-bg-light border">Business</span>
</div>
<div class="p-2 vstack gap-2">
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">The small habits that make a big difference</h3>
<p class="small mb-0">Earn a certificate at the end of each course and share it with employers.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">How we build a course, start to finish</h3>
<p class="small mb-0">Study groups and a friendly forum keep you motivated 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">Instructors are working professionals who teach what they use every day.</p>
</div>
</div>
<div class="card">
<div class="card-body py-2">
<h3 class="h6 mb-1">The small habits that make a big difference</h3>
<p class="small mb-0">The mobile app downloads lessons, so you can learn on the train.</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.
Start in minutes and get help from a real person whenever you need it.
Try the first lesson of any course for free before you decide.
We listen first, then build a plan around what you actually need.
The mobile app downloads lessons, so you can learn on the train.
We measure success by how many students come back and tell their friends.
Earn a certificate at the end of each course and share it with employers.
Lifetime access means you can revisit lessons whenever you need a refresher.
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="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">Start in minutes and get help from a real person whenever you need it.</p>
<p class="small mb-3">Try the first lesson of any course for free before you decide.</p>
<p class="small mb-3">We listen first, then build a plan around what you actually need.</p>
<p class="small mb-3">The mobile app downloads lessons, so you can learn on the train.</p>
<p class="small mb-3">We measure success by how many students come back and tell their friends.</p>
<p class="small mb-3">Earn a certificate at the end of each course and share it with employers.</p>
<p class="small mb-3">Lifetime access means you can revisit lessons whenever you need a refresher.</p>
<p class="small mb-3">Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
</div>18Checkout button on phones
sticky-sm-bottom sticks the call to action at the bottom from the sm breakpoint up.
Friendly people answer your questions quickly, by phone, chat or email.
Instructors are working professionals who teach what they use every day.
Learn on your schedule, with lessons that fit into a lunch break.
Thousands of students 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="Product details">
<div class="p-3">
<img src="../assets/img/product-5.svg" alt="Photography" class="img-fluid rounded mb-3">
<p class="small mb-3">Friendly people answer your questions quickly, by phone, chat or email.</p>
<p class="small mb-3">Instructors are working professionals who teach what they use every day.</p>
<p class="small mb-3">Learn on your schedule, with lessons that fit into a lunch break.</p>
<p class="small mb-3">Thousands of students already trust us, and we work hard to keep it that way.</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 · $199.78</button>
</div>
</div>
</div>19Reading progress header
A sticky header with a thin progress bar showing how far the reader has come.
Guided learning paths take you from beginner to job-ready step by step.
Study groups and a friendly forum keep you motivated along the way.
Every detail is handled by people who care about getting it right.
Career coaches help with your CV, portfolio and interview practice.
We keep things simple, so you can focus on what matters to you.
Our team has done this many times, so you never have to guess.
Short quizzes after each lesson help new knowledge stick.
Try the first lesson of any course for free before you decide.
<div class="hp-pos">
<div class="hp-pos-scroll" tabindex="0" role="region" aria-label="Reading demo">
<div class="sticky-top bg-body">
<div class="px-3 py-2 small fw-semibold">
How to stay motivated when learning online
</div>
<div class="progress rounded-0" role="progressbar" aria-label="Reading progress" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="--bs-progress-height:.25rem">
<div class="progress-bar" style="width:48%">
</div>
</div>
</div>
<div class="p-3">
<p class="small mb-3">Guided learning paths take you from beginner to job-ready step by step.</p>
<p class="small mb-3">Study groups and a friendly forum keep you motivated along the way.</p>
<p class="small mb-3">Every detail is handled by people who care about getting it right.</p>
<p class="small mb-3">Career coaches help with your CV, portfolio and interview practice.</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">Our team has done this many times, so you never have to guess.</p>
<p class="small mb-3">Short quizzes after each lesson help new knowledge stick.</p>
<p class="small mb-3">Try the first lesson of any course for free before you decide.</p>
</div>
</div>
</div>20Sticky table footer
A tfoot with sticky-bottom keeps the running total visible in a timesheet.
| Date | Task | Hours |
|---|---|---|
| Dec 9, 2025 | Study groups | 2 h |
| Nov 8, 2025 | Live workshops | 1 h |
| Mar 9, 2026 | Career coaching | 6 h |
| Apr 19, 2026 | Online courses | 4 h |
| Dec 30, 2025 | Mentoring | 8 h |
| Sep 12, 2025 | Career coaching | 6 h |
| May 18, 2026 | Mentoring | 5 h |
| Nov 12, 2025 | Study groups | 5 h |
| Mar 17, 2026 | Mentoring | 8 h |
| May 12, 2026 | Career coaching | 1 h |
| Total | 46 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>Dec 9, 2025</td>
<td>Study groups</td>
<td class="text-end">2 h</td>
</tr>
<tr>
<td>Nov 8, 2025</td>
<td>Live workshops</td>
<td class="text-end">1 h</td>
</tr>
<tr>
<td>Mar 9, 2026</td>
<td>Career coaching</td>
<td class="text-end">6 h</td>
</tr>
<tr>
<td>Apr 19, 2026</td>
<td>Online courses</td>
<td class="text-end">4 h</td>
</tr>
<tr>
<td>Dec 30, 2025</td>
<td>Mentoring</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>Sep 12, 2025</td>
<td>Career coaching</td>
<td class="text-end">6 h</td>
</tr>
<tr>
<td>May 18, 2026</td>
<td>Mentoring</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Nov 12, 2025</td>
<td>Study groups</td>
<td class="text-end">5 h</td>
</tr>
<tr>
<td>Mar 17, 2026</td>
<td>Mentoring</td>
<td class="text-end">8 h</td>
</tr>
<tr>
<td>May 12, 2026</td>
<td>Career coaching</td>
<td class="text-end">1 h</td>
</tr>
</tbody>
<tfoot class="sticky-bottom">
<tr class="table-light fw-semibold">
<td colspan="2">Total</td>
<td class="text-end">46 h</td>
</tr>
</tfoot>
</table>
</div>
</div>