How to add bootstrap 5 in the angular application?

Bootstrap is the most popular front-end toolkit framework. It features a responsive grid system, extensive prebuilt components that help developers quickly design and customize responsive mobile views.

In this tutorial, I am going to integrate bootstrap into an angular application. let’s begun …

Start with New Angular Applicaition

I am going to generate a new angular application for this tutorial. KIf you have already an angular application you can avoid this step.

Make sure you always create angular applications with the angular latest version. So I always do when I created a new application

npm uninstall -g @angular/cli
npm install -g @angular/cli

Generate new project

ng new bootstrapify
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS

cd bootstrapfy

I always use angular scss, I love it. but you can use your own favorite CSS methodology

Install Bootstrap 5 In This Project

npm i bootstrap

Configrations bootstrap

Add bootstrap css file

Two ways we can add bootstrap CSS

Method #1. Link bootstrap css to angular.json file ( Preferred and used in this project )

Add “node_modules/bootstrap/scss/bootstrap.scss” or “node_modules/bootstrap/dist/css/bootstrap.min.css” file in angular.son build styles section.

Note: Make sure you add the above styles.scss

Method #2. Link bootstrap css to src/styles.scss file ( skipped for this project)

import “node_modules/bootstrap/scss/bootstrap.scss” or “node_modules/bootstrap/dist/css/bootstrap.min.css” file above in styles.scss

Add bootstrap js file

Before I add the bootstrap js file we need to know what role popper.js file is in bootstrap? Popper.js is responsible for tooltips and popovers, some of the bootstrap Javascript functions required popper.js.

Bootstrap provides Javascript and propper.js library as precompiling bootstrap.bundle.js and bootstrap.bundle.min.js files. learn more about bootstrap precompile files

So Add bootstrap bundle file which popper.js included ( skipped for this project)

Add “node_modules/bootstrap/dist/js/bootstrap.bundle.min.js” file in angular.json file in the scripts section

Add bootstrap js and popper.js separatly (Used for this project)

Default popper.js is not installed in this project. So add popper.js package

npm i @popperjs/core

After install popper.js. “node_modules/@popperjs/core/dist/umd/popper.min.js” and “node_modules/bootstrap/dist/js/bootstrap.min.js” add-in srcipts item

Note: Make sure popper.js file must top of the bootstrap js file.

Let’s see bootstrap view

Edit app.component.html file.

<section class="py-5">
  <div class="container">
    <h1>This is Bootstrap h1 Heading <span class="badge bg-secondary">New</span></h1>
    <h2>This is Bootstrap h2 Heading</h2>
    <h3>This is Bootstrap h3 Heading</h3>
    <h4>This is Bootstrap h4 Heading</h4>
    <h5>This is Bootstrap h5 Heading</h5>
    <h6>This is Bootstrap h6 Heading</h6>
    <h1 class="mt-5 bg-info text-center text-white py-2">This Is Angular Bootstrap 5 View</h1>
    <div class="mt-5">
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-secondary">Secondary</button>
      <button type="button" class="btn btn-success">Success</button>
      <button type="button" class="btn btn-danger">Danger</button>
      <button type="button" class="btn btn-warning">Warning</button>
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-light">Light</button>
      <button type="button" class="btn btn-dark">Dark</button>
      <button type="button" class="btn btn-link">Link</button>
    </div>
    <nav class="mt-5" aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
      </ol>
    </nav>
    <div class="accordion" id="accordionExample">
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Accordion Item #1
          </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Accordion Item #2
          </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingThree">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            Accordion Item #3
          </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bootstrap 5 is not required jquery dependency

If you use bootstrap above 5 versions. you required query dependency, check out How to add query in angular