How to install Bootstrap 5 in Angular
code
Colin Stodd
Angular,Bootstrap 4,Bootstrap 5,SASS,SCSS,CSS,Tutorial
19 Dec 2018 (Published)
03 Mar 2023
(Updated)
  ***UPDATE*** A couple things to note with Bootstrap 5:
- jQuery is no longer a dependency.
- Bootstrap 5 no longer supports Internet Explorer 👍 🥳 🍾.
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. This post is for 6+ and will show you how to install Bootstrap 4 or 5 in Angular using either CSS or SCSS/SASS .
If you’re using CSS:
- From the root of your project you need to install Bootstrap 5, and Popper.js which is used for dropdown menu’s and other JavaScript sort of things:
npm install bootstrap popper.js --S
- Update your
angular.json
file with the same code snippet below in two places: Underneath"build"
and"test"
:"styles": [ "src/styles.css", "./node_modules/bootstrap/dist/css/bootstrap.min.css", ], "scripts": [ "./node_modules/popper.js/dist/umd/popper.min.js", "./node_modules/bootstrap/dist/js/bootstrap.min.js" ]
- Since we updated
angular.json
you’ll have to restart your server. Once you do that you should be good to go for the CSS version.
If you’re using SCSS or SASS:
- From the root of your project you need to install Bootstrap 5, and Popper.js which is used for dropdown menu’s and other JavaScript sort of things:
npm install bootstrap popper.js --S
- Update your
angular.json
file with the same code snippet below in two places. Underneath"build"
and"test"
:"styles": [ "src/styles/styles.scss", "./node_modules/bootstrap/scss/bootstrap.scss" ], // See blurb about this below, and delete this comment. "stylePreprocessorOptions": { "includePaths": [ "src/styles", "./node_modules/bootstrap/scss" ] }, "scripts": [ "./node_modules/popper.js/dist/umd/popper.min.js", "./node_modules/bootstrap/dist/js/bootstrap.min.js" ]
   To read more aboutstylePreprocessorOptions
go to  Angular/CLI README .  It’s a quick (3 min) read and definitely a good thing to be aware of if you’re working with SASS, LESS, etc in Angular. - Create a
styles
directory/folder in/src
. So it should besrc/styles
. - Now move your
styles.scss
file into that directory and create your variables, mixins and custom files to thatsrc/styles
directory using the following naming convention:_variables.scss
,_mixins.scss
and_custom.scss
.src ├── app │ ├── app-routing.module.ts │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ └── users ├── assets ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles │ ├── _custom.scss /* Add files here but they should have the "_" pre-pended like `_custom.scss`, (shown above) other than `styles.scss`. */ │ ├── _mixins.scss /* Your editor and the lang strips these but I'm not entire sure why they are needed, but that's what I was taught. */ │ ├── styles.scss │ └── _variables.scss /* Add files here but they should have the "_" pre-pended like `_custom.scss`, (shown above) other than `styles.scss`. */ └── test.ts
- Now open your
styles.scss
file and import Bootstrap and your custom/mixin/variable files:/* Bootstrap */ @import 'bootstrap'; /* Custom */ @import 'variables'; @import 'mixins'; @import 'custom';
- To use your variables in other components, you’ll have to import them into every
component-name.component.scss
file like so. But because we imported all of Bootstrap’s.scss
files into ourangular.json
file, we can leave off the path which makes things much cleaner:/* component-name.component.scss */ @import 'variables';
- Since we updated
angular.json
you’ll have to restart your server.