How to Add Bootstrap 5 in Angular 17 Application?

Greetings everyone,

In this comprehensive tutorial, we'll explore the process of incorporating Bootstrap into Angular 17. This article provides a detailed guide on installing Bootstrap 5 in Angular 17. Throughout the tutorial, you'll gain insights into the steps for installing Bootstrap within the Angular 17 framework. I'm excited to demonstrate how to install Bootstrap 5 in Angular

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 17, 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 17 projects. I will give you step by step example below.

Step for Install Bootstrap 5 in Angular 17

• Step 1: Create Angular 17 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 17 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 17 - 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...