How to add Bootstrap to an Angular StackBlitz project

When using StackBlitz to build Angular projects, it can be nice to use something like Bootstrap to spice up the look and feel of your project. Bootstrap is by far the most popular CSS framework and lets you easily make your apps look better. In this post, I'll show how you can add Bootstrap to your project in less than 30 seconds.

There are only two steps to adding BootStrap to an Angular project:

1. Add the dependency
2. Reference the CSS file

Add the Dependency

You will need to add the Bootstrap node module to your project. This is pretty straightforward. First, open up the Dependencies section of your project:

Next, in the textbox at the bottom, type in "bootstrap" and hit enter:

Once you hit Enter, StackBlitz will ask you if you want to install the UNMET PEER DEPENDENCIES

Hit INSTALL MISSING DEPENDENCIES and that will install the missing dependencies. That's it; you've now got the Bootstrap package installed correctly.

Reference the CSS file

The last thing you need to do is reference the Bootstrap CSS file. This is done by going to your "styles.css" file and adding the following line:

@import '~bootstrap/dist/css/bootstrap.min.css';

That's it! You're done. You can now use Bootstrap styles in your project.

Note that, since you haven't included the Bootstrap JavaScript, you can't use certain components like modals and some popups, but then again, you do have Angular, so most of what you're missing you'll probably want to use Angular for.