How to Add Bootstrap 4 to Angular

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

• 3+ Ways to add Bootstrap 4 to Angular 9/8 With Example & Tutorial
• Using Bootstrap with angular