Bootstrap can be added to a web project in several ways. The easiest method for beginners is to use a CDN. You can also download Bootstrap files or install Bootstrap using a package manager such as npm.
Bootstrap installation means adding the Bootstrap CSS and, when required, JavaScript files to your web project.
After Bootstrap is included, you can use Bootstrap classes such as
container, row, col,
btn, and many others.
To start learning Bootstrap, you need a basic HTML project and a web browser.
The Bootstrap CDN method allows you to use Bootstrap files hosted on a Content Delivery Network.
You do not need to download Bootstrap files manually when using this method.
To use Bootstrap styling, add the Bootstrap CSS file inside the
<head> section of your HTML page.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
This makes Bootstrap's CSS classes available on the page.
Some Bootstrap components require JavaScript. Bootstrap's bundle can be
included before the closing </body> tag.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"> </script>
The Bootstrap bundle includes Bootstrap's JavaScript components and Popper functionality used by components such as dropdowns and tooltips.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Website</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1 class="text-primary">
Hello Bootstrap
</h1>
<button class="btn btn-success">
Click Me
</button>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Another method is to download Bootstrap files and keep them inside your project folder.
This approach allows the project to use local Bootstrap files instead of loading them from a CDN.
A downloaded Bootstrap package commonly contains CSS and JavaScript resources.
For example, a project might have a structure like this:
project/ │ ├── css/ │ └── bootstrap.min.css │ ├── js/ │ └── bootstrap.bundle.min.js │ └── index.html
When Bootstrap is downloaded locally, use a relative path to connect the CSS file.
<link rel="stylesheet" href="css/bootstrap.min.css">
The exact path depends on your project folder structure.
The local JavaScript bundle can also be included using a relative path.
<script src="js/bootstrap.bundle.min.js"> </script>
Bootstrap can also be installed using npm, the Node.js package manager. This approach is commonly used in modern development workflows.
npm install bootstrap
This command installs Bootstrap as a project dependency.
npm stands for Node Package Manager. It is widely used to install and manage JavaScript packages and dependencies.
To use npm, Node.js is normally installed on your computer.
You can check whether Node.js is installed by opening a terminal or command prompt and running:
node --version
If Node.js is installed, the command displays its version.
You can check whether npm is available by running:
npm --version
The command displays the installed npm version.
Inside your project folder, run:
npm install bootstrap
After installation, Bootstrap is added to the project's dependencies.
An npm-based project normally uses a package.json file to
describe the project and its dependencies.
After installing Bootstrap with npm, Bootstrap appears in the project's dependencies.
{
"dependencies": {
"bootstrap": "^5.3.3"
}
}
The exact version shown depends on the version installed in the project.
When npm installs Bootstrap and its dependencies, packages are stored in
the project's node_modules directory.
Developers normally do not edit Bootstrap's files inside
node_modules directly.
| Method | Suitable For |
|---|---|
| CDN | Learning and simple websites |
| Downloaded Files | Projects that keep Bootstrap locally |
| npm | Modern development workflows |
If Bootstrap CSS is not loaded correctly, Bootstrap classes such as
btn, container, and text-primary
will not produce the expected Bootstrap styles.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
Not every Bootstrap feature requires JavaScript.
Many CSS utilities and components such as basic buttons, typography, spacing, colors, and the grid can work without Bootstrap JavaScript. Interactive components such as modals, dropdowns, carousels, and offcanvas require the Bootstrap JavaScript bundle.
Bootstrap provides a bundled JavaScript file that includes Bootstrap's JavaScript and Popper.
bootstrap.bundle.min.js
Using the bundle is convenient when your project needs Bootstrap components that depend on Popper.
A common HTML structure is to load Bootstrap CSS in the
<head> and the Bootstrap JavaScript bundle near the
end of the <body>.
<head>
<link
rel="stylesheet"
href="bootstrap.min.css">
</head>
<body>
...
<script
src="bootstrap.bundle.min.js">
</script>
</body>
After adding Bootstrap, create a simple button to check whether the framework is working correctly.
<button class="btn btn-primary">
Bootstrap Works
</button>
If the button appears with Bootstrap styling, the CSS has been loaded successfully.
To test Bootstrap JavaScript, you can create a simple modal or dropdown. For example, a Bootstrap dropdown requires the Bootstrap JavaScript bundle.
<button
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown">
Options
</button>
One common mistake is using a Bootstrap CSS class without correctly including the Bootstrap CSS file.
For example, this button:
<button class="btn btn-primary">
Submit
</button>
will not look like a Bootstrap button if Bootstrap CSS has not been loaded.
Another common problem occurs when CSS and JavaScript files from different Bootstrap versions are mixed.
It is generally better to use matching Bootstrap versions for the CSS and JavaScript resources in a project.
When Bootstrap is loaded from a CDN, the browser needs to access the external resource.
For projects that need Bootstrap files to be available locally, you can download Bootstrap files or use a package manager.
my-project/
│
├── index.html
├── css/
│ └── bootstrap.min.css
└── js/
└── bootstrap.bundle.min.js
This is one possible structure for a project that stores Bootstrap files locally.
For beginners who are learning Bootstrap, the CDN method is usually the simplest starting point.
You can add the CSS and JavaScript links to an HTML page and immediately start practicing Bootstrap classes.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"> </script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
My Bootstrap Website
</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1 class="text-primary">
My Bootstrap Website
</h1>
<p class="lead">
Bootstrap is working!
</p>
<button class="btn btn-success">
Get Started
</button>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
If the heading, paragraph, and button display with Bootstrap styling, your Bootstrap CSS has been loaded successfully.
Question: Which method is generally the simplest way for a beginner to add Bootstrap to an HTML page?