How to install Bootstrap in Angular

835 views 1 year ago AngularJS

Bootstrap is CSS framework which has predefined class with Javascript plugins such as modal, collaps, carousel etc to make responsive webdesign.

In this article, we will see how we can install bootstrap in Angular and use it. We will install current latest bootstrap version 5 in Angular 12.

There is two way, you can install and use Bootstrap in Angular. We will see both the ways one by one.

Install from npm package

First way, we install Bootstrap using npm package manager. Run the following command and it will install Bootstrap into node_module directory.

npm install bootstrap

If the installation failed due to permission error, you may need to run command with supo permission in Linux system.

sudo npm install bootstrap

Now in the root angular.json file, add Bootstrap css file in "styles" array and js file in "scripts" array as follow.

{
  "projects": {
    "boots": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          }
        }
      }
    }
  }
}

Now run the Angular server again and you can add Boostrap classes to add CSS and Bootstrap components.

Using CDN

The second way is to use CDN files into main layout view. Put the below stylesheet into your <head> tag before all other stylesheets to load.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

And if you want to use Bootstrap component, then you need to include Bootstrap js file. Add the following <script> tag before the closing </head> tag.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Here is the default Angular index.html file with Bootstrap.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boots</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

This way, you don't need to download Bootstrap source files into your project.

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]