Site Overlay

How to add Bootstrap 4 to my Angular 9 app?

0

How to import bootstrap 4 styles in my Angular 9 project generated by the Angular CLI? Could you please show me the required steps with an example?

February 23, 2020
1
0

This is one of the ways that you can follow to install and integrate bootstrap 4  within your Angular 9 project.

First, you need to start by installing bootstrap 4 from npm using the following command from the root of your Angular project:

 $ npm install bootstrap

 bootstrap v4.3.1 will be installed and added to the package.json file of your project.

The assets of bootstrap will be available from the node_modules/bootstrap folder. But Angular should know where to look for these files.

 

Before we configure Angular for where to look for the assets, we next need to install jQuery using the following command:

 $ npm install --save jquery

jquery is needed for the working of some bootstrap components, 

Integrating Bootstrap 4 with Angular 9 via angular.json

After installing bootstrap and jquery in your project, we need one more step to integrate them both.

Go to the angular.json file in the root folder of your Angular project and include:

  • node_modules/bootstrap/dist/css/bootstrap.css in the projects->architect->build->styles array,
  • node_modules/bootstrap/dist/js/bootstrap.js in the projects->architect->build->scripts array,
  • node_modules/bootstrap/dist/js/bootstrap.js in the projects->architect->build->scripts array,

As follows:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1, 
  "newProjectRoot": "projects",
  "projects": {
    "angular-bootstrap-demo": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            [...]
            "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"
            ]
          },

Note: You also need to add the jQuery JavaScript library file.

Adding Bootstrap 4 to Angular 9 via index.html(Second Way)

There is also another way to integrate bootstrap with Angular by linking to the assets in node_modules/bootstrap from the index.html file.

Go to the src/index.html file and update it as follows:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular Bootstrap 4 Demo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">

</head>
<body>
  <app-root></app-root>
  <script src="../node_modules/jquery/dist/jquery.js"></script>
  <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>    
</body>
</html>