How to install Bootstrap 4 or 5 in Angular

How to install Bootstrap 4 or 5 in Angular

code
Colin Stodd
Angular,Bootstrap 4,Bootstrap 5,SASS,SCSS,CSS,Tutorial
18 Dec 2018 (Published)
04 Apr 2021 (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:

If you're using Bootstrap 4:

  1. From the root of your project you need to install Bootstrap 4, jQuery and Popper.js:

     npm install bootstrap jquery popper.js --S
    
        You can disregard the warning about upgrading to @popperjs/core. Bootstrap requires Popper.js 1.6.

If you're using Bootstrap 5:

  1. 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@next popper.js --S
    
  2. 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/jquery/dist/jquery.min.js", // Delete this line if using version 5.
       "./node_modules/popper.js/dist/umd/popper.min.js",
       "./node_modules/bootstrap/dist/js/bootstrap.min.js"
     ]
    
  3. 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:

If you're using Bootstrap 4:

  1. From the root of your project you need to install Bootstrap, jQuery and Popper.js:

        You can disregard the warning about upgrading to @popperjs/core. Bootstrap requires Popper.js 1.6.
     npm install bootstrap jquery popper.js --S
    

If you're using Bootstrap 5:

  1. 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@next popper.js --S
    
  2. 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/jquery/dist/jquery.min.js", // Delete line if using version 5.
       "./node_modules/popper.js/dist/umd/popper.min.js",
       "./node_modules/bootstrap/dist/js/bootstrap.min.js"
     ]
    
        To read more about stylePreprocessorOptions 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.
  3. Create a styles directory/folder in /src. So it should be src/styles.

  4. Now move your styles.scss file into that directory and create your variables, mixins and custom files to that src/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
    
  5. 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';
    
  6. 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 our angular.json file, we can leave off the path which makes things much cleaner:

     /* component-name.component.scss */
     @import 'variables';
    
  7. Since we updated angular.json you’ll have to restart your server.