How to Use Bootstrap in Angular

We will introduce how to use Bootstrap in Angular.

Bootstrap in Angular

Bootstrap is a CSS framework used to design a responsive and mobile-friendly website faster. It is the most popular framework that is used widely.

We can also use Bootstrap in our Angular application by following these simple and easy steps.

First of all, we need to install Bootstrap in our angular project, and to do that, we need to go to the terminal and run the following command.

# cli
npm install bootstrap -save

This command will install the Bootstrap in our angular project. But if you are using SASS in your project, I would recommend installing bootstrap-sass instead.

# cli
npm install bootstrap-sass -save

Once you have installed Bootstrap, it will be saved in node modules, and now we only need to import Bootstrap CSS wherever we want to use Bootstrap using the following import commands.

# angular
@import '~bootstrap/dist/css/bootstrap.css';

Or if you are using SASS.

# angular
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

By following these steps, we can easily install bootstrap in any of our angular applications and make it responsive and mobile-friendly by using Bootstrap classes.