How to install Bootstrap in Angular

How to install Bootstrap in Angular

code
Colin Stodd
Angular,Bootstrap 4,Tutorial
18 Dec 2018

There are other packages out there that you can use such as ngx-bootstrap, but this is the vanilla Bootstrap (including JavaScript) method.

There are some slight differences from versions before Angular 6.

  1. From the root of your project, run in your terminal:
npm install bootstrap --save
  1. And you need to install it’s dependencies (jQuery) and (Popper.JS):
npm install jquery popper.js --save
  1. Open up your angular.json file to find and add the style and scripts:
"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
"scripts": [
  "./node_modules/jquery/dist/jquery.min.js",
  "./node_modules/popper.js/dist/umd/popper.min.js",
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

If you’re using SCSS use this config:

"styles": [
    "src/styles.scss"
  ],
  "scripts": [
    "./node_modules/jquery/dist/jquery.min.js",
    "./node_modules/popper.js/dist/umd/popper.min.js",
    "./node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],
  1. Restart your server and you should be ready to code! (If using CSS)

With SASS you need to make one last step. Place the line below in your styles.scss file (imports bootstrap)

@import "../node_modules/bootstrap/scss/bootstrap"

Extra Sass file configuration (suggestion but not required):

Create directory in: src/styles

Create these files and place in that directory: _variables.scss and _custom.scss

Change: .angular-cli.json

"styles": [
    "styles/styles.sass"
  ],

Import files into: styles.scss

@import "../../node_modules/bootstrap/scss/bootstrap";
@import "variables";
@import "custom";

To use your variables in other components in your angular app, you’ll have to import it into every component-name.component.scss file like so:

@import '~src/styles/variables';