Use Bootstrap in Angular

Bootstrap is a responsive, mobile-first CSS framework for building web applications. It is open-source and includes features such as Sass variables, mixins, a responsive grid system, pre-built components, and JavaScript plugins.

Installing Bootstrap in an Angular Project

To install Bootstrap, open a terminal in your Angular project directory and run:

npm install --save bootstrap

This will download Bootstrap and place it inside the node_modules folder.

Adding Bootstrap to Angular

You can include Bootstrap in your project in two ways:

Method 1: Using angular.json

Open the angular.json file and add the Bootstrap CSS file in the styles array:

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

Method 2: Importing in styles.css

Alternatively, you can import Bootstrap in styles.css:

@import '~../bootstrap/dist/css/bootstrap.min.css';

Using Bootstrap Components

Once Bootstrap is installed, you can use its classes in your Angular components. For example, if we add button in app.component.html

<button class="btn btn-success">Success</button>

Rebuilding Angular After Adding Bootstrap

After making changes, restart your Angular project to apply Bootstrap styles:

ng serve

Uninstalling Bootstrap

If you no longer need Bootstrap, you can remove it by running:

npm uninstall bootstrap

This will delete the Bootstrap files from the node_modules folder.

With Bootstrap integrated, you can now enhance your Angular application with its powerful styling and responsive features.

If you have any questions, feel free to ask. Thank you for reading!