In this video we are going to learn about Using Bootstrap.
Lets see how can we use bootstrap In agnular 10.
For using bootstrap first of all install jQuery and bootstrap.
So go to the command prompt and run the command.
First install the jquery so run the command.

npm i jquery

Now lets intall the bootstrap so run the command.

npm i bootstrap

Alright now jQuery and bootstrap have been installed.
Now lets see how can we use bootstrap in component.
So switch to the project Now open angular.json file and here add the bootstrap.min.css.
So just write here.

\"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.
So just stop the running application press ctrl+c.
Now run the command.

ng serve

Alright, Now open app.component.html file and here.
Lets add any bootstrap component here.
So switch to the browser and.
Just go to the getbootstrap.com.
and inside this page just click on component.
Now choose any component.
Lets add this collapse.
So just click on copy Now paste 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 lets check it.
So 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.