There are two ways to add Bootstrap: CDN (recommended for quick start, Bootstrap 5 does not require jQuery, just add CSS to

and JS bundle containing Popper before ) or local download (suitable for offline/production environments, the css/js path must be correctly cited).

To add Bootstrap to an HTML file, you can use either a CDN (fastest for testing and simple projects) or download and host the files locally (better for production control and offline use). The core is linking Bootstrap's CSS and JavaScript correctly — especially since JS depends on Popper and jQuery (for Bootstrap 4) or works standalone (Bootstrap 5).

Using Bootstrap via CDN (Recommended for quick start)

Bootstrap 5 doesn't require jQuery. Just include the CSS link in your and the JS bundle (with Popper included) before the closing .

• Go to Bootstrap's official CDN page and copy the latest v5.x CSS and JS links.
• Paste the CSS link inside .
• Paste the JS link right before — this ensures DOM is ready and avoids blocking rendering.

Example snippet:

Adding Bootstrap locally (For full control or offline work)

Download Bootstrap from getbootstrap.com , extract it, and place the css/ and js/ folders in your project directory.

• Create a folder like bootstrap/ and put bootstrap.min.css and bootstrap.bundle.min.js inside.
• Link CSS using a relative path in : <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
• Link JS before : <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
• No need to include Popper separately — .bundle.min.js already includes it.

Verify it's working

Add a Bootstrap component that visibly relies on both CSS and JS — like a collapsible navbar or modal. If buttons change style, spacing works ( mt-3 , px-4 ), and interactive elements (tooltips, dropdowns) function, Bootstrap is loaded correctly.

• Try adding <button class="btn btn-outline-danger" data-bs-toggle="tooltip" title="This is a tooltip">Hover me</button>
• Then initialize tooltips with <script>new bootstrap.Tooltip(document.querySelector(&#39;[data-bs-toggle="tooltip"]&#39;))</script> after the JS bundle.

Avoid common mistakes

Most issues come from incorrect load order or missing dependencies.

• Don't put JS in without defer — it may run before HTML loads.
• Don't use bootstrap.min.js alone — it needs Popper. Use bootstrap.bundle.min.js instead.
• Don't mix Bootstrap 4 and 5 classes — eg, data-toggle (v4) vs data-bs-toggle (v5).
• Check browser DevTools Console for 404s or CSP errors — especially when using strict local server settings or extensions.

Basically just two links, right place, right order — no build step needed. Works instantly.

The above is the detailed content of How to add Bootstrap to an HTML file? (CDN & Local Examples). For more information, please follow other related articles on the PHP Chinese website!