Using Bootstrap 4 with Angular

Introduction

Bootstrap 4 is out and ready to be added to your Angular project. In this blog post I will discuss what’s new with Bootstrap 4 and how it aligns well with Angular. Before I get started, I should mention, there is a Material library that is supported by the Angular team. It provides all sorts of built in components that play well with Angular, and if you are already familiar with material I would encourage you too explore the @angular/material library. With that said, it doesn’t hurt to explore your options. The following will provide a quick rundown of Bootstrap 4. I have also added some examples to my ng-example repo that you can find at https://github.com/rmroot/ng-example.

Before we jump in, here are some links to other Angular Tutorials I’ve put together:

• Angular Tutorial: Getting started with the Angular CLI
• Angular Component Tutorial: Inputs, Outputs, and EventEmitters
• Angular Component Lifecycle
• Angular Router Tutorial: Setting Up Routing in Your Application
• Angular Module Tutorial: Application Structure Using Modules
• Electron Tutorial: Getting started with Electron and Angular CLI

The Approach to Bootstrap 4

Per the Bootstrap documentation, found at https://getbootstrap.com/docs/4.0/extend/approach/, the team has a set of guides that steer their approach:

1. Components should be responsive and mobile-first
2. Components should be built with a base class and extend via modifier classes
3. Component states should obey a common z-index scale
4. Whenever possible, prefer a HTML and CSS implementation over Javascript
5. Whenever possible, use utilities over custom styles
6. Whenever possible, avoid enforcing strict HTML requirements (child selectors)

Looking through this list, a couple of these items stand out as aligning closely with Angular’s approach to styling. Specifically, number four. In an Angular app, all styling should be done with CSS and HTML. You shouldn’t be accessing the Dom or be using JQuery to apply classes to your elements. Angular provides two powerful directives for styling your elements without the use of JavaScript, NgClass and NgStyle. With those two directives, you shouldn’t need to access the Dom to manipulate the style of any element.

**It is possible to access Dom elements without JQuery or window calls with ElementRef but even Angular’s documentation discourages its use for security reasons.

Now I will admit that number five may seem to be a bit counter intuitive to an Angular component, since every component has it’s own custom style sheet. But if done properly, those style sheets can be used for modifier classes (number two), and your application styling can still maintain the Bootstrap approach. If you do find the need to create custom styles, I would encourage you to use a BEM (Block Element Modifier) methodology, because it closely aligns with Bootstrap’s approach.

For more information on BEM: http://getbem.com/introduction/

Finally, numbers 1, 3, and  6 are just going to make your life easier. I’m a firm believer in a class first approach when styling web applications, it provides much more flexibility in your HTML.

Adding Bootstrap 4

Adding Bootstrap to your Angular application is an easy two step process. Just install it and import it to the global style sheet provided by the Angular CLI.

1. npm install bootstrap@latest --save-dev
2. Open styles.css and add the following
   • @import "~bootstrap/dist/css/bootstrap.css";

What Stands Out in Bootstrap 4

My two personal favorite pieces of Bootstrap 4 are the Card component and the addition of Flexbox utilities. Cards can be used as content containers with all sorts of variety and options that can be applied to them. Using cards is an easy way to group and cleanly layout a set of content in your application. They also work seamlessly with the grid system, so using multiple cards for repetitive content (with *ngFor) is a breeze. In addition to the typical bootstrap grid system of rows and columns, the added Flexbox utilities also are a huge help in getting your content exactly where you want it. It gives you the full power of Flexbox CSS in the form of classes.

Summary

I use Bootstrap 4 and Angular on a daily basis for my current project, and I am constantly finding new ways to leverage it to make my life easier. It gives you a large set of utility type classes that can be applied as-is or overwritten in a given component. Sometimes a developer just wants a way to center content on a web page without having to write their own CSS, and that’s the sort of thing Bootstrap 4 provides for you.