loading...

How to add Bootstrap to an Angular StackBlitz project

josepheames profile image Joe Eames Updated on ・2 min read

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:
Alt Text
Next, in the textbox at the bottom, type in "bootstrap" and hit enter:
Alt Text
Once you hit Enter, StackBlitz will ask you if you want to install the UNMET PEER DEPENDENCIES
Alt Text
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.

Posted on by:

josepheames profile

Joe Eames

@josepheames

Mormon, Christian, Father, Educator, CEO of Thinkster.io, Organizer of @ngconf, @frameworksummit & React Conf. Front end developer, and Software Craftsmanship Evangelist.

Discussion

pic
Editor guide