Adding Bootstrap 5 to Angular 13

Question

I want to add bootstrap to angular. Specifically I'm having problems displaying icons from the library using code like

<i class="bi bi-star"></i>

I've added the line

              "./node_modules/bootstrap/dist/css/bootstrap.css"

in angular.json. I've also added

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

in styles.scss. Some funtions of bootstrap have been implemented on the app such as the formatting of buttons but it won't recognize bootstrap classes.

I hope I was clear. I'm just starting out and it's my first query on SO. Thanks in advance.

Answer 1

You need this:

npm install bootstrap

Solution 1: Write it to angular.json

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

Solution 2: import bootstrap to style.css

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