How to Install Bootstrap 5 in Angular 18?

Hi, Dev

In this post, we will cover the steps to install Bootstrap 5 in an Angular 18 application.

As we know, Bootstrap is the world's most popular framework for building responsive and mobile-first websites. It provides a wide range of classes specifically designed to create responsive web designs for mobile devices. If you're looking to integrate Bootstrap with Angular 18, I'm here to guide you through the process step-by-step.

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