Adding Bootstrap 5 to an Angular 13 project

Every time I create a new project (and hopefully you too), one of the first things I do is implement Bootstrap 5. Thus, this article will hopefully serve as a lookup for when a new project is started.

Step 0.5: New Angular app

If you haven’t already, let’s create a new Angular application using:

ng new name-of-app

Like always, this will ask if we want to use Angular routing and whether we want to use css/scss/sass — choose whatever you prefer, that debate is not within the scope of this article.

Afterward, cd into the project:

cd name-of-app

Step 1: Installations

First of all, let’s install the necessary modules:

npm install bootstrap@latest
npm install @popperjs/core
npm install jquery

Step 2: Configure angular.json

There are two places within angular.json requiring editing, specifically the styles array, and the scripts array.

These can typically be found around line 29 in your angular.json file, located within the root directory of your project.

This is what you’ll find before your edits:

"styles": [
    "src/styles.css"
],
"scripts": []

And this is what you should change it to:

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

Note, what we have done here is: (1) added the bootstrap styles to the styles array and (2), added jquery and bootstrap.js to our scripts array.

Step 3: Implement & ng serve!

There’s really not much more to it. Generate a component, add some bootstrap elements and make sure it works!

Final thoughts

Thanks for taking the time out of your day to read this article, I really hope it helped! If you feel it did, consider following me on Medium — they no longer pay creators with < 100 followers :(

If you have any questions regarding the implementation, feel free to leave a comment!