How to Use Bootstrap with HTML

The quickest way to use Bootstrap with HTML is to add its CSS file in the page's <head>. Add the JavaScript bundle before </body> only if you need interactive components such as dropdowns, modals, collapsible navigation, or tooltips. Bootstrap 5 does not require jQuery.

Before you begin

You need an HTML file and a browser. A code editor makes the work easier; this comparison of free HTML editors can help if you do not already have one. Ensure the page uses the HTML5 doctype and a viewport meta tag so Bootstrap's responsive styles work correctly.

Method 1: Add Bootstrap from a CDN

A content delivery network is convenient for a small site or a quick prototype because no package installation is required. The complete starter page below uses the current Bootstrap 5.3 CDN files documented by the project:

<!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.8/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
    crossorigin="anonymous">
</head>
<body>
  <main class="container py-5">
    <div class="alert alert-primary" role="alert">
      Bootstrap is connected.
    </div>

    <button class="btn btn-primary" type="button"
      data-bs-toggle="collapse" data-bs-target="#details"
      aria-expanded="false" aria-controls="details">
      Show details
    </button>

    <div class="collapse mt-3" id="details">
      <div class="card card-body">
        This content is controlled by Bootstrap JavaScript.
      </div>
    </div>
  </main>

  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
    crossorigin="anonymous"></script>
</body>
</html>

Open the file in a browser. The alert and button should be styled, and clicking the button should reveal the card. The bundle includes Popper, which components such as dropdowns and tooltips use.

When upgrading Bootstrap, copy both the URL and matching integrity value from the official Bootstrap quick-start page. An integrity hash belongs to one exact file version; changing only the version number will cause the browser to reject the resource.

Method 2: Host Bootstrap files locally

Download the compiled CSS and JavaScript files from Bootstrap, place them in folders within your project, and refer to those paths:

<link rel="stylesheet" href="assets/css/bootstrap.min.css">

<!-- Page content goes here -->

<script src="assets/js/bootstrap.bundle.min.js"></script>

Local files let you control when assets change and allow the page to load without contacting a third-party CDN. Keep the CSS link in <head> and place the script near the end of <body>. Use bootstrap.bundle.min.js unless you have a specific reason to manage Popper separately.

Method 3: Install Bootstrap with npm

For a project that already uses a build tool, install Bootstrap as a dependency:

npm install bootstrap

Import the stylesheet and JavaScript from the application's entry file. The syntax below works with common bundlers that support JavaScript imports:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

If the page only uses Bootstrap's layout, typography, forms, and utility classes, omit the JavaScript import. The package lockfile records the resolved version so other developers and deployment systems can reproduce the installation.

Use Bootstrap classes in HTML

After the stylesheet loads, apply Bootstrap's documented classes to normal HTML elements. This example creates a responsive two-column layout that stacks on small screens:

<section class="container py-5">
  <div class="row g-4 align-items-center">
    <div class="col-12 col-md-7">
      <h1 class="display-5 fw-bold">A responsive page</h1>
      <p class="lead text-secondary">
        The columns stack below the medium breakpoint.
      </p>
      <a class="btn btn-success" href="/contact">Contact us</a>
    </div>

    <div class="col-12 col-md-5">
      <div class="p-4 bg-light border rounded-3">
        Supporting content
      </div>
    </div>
  </div>
</section>

Classes such as container, row, and col-md-* control layout. Utilities including py-5, g-4, and text-secondary adjust spacing and presentation without a separate CSS rule.

Common setup problems

• The page is not responsive: confirm that the viewport meta tag is present.
• Styles do not appear: inspect the browser's Network panel for a wrong path, blocked CDN request, or integrity mismatch.
• A dropdown or modal does nothing: include the JavaScript bundle and use Bootstrap 5 attributes such as data-bs-toggle.
• Old instructions mention jQuery: those instructions target Bootstrap 4 or earlier. Do not add jQuery solely for Bootstrap 5.
• Your own CSS is overridden: load custom CSS after Bootstrap, then use selectors that target the component deliberately.

Bootstrap is one option among several interface toolkits. See this overview of popular CSS frameworks when choosing a foundation for a larger project.