Bootstrap is a free and open-source front-end CSS framework for developing responsive and mobile-first websites and web applications.

Bootstrap provides a collection of CSS and JavaScript components, as well as pre-designed templates and themes, that help developers build modern and visually appealing web interfaces with ease.

Angular is a TypeScript-based open-source web application framework. It is used for building modern and dynamic single-page web applications (SPAs) and large-scale enterprise applications.

Instructions on Bootstrap integration

1. Install Bootstrap

Install Bootstrap using npm. Open your terminal and run the following command.

npm i bootstrap

2. Install Popper.js

npm i @popperjs/core

If you’re using bootstrap.bundle.min.js, you do not need to install Popper.js separately. It is already bundled with Bootstrap. This simplifies your setup.

3. Add Bootstrap JavaScript and Popper JavaScript

Bootstrap requires JavaScript for certain components to work, such as the Navbar toggle or Dropdown button. Add the JavaScript files and its dependencies to the project. Open the angular.json file and include the following scripts in the “scripts” array. Add popper.min.js before bootstrap.min.js.

"scripts": [
  "node_modules/@popperjs/core/dist/umd/popper.min.js",      
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

or

"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

4. Add Bootstrap styles

Open styles.scss (or styles.css) file and import Bootstrap.

Angular version < 17.

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

Angular version 17 and later

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

Now, you can use Bootstrap components in your Angular templates.

Optional

You can edit the angular.json file instead of the styles.scss.

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

Example

<button type="button" class="btn btn-primary">Primary</button>