BootstrapHow-ToBeginner · 3 min read

How to Install Bootstrap: Simple Steps for Beginners

To install Bootstrap, you can either add its CSS and JS files via a CDN link in your HTML or install it using npm for local development. Using the CDN is the fastest way, while npm is best for projects with build tools.

📐

Syntax

Bootstrap can be installed in two main ways:

CDN method: Add <link> and <script> tags in your HTML to load Bootstrap files from the internet.
npm method: Use npm install bootstrap to add Bootstrap to your project folder for local use.

html

<!-- CDN method: Add this in the <head> of your HTML -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Add this before closing </body> tag -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

💻

Example

This example shows how to include Bootstrap using CDN links and create a simple button styled by Bootstrap.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Install Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <button class="btn btn-primary">Bootstrap Button</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A webpage with a blue Bootstrap styled button labeled 'Bootstrap Button' centered with margin on top.

⚠️

Common Pitfalls

Common mistakes when installing Bootstrap include:

Forgetting to include the Bootstrap JavaScript bundle, which is needed for interactive components.
Using outdated CDN links or versions that may not work with your code.
Not placing the <script> tag before the closing </body> tag, which can cause loading issues.
Mixing different Bootstrap versions in CSS and JS files.

html

<!-- Wrong: Missing JS bundle -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Right: Include JS bundle before </body> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

📊

Quick Reference

Summary tips for installing Bootstrap:

Use CDN for quick setup: add CSS in <head> and JS before </body>.
Use npm install bootstrap for projects with build tools like Webpack or Vite.
Always check you use matching Bootstrap versions for CSS and JS.
Include meta viewport tag for responsive design.

✅

Key Takeaways

Add Bootstrap CSS and JS via CDN links for the fastest installation.

Use npm to install Bootstrap locally for projects with build tools.

Always include the Bootstrap JavaScript bundle for interactive features.

Place CSS links in the and JS scripts before the closing tag.

Check Bootstrap version consistency between CSS and JS files.