How to install Bootstrap in Angular

How to install Bootstrap in Angular

code
Colin Stodd
Angular,Bootstrap 4,Tutorial
19 Dec 2018 (Published)
28 Mar 2020 (Updated)

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 in Angular using either CSS or SCSS/SASS .

If you’re using CSS:

  1. From the root of your project you need to install Bootstrap, 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.
  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",
       "./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:

  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
    
  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",
       "./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.

  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.