CODEWITHSUNDEEP
angularbootstrap-modal
Vincent Bullock
Vincent Bullock

Reputation: 41

Adding Bootstrap 5 to Angular 13

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.

Upvotes: 4

Views: 10934

Answers (3)

mullern
mullern

Reputation: 58

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";

Upvotes: 2

Ricardo Sevilla
Ricardo Sevilla

Reputation: 36

The easiest way to add Bootstrap 5 to your project is by pasting the href in the index.html on the header.

Upvotes: 1

Vincent Bullock
Vincent Bullock

Reputation: 41

This is what solved it for me

Turns out the icons are now in a different module called bootstrap-icons and you have to import it separatelty.

Upvotes: 0

Related Questions