Join WhatsApp ChannelJoin Now

How to Install Bootstrap 5 in Angular 12


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

@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.

"styles": [
      "scripts": [


<div class="container">
  <h1>Install Bootstrap 5 in Angular 12 - codeplaners</h1>
  <div class="card">
    <div class="card-header">
    <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>

Recommended Posts