Bootstrap Setup and Installation

There are several ways to add Bootstrap to a project. Choose the one which fits your work: a CDN is the quickest, and npm is the best for bigger projects with a build tool.

1. CDN (quickest)

A CDN loads the files from a fast public server, and many visitors already have the files in their browser cache. Add the CSS in the head, and the JS at the end of the body.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<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>

The integrity attribute is called SRI (Subresource Integrity). The browser checks that the file was not changed. The hashes above are for version 5.3.8, and they are the real hashes of those files. If you change the version number, you must also change the hash.

2. Download the compiled files

Download the compiled CSS and JS from getbootstrap.com, unzip, and copy the files you need to your project.

css/bootstrap.min.css
js/bootstrap.bundle.min.js

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>

3. npm

npm install bootstrap@5.3.8

The files are then in node_modules/bootstrap/dist. With a build tool (Vite, webpack, Parcel) you can import them in your JavaScript:

// import the compiled CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// import all the JavaScript
import * as bootstrap from 'bootstrap';

// or only what you need
import { Modal, Tooltip } from 'bootstrap';

Bootstrap needs Popper for dropdowns, popovers and tooltips. The bundle file already has it. With npm, install it too: npm install @popperjs/core.

4. Composer and other package managers

composer require twbs/bootstrap:5.3.8
yarn add bootstrap@5.3.8

5. Sass source files (for customization)

The npm package also contains the Sass source in node_modules/bootstrap/scss. You can import Bootstrap in your Sass file, change the variables first, and compile your own CSS. See Bootstrap Customization.

Which JavaScript file?

File	Contains
bootstrap.bundle.min.js	Bootstrap JS and Popper (recommended for most cases)
bootstrap.min.js	Bootstrap JS only. You must load Popper before it
bootstrap.esm.min.js	ES module version for modern bundlers

Bootstrap in WordPress

Most WordPress themes already include Bootstrap. If you build your own theme, add the files with wp_enqueue_style() and wp_enqueue_script() in the functions.php file, and do not paste the link tags in the theme header by hand.

<?php
function mytheme_assets() {
    wp_enqueue_style('bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css', [], '5.3.8');
    wp_enqueue_script('bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js', [], '5.3.8', true);
}
add_action('wp_enqueue_scripts', 'mytheme_assets');

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.