Bootstrap Get Started

The quickest way to use Bootstrap is to load it from a CDN with two lines of HTML.

Bootstrap from a CDN

A CDN (Content Delivery Network) is a fast server that hosts files for many websites. Bootstrap's files are on jsDelivr.

Put the CSS link in the <head>:

Example

html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

Put the JavaScript before the closing </body> tag. You only need it for interactive parts like dropdowns, collapsing menus and modals:

Example

html

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

The "bundle" file also contains Popper, a small library Bootstrap uses to position dropdowns and tooltips.

The Starter Template

Every Bootstrap page should start like this:

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Bootstrap Page</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-4">
  <h1>Hello, Bootstrap!</h1>
  <p>Bootstrap 5 is loaded and ready to use.</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Try it Yourself »

The template explained

Line	Why it is needed
`<!DOCTYPE html>`	Bootstrap needs the browser in modern (HTML5) mode
`<meta charset="UTF-8">`	Shows all characters correctly, including Urdu text
`<meta name="viewport" ...>`	Makes the page fit phone screens; without it the responsive grid will not work
CSS `<link>`	Loads all Bootstrap styles
JS `<script>`	Loads interactive components

Never forget the viewport meta tag. Without it, phones show a tiny zoomed-out desktop page and Bootstrap's responsive classes seem broken.

Checking That It Works

Bootstrap changes the default font and removes the browser's default body margin. Add a button with class="btn btn-success". If it turns into a green rounded button, Bootstrap is loaded.

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
<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">
</head>
<body class="p-4">

<button class="btn btn-success">If I am green, Bootstrap works</button>

</body>
</html>

Try it Yourself »

Installing with npm

In bigger projects, many developers install Bootstrap with npm, the Node.js package manager:

Example

bash

npm install bootstrap

Then, in a project that uses a bundler such as Vite, import it in your main JavaScript file:

Example

javascript

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";

This method lets you customise Bootstrap with Sass and include only the parts you use.

Which Method to Choose?

CDN	npm
Two lines of HTML, nothing to install	Needs Node.js and a build tool
Perfect for learning and simple sites	Better for large projects
Uses the standard Bootstrap look	Easy to customise with Sass

Exercise

Where should the Bootstrap JavaScript bundle be placed?

At the top of the <head>, before the CSSInside the <title> tagJust before the closing </body> tagIt is not allowed on the page