Hello Devs,

In this tutorial, we are going to learn how to install bootstrap in angular 10.

Bootstrap is the world’s most popular framework for building responsive, and mobile-first sites. Bootstrap provide several class for making responsive website for your mobile.

Given below are two examples to install bootstrap and use it with your angular 10 project.


Create app:

ng new my-new-app



Example 1:

npm install bootstrap --save

src/style.css

@import "~bootstrap/dist/css/bootstrap.css";



Example 2:

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

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"

      ]

.....

src/app/app.component.html

<div class="container">

  <h1>Install Bootstrap 4 in Angular 10 - Rathorji.in</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>


I hope this example helps you.