Angular 10 Tutorial - Using Bootstrap

In this tutorial, we will learn about using Bootstrap in Angular 10. Let's see how we can use Bootstrap in Angular 10.

Installing Bootstrap and jQuery

For using Bootstrap, first, we need to install jQuery and Bootstrap. So, go to the command prompt and run the following commands:

First, install jQuery by running the command:

npm i jquery

Now, let's install Bootstrap by running the command:

npm i bootstrap

Alright, now jQuery and Bootstrap have been installed.

Configuring Bootstrap in Angular 10

Now, let's see how we can use Bootstrap in our component. So, switch to the project and open the angular.json file. Here, add the bootstrap.min.css by writing:

"styles":[
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts":[
    "node_modules/jquery/dist/jquery.min.css",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Now, save the file and re-run the application. Stop the running application by pressing Ctrl+C, and then run the command:

ng serve

Adding Bootstrap Components

Alright, now open the app.component.html file and let's add any Bootstrap component here. Switch to the browser and go to getbootstrap.com. Inside this page, just click on the "Components" tab. Now, choose any component. Let's add the "Collapse" component. So, just click on "Copy" and paste it inside the app.component.html file:

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
</div>

Save the file and let's check it. Switch to the browser, and here you can see the Collapse component. So, in this way, you can add and use Bootstrap in Angular 10.