Skip to content

Bootstrap CDN Installation

The fastest way to try Bootstrap is linking its CSS and JavaScript directly from a CDN. This lesson shows the exact tags to add and what each one does.

Bootstrap CDN Installation Overview

A Content Delivery Network (CDN) hosts Bootstrap's compiled files on fast, globally distributed servers. Linking to a CDN means you don't install anything locally, which is ideal for demos, static HTML pages, and quick prototypes.

You still need to include both the CSS link in the head and the JavaScript bundle before the closing body tag if you plan to use interactive components like modals, dropdowns, or carousels.

Concept Description Common Usage
jsDelivr CDN Popular CDN mirror for npm packages including Bootstrap Most official Bootstrap examples use this
cdnjs CDN Alternative CDN with Bootstrap builds Backup or preference-based choice
Integrity attribute Subresource Integrity hash for security Verifying the CDN file hasn't been tampered with
crossorigin attribute Controls CORS behavior for the resource Required alongside integrity hashes
Version pinning in URL Specific version number in the CDN path Preventing silent upgrades on production sites

Bootstrap CDN Installation Example

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
    crossorigin="anonymous">
</head>
<body>
  ...
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
</body>

The integrity and crossorigin attributes let the browser verify the downloaded file matches the expected hash, protecting your page if the CDN is ever compromised. Always copy the exact hash from the official Bootstrap download page for the version you use.

Top 10 Bootstrap CDN Installation Examples

These are the CDN link patterns you'll copy most often when adding Bootstrap without a build step.

# Example Syntax
1 jsDelivr CSS link <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
2 jsDelivr JS bundle <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
3 cdnjs CSS link <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
4 Bootstrap Icons CDN <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
5 Pinning an exact version bootstrap@5.3.3/dist/css/bootstrap.min.css
6 Using the latest minor version bootstrap@5.3/dist/css/bootstrap.min.css
7 Adding integrity hash integrity="sha384-..." crossorigin="anonymous"
8 Loading RTL stylesheet <link href="bootstrap.rtl.min.css" rel="stylesheet">
9 Viewport meta requirement <meta name="viewport" content="width=device-width, initial-scale=1">
10 Deferring the JS bundle <script src="bootstrap.bundle.min.js" defer></script>

Best Practices

  • Always pin an exact version number in the CDN URL for production sites.
  • Include the integrity and crossorigin attributes copied from the official docs.
  • Load the CSS link in the head and the JS bundle near the end of the body.
  • Use bootstrap.bundle.min.js, not bootstrap.min.js, if you need Popper-powered components.
  • Keep the viewport meta tag alongside the CDN links, or responsive behavior breaks.
  • Consider self-hosting for sites with strict content security policies.
  • Check jsDelivr or cdnjs status pages if the CDN seems slow or unavailable.

Common Mistakes

  • Using an unpinned or 'latest' style URL that can change unexpectedly.
  • Forgetting the JS bundle entirely, so interactive components silently fail.
  • Copy-pasting an integrity hash for the wrong version, causing the browser to block the file.
  • Loading both a CDN copy and an npm-installed copy of Bootstrap at once.
  • Placing the CSS link at the bottom of the page, causing a flash of unstyled content.
  • Not testing what happens if the CDN is blocked by a corporate firewall.

Key Takeaways

  • CDN links let you use Bootstrap without installing anything locally.
  • jsDelivr and cdnjs are the two most common Bootstrap CDN providers.
  • Always version-pin CDN URLs to avoid unexpected breaking changes.
  • Integrity and crossorigin attributes protect against tampered CDN files.
  • Use bootstrap.bundle.min.js for CDN setups that need dropdowns, modals, or tooltips.

Pro Tip

Copy the exact link and script tags, including integrity hashes, straight from the official Bootstrap 'Introduction' page for the version you're targeting rather than typing them by hand.

You now know how to add Bootstrap through a CDN with no build step. Continue to Bootstrap 5 to see what changed in the current major version.