How to install Bootstrap 5 in Angular 16 Application?

Hello Artisan,

Here, I will show you how to work angular 16 add bootstrap. you can understand a concept of angular 16 install bootstrap 5. In this article, we will implement a install bootstrap in angular 16. let’s discuss about install bootstrap 5 in angular 16. So, let us dive into the details.

As we know Bootstrap is the world’s most popular framework for building responsive, and mobile-first sites. bootstrap provides several classes for making responsive websites for your mobile. So if you want to use bootstrap with angular 16 then I will help you in a very simple way.

I have two ways to install bootstrap and use it with your angular 16 projects. I will give you both way examples below.

You can easily create your angular app using the below command:

ng new my-new-app

Example 1:

In this solution, you need to just install bootstrap on your angular 16 and import css file to style.css file. this is only for css importing. so you can run command bellow:

npm install bootstrap --save

Ok, now you need to import your bootstrap css on style.css file as like bellow:

src/style.css

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

Now you can use bootstrap class in your angular 16 app. It will works.

Example 2:

In this solution, we will also install bootstrap with jquery and popper js. so that way you can also import bootstrap css and bootstrap js function. So i think this will be best solution for you i think.

let's 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"
      ]
.....

Now you can easily use bootstrap class as like bellow:

src/app/app.component.html

<div class="container">
  <h1>Install Bootstrap 5 in Angular 16 - ItSolutionStuff.com</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>

Now you can use bootstrap css and js both.

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

ng serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

I hope it can help you...