Bootstrap 5 Asset Loading
Keep a CSS-only page free of an unnecessary bundle and distinguish framework source from production output.
How it works
The distributed CSS and JavaScript bundle are convenient starting assets. A CSS-only page does not need the bundle just to render a card. More advanced builds can import selected Sass and JavaScript modules, but tree shaking and size results depend on the build and dependencies. Measure the output rather than assuming an import statement guarantees a smaller file. Pin versions, retain licence notices and test the components you use after upgrades.
Run and inspect
Save the complete document as index.html in a separate lab folder. Place Bootstrap 5.3.8 CSS beside it. Open the file in a normal browser. A separate local static server is optional; no database or PHP execution is required. Keep the Bootstrap licence with redistributed assets.
Download this complete HTML source.
The preview injects local Bootstrap CSS when you select Run code. It blocks external resources and actual form submission; nothing runs on import. Bootstrap plugin scripts are not loaded there.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 Load Only the Assets the Page Actually Uses</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<main class="container py-4">
<h1 class="h3 mb-4">Repair day</h1>
<article class="card"><div class="card-body"><h2 class="card-title h5">A CSS-only notice</h2><p class="card-text mb-0">No modal, dropdown or other JavaScript plugin is present.</p></div></article>
</main>
</body>
</html>
Expected result
The notice is fully styled by CSS and the complete document contains no Bootstrap script tag.
The generated source makes its asset boundary visible. Loading a framework on a lesson’s separate example does not require adding its global reset to Bhylu’s own layout. If you choose a CDN in another project, its availability, integrity, caching and privacy implications belong in that project’s design. This course’s controlled examples use local assets.
Check Bootstrap’s official 5.3 documentation for component contracts and version details.