Adding Bootstrap and Bootswatch to Angular.CLI

Let me start by setting expectations:

This article is about how to add Ng-Bootstrap and Bootswatch to an Angular CLI
application.

This article is not a detailed explanation of Ng-Bootstrap or Bootswatch or
the Angular-CLI.

Step 0: Strictly a prerequisite
Step 1: Creates a clean Angular CLI application
Steps 2 – 4: Hooking things up
Steps 5 and on: Examples

Bootswatch is a series of free themes for Bootstrap. You can check out the
themes at
bootswatch.com

To begin, I will create a new Angular CLI application.

The Angular CLI is a tool to initialize, develop, scaffold, and maintain
Angular applications

Step 0: Installing the CLI if its not already on your machine

npm install -g @angular/cli

Step 1: Creating the base application

Next we will generate an Angular project vial the CLI. NOTE
--style scss this tells the CLI to use SCSS instead of the
default CSS. In my opinion, I like this better for Bootstrap/Bootswatch. (You
can always change the default style later). I also add the
--routing true because I typically use routing and it is more
convenient to add it up front.

ng new --style scss --routing true my-project 
cd my-project

At this point, we have a base Angular application with nothing special. I open
the project in my editor of choice for Angular development Visual Code. In a
terminal window I run the command ng serve. This will serve the
application on localhost:4200 by default.

In a browser you should see

Step 2: Adding both packages to the application

Next, I add a powershell window to the terminal window, so I can run more
powershell commands on the project. Then we add the 2 packages:

  • @ng-bootstrap – Bootstrap 4 components, powered by Angular
  • bootstrap – A popular front-end framework for developing responsive, mobile
    first projects.
  • bootswatch – Free themes for Bootstrap
npm install --save @ng-bootstrap/ng-bootstrap 
npm install --save bootstrap 
npm install --save bootswatch 

Step 3: Hooking up the Theme

In the src directory add a new file “_variables.scss”. This file will hold all
of the scss variables for the entire project. This file can be referenced by
any and all component level scss files to get the values for colors and font
and such. By reference this file in the component level scss files, we will
have access to all the theme variables keeping styles consistent. This will
limit the number of places we will need to change if we change themes in the
future(See Step 7). For this example I am using the superhero theme.

@import "../node_modules/bootswatch/dist/superhero/variables";

Next we will edit the style.scss file also in the src directory.

@import "./variables"; 
@import "../node_modules/bootstrap/scss/bootstrap"; 
@import "../node_modules/bootswatch/dist/superhero/bootswatch";

Once we save all our changes, the browser should update to this

Step 4: Wiring up Bootstrap

We now have bootswatch and bootstrap stylings but not the bootstrap
components, so lets wire them up. We need to do two things, first we need to
tell Angular about the ng-bootstrap. We do this by importing the NgbModule.
The second one is not well documented, but some of the ng-bootstrap components
need the FormsModule, so we will import it also.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component';

@NgModule({ 
    declarations: [ AppComponent ], 
    imports: [ BrowserModule, FormsModule, NgbModule.forRoot(), AppRoutingModule ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }

Step 5: Let’s use a bootstrap component

I am going to add a simple carousel from the ng-bootstrap examles. In the
powershell window of the terminal lets type

There will be a new folder under app named test-carousel with four files
inside it.

Edit the .html file

<ngb-carousel><ng-template ngbslide="">
    <img src="https://lorempixel.com/900/500?r=1" alt="Random
first slide">
<div class="carousel-caption">
<h3>First slide label</h3>
Nulla vitae elit libero, a pharetra augue mollis interdum.</div>
</ng-template>
  <ng-template ngbslide="">
    <img src="https://lorempixel.com/900/500?r=2" alt="Random second slide">
<div class="carousel-caption">
<h3>Second slide label</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</ng-template>
  <ng-template ngbslide="">
    <img src="https://lorempixel.com/900/500?r=3" alt="Random third slide">
<div class="carousel-caption">
<h3>Third slide label</h3>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.</div>
</ng-template> </ngb-carousel>

Then, let us look at the .ts file

import { Component, OnInit } from '@angular/core'; 
@Component({ 
    selector: 'app-test-carousel',
    templateUrl: './test-carousel.component.html', 
    styleUrls: ['./test-carousel.component.scss'] 
}) 
export class TestCarouselComponent implements OnInit { 
    constructor() { } 
    ngOnInit() { } 
}

We will need the selector name to use the component.

Let’s now add our new component into the app.component.html file removing most
of the boilerplate generated by the CLI.

<!--The content below is only a placeholder
and can be replaced.-->
<div class="container" style="text-align:center">
<div style="text-align:center">
<h1>Welcome to {{ title }}!</h1>
</div>
<app-test-carousel></app-test-carousel>
  <router-outlet></router-outlet></div>

Once we save all our changes, the browser should update to this

Step 6: Best practices

I try to never introduce a new color in a component scss, rather I try to
reference one from the bootswatch theme. I do this so my color scheme will
follow the theme and if i change themes the color should translate.

So how do i do that?

Let us go to the TestCarouselComponent and edit the scss file.

@import '../../variables'; 
.title { 
    background-color: $primary; 
    color: $secondary;
}

Line 1 actually includes the _variable.scss file we created in step 3 and that
file include the theme’s _variable.scss file which has all the theme’s color
definitions. This is where $primary and $secondary were defined. (and yes I
realize my class defines an ugly combination but it is to serve a point)

Now edit the html to use that new class.

<div class="title">Carousel Title</div>
<ngb-carousel>
  <ng-template ngbslide="">
    <img src="https://lorempixel.com/900/500?r=1" alt="Random first slide">
<div class="carousel-caption">
<h3>First slide label</h3>
Nulla vitae elit libero, a pharetra augue mollis interdum.</div>
</ng-template>
  <ng-template ngbslide="">
    <img src="https://lorempixel.com/900/500?r=2" alt="Random second slide">
<div class="carousel-caption">
<h3>Second slide label</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</ng-template>
  <ng-template ngbslide="">
    <img src="https://lorempixel.com/900/500?r=3" alt="Random third slide">
<div class="carousel-caption">
<h3>Third slide label</h3>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.</div>
</ng-template> </ngb-carousel>

Once we save all ourchanges, the browser should update to this

Step 7: Changing Themes

Okay, for the sake of completeness let’s change themes to the “flatly” theme.
All it takes is a quick edit of two files.

@import "../node_modules/bootswatch/dist/flatly/variables";
@import "../node_modules/bootstrap/scss/bootstrap";

Next, we will edit the
style.scss file also in the src directory.

@import "./variables";
@import "../node_modules/bootswatch/dist/flatly/bootswatch";

Once we save
all our changes, the browser should update to this

Note that even our ugly “Carousel Title” has changed since we used the theme’s
colors to define it’s class.

Conclusion

I hope you enjoyed this quick tutorial on how to hook Bootstrap, Bootswatch
and Angular.CLI all together. It took me several iterations to get this the
way I like. This is now my standard for all new Angular Applications if you
would like to see my source code it is on GitHub
https://github.com/RandREng/BootAngular

Thank you for taking the time to read this.

2 thoughts on “Adding Bootstrap and Bootswatch to Angular.CLI”

  1. There is no bootstrap directory inside node_modules. There is only @ng-bootstrap, so @import “../node_modules/bootstrap/scss/bootstrap” inside _variables.scss throws error.

    1. Sorry for the delay in responding, but thank you so much for taking the time to read the article.

      Bootstrap used to be a dependency to bootswatch….back in June bootswatch removed this dependency, so now it does not install bootstrap with bootswatch anymore. I will update the steps to install bootstrap also.

      Sorrry for the confusion.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.