How to Add Bootstrap 5 in Angular 18 Application?

In this post, we will learn how to install Bootstrap 5 in the angular 18 application.

As we're aware, Bootstrap stands out as the leading framework globally, renowned for crafting responsive and mobile-first websites. Bootstrap offers an array of classes designed for creating responsive web designs tailored for mobile devices. If you're keen on integrating Bootstrap with Angular 18, I'm here to guide you through the process in a straightforward manner.

I have two ways to install Bootstrap and use it with your angular 18 projects. I will give you step by step example below.

Step for Install Bootstrap 5 in Angular 18

• Step 1: Create Angular 18 Project
• Step 2: Install Bootstrap 5 NPM Package
• Step 3:Import Bootstrap CSS and JS
• Step 4:Update HTML Component Code
• Run Angular App

Let's follow the following steps:

Step 1: Create Angular 18 Project

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

ng new my-new-app

Step 2: Install Bootstrap 5 NPM Package

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

Step 3: Import Bootstrap CSS and JS

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"
      ]
.....

Step 4: Update HTML Component Code

Now you can easily use bootstrap class as like bellow:

src/app/app.component.html

<div class="container">
  <h1>Install Bootstrap 5 in Angular 18 - 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

Output:

I hope it can help you...