index.html
<!doctype html>
<html lang="en" data-bs-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap Playground</title>
</head>
<body>
<nav class="navbar navbar-expand-md border-bottom bg-body">
<div class="container py-1">
<a class="navbar-brand fw-bold" href="#">Northstar</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#siteNav"
aria-controls="siteNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="siteNav">
<div class="navbar-nav ms-auto align-items-md-center gap-md-2">
<a class="nav-link active" href="#overview">Overview</a>
<a class="nav-link" href="#activity">Activity</a>
<button class="btn btn-sm btn-outline-secondary ms-md-2" type="button" data-theme-toggle>
Dark mode
</button>
</div>
</div>
</div>
</nav>
<main class="container py-5" id="overview">
<section class="row align-items-center g-5 py-lg-4">
<div class="col-lg-7">
<span class="badge rounded-pill text-bg-primary-subtle text-primary-emphasis mb-3">
Bootstrap 5 project
</span>
<h1 class="display-4 fw-bold lh-1 mb-3">
Build responsive interfaces with familiar components.
</h1>
<p class="lead text-body-secondary mb-4">
Edit the grid, utilities and JavaScript modules. Bootstrap is imported
locally and the downloaded Vite project uses the same source files.
</p>
<div class="d-flex flex-wrap gap-2">
<button class="btn btn-primary btn-lg" type="button" data-show-toast>
Save changes
</button>
<button
class="btn btn-outline-secondary btn-lg"
type="button"
data-bs-toggle="collapse"
data-bs-target="#quickStart"
aria-expanded="false"
aria-controls="quickStart"
>
Quick start
</button>
</div>
<div class="collapse mt-3" id="quickStart">
<div class="alert alert-info mb-0" role="alert">
Try changing a grid breakpoint, a utility class, or the theme colors in
<strong>styles.css</strong>.
</div>
</div>
</div>
<div class="col-lg-5" id="activity">
<div class="card border-0 shadow-lg">
<div class="card-body p-4">
<div class="d-flex align-items-center justify-content-between mb-4">
<div>
<p class="text-body-secondary small mb-1">Weekly activity</p>
<h2 class="h4 mb-0">Project pulse</h2>
</div>
<span
class="status-dot bg-success"
data-bs-toggle="tooltip"
data-bs-title="All systems operational"
aria-label="All systems operational"
></span>
</div>
<div class="row g-3">
<div class="col-6">
<div class="metric rounded-3 p-3">
<span class="small text-body-secondary d-block">Components</span>
<strong class="fs-3">12</strong>
</div>
</div>
<div class="col-6">
<div class="metric rounded-3 p-3">
<span class="small text-body-secondary d-block">Coverage</span>
<strong class="fs-3">94%</strong>
</div>
</div>
</div>
<hr class="my-4" />
<div class="d-flex justify-content-between small">
<span class="text-body-secondary">Latest build</span>
<span class="fw-semibold text-success">Passed</span>
</div>
</div>
</div>
</div>
</section>
</main>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div
class="toast border-0"
id="playgroundToast"
role="status"
aria-live="polite"
aria-atomic="true"
>
<div class="toast-header">
<span class="status-dot bg-success me-2"></span>
<strong class="me-auto">Northstar</strong>
<small>just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Your playground changes are saved.</div>
</div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>