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.
NG Bootstrap
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:
ng add @ng-bootstrap/ng-bootstrap
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.
NGX Bootstrap
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:
ng add ngx-bootstrap
If you prefer to use NPM you can install it manually as well:
npm install ngx-bootstrap --save
Now you’re all set to create some magic with ngx-bootstrap. Checkout this list for more component options.
Bootstrap A La Carte
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.
npm install bootstrap
Then inside styles.scss import the portions of bootstrap you want to utilize and that’s it!
@import '~bootstrap/scss/functions', '~bootstrap/scss/variables', '~bootstrap/scss/mixins', '~bootstrap/scss/bootstrap-grid', '~bootstrap/scss/utilities';
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:
@import '~bootstrap/scss/functions', '~bootstrap/scss/variables', '~bootstrap/scss/mixins', '~bootstrap/scss/buttons';
Here is the button in the template:
<button class="btn-primary">Signup</button>
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!
$theme-colors: ( // Using the bootstrap "purple" color variable. primary: $purple ); @import "~bootstrap";
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.