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:
- Add the dependency
- Reference the CSS file
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
INSTALL MISSING DEPENDENCIES and that will install the missing dependencies. That's it; you've now got the Bootstrap package installed correctly.
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:
That's it! You're done. You can now use Bootstrap styles in your project.