Hello,

I am going to tell you how to add Bootstrap 5 in Angular 12, I will give you a simple example for how to add Bootstrap 5 in Angular 12. As we know that Bootstrap is the most popular framework of Word. So if you want to use Bootstrap 5 for Angular 12, then I will give you a simple example of this.

I will give you 2 examples how to install Bootstrap in Angular 12. So let’s follow few step to create example of How to Install Bootstrap 5 in Angular 12.

First of all install your new angular with this command:

ng new my-new-app

Example 1:

In this example, all you have to do is install Bootstrap in Angular 12 and add the CSS file. This is only for adding a css file.
then you can run the command below:

npm install bootstrap --save

need to import your bootstrap css on style.css file as like bellow
src/style.css

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

Example 2:

In this example, we’ll be adding Bootstrap with jQuery and popper js. so that you can also import bootstrap css and bootstrap js function.
run following commands:

npm install bootstrap --save

npm install jquery --save

npm install popper.js --save

Now after successfully run above command. let’s import it in angular.json file.
angular.json

"styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.css"
      ],
      "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ]

src/app/app.component.html

<div class="container">
  <h1>Install Bootstrap 5 in Angular 12 - codeplaners</h1>
  <div class="card">
    <div class="card-header">
      Featured
    </div>
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>