How to add Bootstrap 4 to your Angular CLI project (jQuery)

Updated June 21, 2018

Attention using jQuery in Angular is not recommended and I advise you to use ng-bootstrap as described here.

This article helps you step by step to install Bootstrap 4 and jQuery to your Angular CLI project.

This article has been updated for Angular 6.

First you need to decide if you want to use CSS or SASS (SCSS) for styling your pages. I give a walkthrough with both options.

Install Bootstrap 4 in Angular CLI with SASS (SCSS)

First we create a new project and tell angular to use SCSS for styling.

Open up your command prompt and enter:

ng new my-app --style=scss
cd my-app

Next we install Bootstrap 4 and the optional modules with npm

npm install jquery --save-prod
npm install popper.js --save-prod
npm install bootstrap --save-prod

Create an empty file _variables.scss in src/.

This _variables.scss file you can use to overwrite the Bootstrap variables. For more info on theming Bootstrap, read here.

In your project in src/styles.scss add the following:

@import 'variables';
@import '~/bootstrap/scss/bootstrap';

In angular.json (Angular 6 and higher)  add the three js files under scripts:

"scripts": [
   "node_modules/jquery/dist/jquery.slim.js",
   "node_modules/popper.js/dist/umd/popper.min.js",
   "node_modules/bootstrap/dist/js/bootstrap.min.js"
],

Restart ng serve to see the changes.

Install Bootstrap 4 in Angular CLI with CSS

Create a new Angular CLI project

ng new my-app
cd my-app

Install bootstrap 4 with npm:

npm install jquery --save-prod
npm install popper.js --save-prod
npm install bootstrap --save-prod

Open the styles.css file in your project.

Import the bootstrap style sheet as the first line.

/* You can add global styles to this file, and also import other style files */

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

Please note that before Angular 6 you would add the bootstrap css file to the styles section in the .angular-cli file. This no longer works.

Open angular.json in your project.

Find the first styles section under the build node and add the following lines:

NOTE: there are two styles sections!! One under build and one under test. If necessary put these lines in both sections.

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

Next find the first scripts section under the build node and add the following three scripts:

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.min.js", 
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
],

Restart ng serve to see the changes.

Source:

Share

Leave a Comment