A quick detour: styling Angular with Bootstrap

Published in

Angular for dads

4 min readApr 30, 2019

Our sample application is starting to get more complex, story by story.
It’s the perfect time to see how easy styling it with Bootstrap can be.

Heads up!

You can find the code for every story in this publication on GitHub: https://github.com/angular-for-dads/first-app

master is always up to date with the latest story, but there is also one branch for each story so that you can follow at your own pace.

Installing Bootstrap

Open a terminal, go to the root directory of the project, and install Bootstrap:
npm install -S bootstrap
Edit angular.json:

{
  [...]
  "projects": {
    "angular-for-dads": {
      [...]
      "architect": {
        "build": {
          [...]
          "options": {
            [...]
            "styles": [
              "node_modules/bootstrap/scss/bootstrap.scss",
              "src/styles.scss"
            ],
[...]

Restart the application, and take a look a what’s already changed:

Using Bootstrap

If you already know your way around Bootstrap, you can skip this section.
Otherwise, let’s see how to properly use Bootstrap in your application.

Update AppComponent's template:

<main class="container-fluid">
  <ng4d-greeting-cards-list
    [persons]="persons$ | async"
    (dataRequested)="requestData()"
  ></ng4d-greeting-cards-list>
</main>

Update GreetingCardsEmptyStateComponent's template:

<article class="alert alert-info my-3">
  <p>There nothing to see here :-(</p>
  <p class="mb-0">
    <button
      class="btn btn-primary btn-lg"
      type="button"
      (click)="emitDataRequested($event)"
    >Load greeting cards</button>
  </p>
</article>

Update GreetingCardsItemComponent:

import { Component, Input } from '@angular/core';// App Models
import { Person } from '../persons/person.model';@Component({
  selector: 'ng4d-greeting-cards-item',
  template: `
    <article class="card my-3 w-50 mx-auto">
      <div class="card-body">
        <h1 class="card-title h5">
          Hello, I'm {{ person.name }}!
        </h1>
        <p class="card-text">
          And I'm a {{ person.age }} years old dad.
        </p>
      </div>
    </article>
  `,
})
export class GreetingCardsItemComponent {
  @Input() person: Person;
}

Those are some nice little cards you have there, Mister

Customizing Bootstrap

Now for the interesting part. Let’s see how to easily customize Bootstrap in an Angular application.

After a bit of preparation, it all comes down to three simple steps you can repeat ad libitum:

In the Bootstrap source, find out the SCSS variables used to style the part you want to customize
Copy those variables over to your override file
Delete the !default pragma and customize the values of the variables

Preparations

Create a new directory tree: src/overrides/bootstrap/scss
Copy node_modules/bootstrap/scss/bootstrap.scss inside the new directory tree
Update every @import path adding a ~bootstrap/scss prefix. Example:

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
[...]

(Optional) Comment out the @import for any Bootstrap part you know you are not going to use
Create a new SCSS partial: src/overrides/bootstrap/scss/_variables.scss
Import the new _variables.scss partial inside bootstrap.scss just after the original one:

@import '~bootstrap/scss/functions';@import '~bootstrap/scss/variables';
@import 'variables';@import '~bootstrap/scss/mixins';
[...]

Update angular.json to import your overridden bootstrap.scss instead of the original one:

{
  [...]
  "projects": {
    "angular-for-dads": {
      [...]
      "architect": {
        "build": {
          [...]
          "options": {
            [...]
            "styles": [
              "src/overrides/bootstrap/scss/bootstrap.scss",
              "src/styles.scss"
            ],
[...]

Customizing variables

Now let’s go find some interesting variables and customize them!

Open node_modules/bootstrap/scss/_variables.scss
Copy the variables responsible for the rounded, flat look of Bootstrap 4 components, paste them into your _variables.scss, remove the !default pragma, and change the values:

$enable-rounded:                              false;
$enable-shadows:                              true;
$enable-gradients:                            true;

From this point on, the sky is the limit. You can customize Bootstrap at will.
All it takes is a bit of time to get the hang of everything Bootstrap has to offer, but then it’s only a matter of keeping overriding all the things!

Wrapping up

This time you learned how to:

Seamlessly integrate Bootstrap into your Angular application
Override and customize only the parts of Bootstrap you need to customize

After this quick detour in the next story we will get back to handling user input and events with Angular, this time using the powerful FormBuilder service.

Previous: Working with user input in Angular. Part 1: outputs

Next: Working with user input in Angular. Part 2: forms