How to Add Bootstrap 4 to Angular

Subscribe to my newsletter and never miss my upcoming articles

In this article, I will be explaining just one method because it worked for me, there are so many other methods out there but I will only talk about what worked for me.

I will add some useful resources below this post in case you don't like this approach or you need other methods.

I believe before you can think of making use of Bootstrap on Angular you must have installed Angular on your computer and created a new project.

If you don't know how to install angular or set up a new project, you can check angular docuemtation.

Getting Started

  • Install Bootstrap from npm using the npm install command

    $ npm install --save bootstrap
    

    The --save helps you save bootstrap as a dependency

  • You will also need to install jQuery using the following command

    $ npm install --save jquery
    

    with that if you navigate to your node_modules folder, scroll down you will find bootstrap there.

Finally, we have to add bootstrap to angular.json file

Open the angular.json file of your project and include:

  • node_modules/bootstrap/dist/css/bootstrap.css in the styles array,
  • node_modules/bootstrap/dist/js/bootstrap.js in the scripts array,
  • node_modules/bootstrap/dist/js/bootstrap.js in the scripts array.

Example:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1, 
  "newProjectRoot": "projects",
  "projects": {
    "angular-bootstrap-examples": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular-bootstrap-examples",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.css"              
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.js",
              "./node_modules/bootstrap/dist/js/bootstrap.js"
            ]
          },

Once that is done go to src/styles.css of your Angular project and import the bootstrap.css file as follows:

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

Like I said earlier this was what worked for me, normally you could call something like this in your index.html file

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">

But when I did it I got an error.

Thanks for reading. Let's get to know ourselves better, connect with me on Twitter.

Useful resources

Suresh Dasari's photo

Refer this Bootstrap tutorial it will help you in detail to setup.

Mario Giambanco's photo

You shouldn't need

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

or

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">

Putting bootstrap.css into angular.json > styles should be enough.

You should also initialize jQuery in app.component.ts

Because Bootstrap (still) uses jQuery, you should consider using something like primefaces.org/primeng It's based on Bootstrap (loosely) and doesn't require jQuery. Ie: using Bootstrap with Angular isn't ideal now a days.

Olawanle Joel's photo

Wao, thanks so much for this.