Briebug Blog

Sharing our thoughts with the community

The Guide to Using Bootstrap With Angular

The Guide to Using Bootstrap With Angular


Intro

Let's talk about how to add bootstrap to Angular. Not to be confused with that most famous footwear adorning the feet of the legendary cowboy, Bootstrap is an open-source CSS framework from Twitter. It comes loaded with classes, components and a ton of other useful tools. In this article we'll unpack both how to add the bootstrap framework or just the styling utilities in your Angular project.

Using the Bootstrap Framework

If you want to add the entire bootstrap framework to your application, here are a couple good options.

First, let's take a look at NG Bootstrap. This package rebuilds the Bootstrap components using only Angular and no jQuery making it a seamless integration with Angular.

Note: Go here to check which version of Twitter Bootstrap NG Bootstrap supports. They are fairly good at keeping up with the newest releases.

Installation

To install NG Bootstrap in Angular run the command from the Angular CLI:

With that installation complete it's up to you how you want to use the framework. Here is a list of what NG Bootstrap has to offer.

Another viable option is ngx-bootstrap, it too is set up for the Angular framework. It also has a supportive community and keeps up with Twitter Bootstraps releases.


Installation

To begin, ngx-bootstrap can be added to your Angular project with the CLI:

If you prefer to use NPM you can install it manually as well:

Now you're all set to create some magic with ngx-bootstrap. Checkout this list for more component options.

Another option for integrating bootstrap with your Angular project is by simply adding the Twitter Bootstrap utilities and styles. This is one of the most used features amongst the community. It's lightweight but provides numerous resources for styling your application the best way, the way you like it. Using this approach you can provide margin/padding, flex, and type along with one of the most loved features, bootstrap's responsive grid. Below is an example for adding this awesome toolkit to your project.


Installation

Start with the installation from NPM.

Then inside styles.scss import the portions of bootstrap you want to utilize and that's it!

The options are almost endless when it comes to using the bootstrap CSS. You can layout your entire application without having to create any global or local custom CSS classes. This streamlines the architecture of your app and eliminates CSS clutter.

Theme Customization

This brings us into another great feature, customizing bootstrap for your Angular project.

Example

Let's do something real simple and customize the color of a primary button. First import the utilities from bootstrap into your main style sheet:

Here is the button in the template:

Out of the box this will set the button to that classic bootstrap blue. But we want to go with a primary color of purple to line up with our theme. So add these lines below your main imports then import bootstrap after the changes. Now if you take a look in the browser again, your button should be purple!

This same work can also be applied to other classes and themes included in bootstrap.

Conclusion

Every project is different and with that comes decisions on what is best for each use case. Whether you want to use the entire bootstrap framework in your Angular project or just add the power of the bootstrap styling and utilities the choice is yours. I hope you feel empowered now to use bootstrap in your next Angular project. Thank you for stopping by and happy coding.

View Details
- +
Sold Out