BootstrapHow-ToBeginner · 3 min read

How to Add Bootstrap to HTML: Simple Steps for Beginners

To add Bootstrap to your HTML, include the Bootstrap CSS and JavaScript files in your <head> and before the closing </body> tag. The easiest way is to use the Bootstrap CDN by adding <link> and <script> tags referencing Bootstrap's online files.

📐

Syntax

To add Bootstrap, you need to include two main parts in your HTML:

Bootstrap CSS: This styles your page with Bootstrap's design.
Bootstrap JavaScript: This adds interactive features like modals and dropdowns.

Use the <link> tag inside the <head> for CSS, and the <script> tags before the closing </body> tag for JavaScript.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUa6mY5h2v+6U6z9e+6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6" crossorigin="anonymous">
</head>
<body>

  <!-- Your content here -->

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoYz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>

💻

Example

This example shows a simple HTML page using Bootstrap to style a button. The button will have Bootstrap's default blue style and spacing.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Button Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUa6mY5h2v+6U6z9e+6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6" crossorigin="anonymous">
</head>
<body>
  <div class="container mt-5">
    <button type="button" class="btn btn-primary">Click Me</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoYz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>

Output

A white page with a blue button labeled 'Click Me' centered with some margin from the top.

⚠️

Common Pitfalls

Common mistakes when adding Bootstrap include:

Forgetting to include the Bootstrap CSS <link> tag, so styles don't apply.
Not adding the Bootstrap JavaScript <script> tag, which breaks interactive components.
Placing the JavaScript <script> tags in the <head> instead of before </body>, which can slow page loading.
Using outdated Bootstrap version links that may not work properly.

html

<!-- Wrong: Missing CSS link -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Missing Bootstrap CSS</title>
</head>
<body>
  <button class="btn btn-primary">No Style</button>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoYz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>

<!-- Right: Include CSS and JS -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Correct Bootstrap Setup</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUa6mY5h2v+6U6z9e+6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6" crossorigin="anonymous">
</head>
<body>
  <button class="btn btn-primary">Styled Button</button>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoYz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>

📊

Quick Reference

Here is a quick checklist to add Bootstrap correctly:

Step	Description
1	Add Bootstrap CSS link in
2	Add Bootstrap JS script before
3	Use Bootstrap classes like btn, container, row
4	Check viewport meta tag for responsiveness
5	Use latest Bootstrap CDN links for best support

✅

Key Takeaways

Always include Bootstrap CSS in the to apply styles.

Add Bootstrap JavaScript before for interactive features.

Use the official Bootstrap CDN links for easy setup and latest version.

Include the viewport meta tag for proper mobile responsiveness.

Avoid placing scripts in the to keep page loading fast.