Add Bootstrap in Angular

Bootstrap is a CSS framework which is has the set of predefined CSS classes like alert, card, dropdown etc. by using those you apply the styling and responsive website or web application. It will be reducing the development time. In blog help you to add bootstrap in angular application. To know how to create your first angular application please visit here.

Responsive

Now a days we many devices to access the internet and can view the any kind of website form all device like smart phone, Tab, laptop, Desktop. Each device has the different size of screen. If your website has the fixed or static styles the visitors cannot view your website in clear and it’s look also not good. In such case If you applied the bootstrap classes that will be automatically adjust the size of the components or HTML elements based on the screen width and height. Then now viewers can view your website clearly and website looks doesn’t change.

How to install bootstrap in Angular

Bootstrap provides the NPM library so you can install the bootstrap by using the NPM install command in angular. You can see the ways to install the bootstrap in below. Here you can find the available versions

Install current version:
npm i bootstrap --save

Install Next Version
npm i bootstrap@next --save

Install Specific Version
npm i bootstrap@5.2.3 --save

Include js file in angular.json

"scripts": [
    "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
    ],

Include CSS in angular.json

"styles": [
    "styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],