"Installing Bootstrap: CDN vs. npm"
Two ways to add Bootstrap to a project, and when to reach for each.
2 min de lectura
There are two common ways to bring Bootstrap into a project, and the right choice depends on how the rest of your build is set up.
The CDN: fastest way to start
For a quick prototype, a static HTML page, or just following along with this course, linking Bootstrap's CSS and JS from a CDN (Content Delivery Network) requires no build tools at all:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Page</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<h1 class="text-center">Hello, Bootstrap</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Two things matter about where those tags go: the CSS <link> belongs in <head> so styles are ready before the page renders, and the JS <script> belongs at the end of <body> so it doesn't block the page from loading. The .bundle.min.js file includes Popper.js (a positioning library Bootstrap uses for dropdowns, tooltips, and popovers) — if you skip the bundle and load plain bootstrap.min.js, those components won't position themselves correctly.
The main downside of a CDN is that you're loading the entire framework — every component's CSS, whether you use it or not — and you have no way to customize Bootstrap's default colors or spacing without writing override CSS on top.
npm: for real build pipelines
If your project already has a bundler (Vite, webpack, or a framework like Next.js), installing Bootstrap as a package lets you import only what you need and, later, customize its Sass source directly:
npm install bootstrap// In your app's entry file (e.g. main.js)
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";This approach plays well with tree-shaking and lets tools bundle Bootstrap's assets alongside the rest of your code instead of relying on an external network request. It's also the only practical path to Sass customization — you'll see in a later lesson that overriding Bootstrap's variables requires importing its .scss source files, which only exist in the npm package, not the pre-built CDN bundle.
Which one should you pick?
- CDN — static sites, quick demos, learning exercises, or projects with no build step.
- npm — anything with an existing JavaScript build pipeline, or any project that will eventually need custom theming.
Both install methods give you the exact same classes and components — nothing in the rest of this course depends on which one you chose. Pick based on your project's tooling, not on which is "more correct."