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.

you need to install icon bootstrap too

GRD
– GRD

2022-04-20 08:16:37 +00:00
Commented Apr 20, 2022 at 8:16 — GRD
– GRD, Commented Apr 20, 2022 at 8:16
stackoverflow.com/questions/60365440/…

Eliseo
– Eliseo

2022-04-20 09:08:13 +00:00
Commented Apr 20, 2022 at 9:08 — Eliseo
– Eliseo, Commented Apr 20, 2022 at 9:08

mullern · Accepted Answer · 2024-03-07 16:40:11Z

3

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

edited Mar 7, 2024 at 16:40

answered Apr 20, 2022 at 8:28

mullern

584 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vincent Bullock Over a year ago

I ran npm again and I added those lines of code. I restarted ng serve. Everything looks the same as before. It doesn't recognize bootstrap classes and I can't insert icons by changing the class of an element. Everything else looks like bootstrap.

mullern Over a year ago

I edited my answer. Please try the solution 2.

Prashant Over a year ago

for icons there is seperate css you can look in node_modules/bootstrap

Ch Asjad Mahmood Over a year ago

don't forget to restart angular application after doing changes in 'angular.json' file.

Kapil Soni Over a year ago

@mullern change the bootsrap spelling in ur answer

Ricardo Sevilla · Accepted Answer · 2022-04-21 13:19:20Z

1

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

answered Apr 21, 2022 at 13:19

Ricardo Sevilla

365 bronze badges

Comments

Vincent Bullock · Accepted Answer · 2022-04-20 14:07:49Z

0

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.

answered Apr 20, 2022 at 14:07

Vincent Bullock

411 gold badge1 silver badge3 bronze badges

Collectives™ on Stack Overflow

Adding Bootstrap 5 to Angular 13

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related