bootstrap 5 npm is missing alert classes

Martijn Hiemstra 0
Viewed 25

I am using "bootstrap": "^5.2.1", in my angular 13 project. Most components work however the alert component is missing some styling. I have an alert that uses the alert-primary and it has a green background:

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>

I also have 2 alerts that have alert-success and alert-danger and they have no background color. I have discovered that only alert-primary works and that nothing else has a background color. When I use the inspector of the browser it is clear that bootstrap 5 is missing styles!! .alert class is applied however alert-danger and alert-success and the rest are missing in bootstrap 5. Have more people experienced this in bootstrap 5?

I import the "~bootstrap/scss/bootstrap.scss" style in my styles.scss file not the css file or a cdn link. Could there be an issue with the bootstrap 5 scss files?

bootstrap-5 css
2 Answers
Dimitris Maragkos0

I have found the solution. Bootstrap works very strange. Instead of using fixed styling that you can override, bootstrap creates these styles using the theming variables. When I defined the themes colors everything worked. I add the following code to my scss file and the alerts worked again:

$theme-colors: (
  "primary": rgba(0, 142, 126, 0.8),
  "danger": #e40017f1,
  "warning": #ba4523, 
);
Martijn Hiemstra0
Related