Tutorial: Styling Angular CLI v6 apps with Bootstrap

This tutorial is an update to my previous tutorial on how to use Bootstrap in Angular. In this tutorial we will be using the following versions:

  • Angular CLI 6.0.0.
  • Bootstrap 4.1.1.
  • FontAwesome 4.7.0.

The tutorial covers the following things:

  • Install or upgrade to Angular CLI v6.
  • Scaffold a new app using Angular CLI v6.
  • Install Bootstrap and FontAwesome and integrate them in our new app.
  • Configure a base template and some UI components.

Let’s get started!

Install or update to Angular CLI v6

For this tutorial you need to upgrade Angular CLI to version 6+ if you haven’t done so already. To do so you can use this command:

npm install -g @angular/cli@latest

To verify you are on the right version, run ng --version and verify that the output is similar to this:

     _                      _                 ____ _     ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 6.0.0
Node: 9.5.0
OS: darwin x64
Angular:
...
Package                      Version
------------------------------------------------------
@angular-devkit/architect 0.6.0
@angular-devkit/core 0.6.0
@angular-devkit/schematics 0.6.0
@schematics/angular 0.6.0
@schematics/update 0.6.0
rxjs 6.1.0
typescript 2.7.2

Scaffold a new project

Now that we have the right version installed, we can scaffold our new app by using ng new and cd into the new folder:

ng new tutorial-angular-cli-v6-styling-bootstrap
cd tutorial-angular-cli-v6-styling-bootstrap

The ng new command will generate a new directory, create our base application and installs the packages defined in package.json.

Once you are inside the project directory you can start the development server using ng serve:

ng serve
Default un-styled Angular app.

As stated in the output, you can navigate to your new app on the address http://localhost:4200/ . The app is now ready to get some styles! 😎

Install Bootstrap and FontAwesome

We will use npm to install the dependencies:

npm install bootstrap font-awesome 

Now that the dependencies are installed we can tell Angular CLI that it needs to load these styles.

One easy way to do this is by opening the file src/styles.css and adding the following lines:

@import "~bootstrap/dist/css/bootstrap.css";
@import "~font-awesome/css/font-awesome.css";

When you save this file the development server should refresh the page and you should be able to see that the font has changed, this is because Bootstrap is loaded correctly!

Default Angular app with Bootstrap loaded

On to adding a few components to make our app look a bit better!

Configure base template and UI components

In the last step of this tutorial we will create a module called UiModule and add 3 components to it: LayoutComponent, HeaderComponent and FooterComponent.

The LayoutComponent will be referenced from the AppComponent that got generated when we ran ng new.

Create the UiModule

We generate the UiModule using the following command. Using the --module parameter we automatically import the UiModule in our main AppModule:

ng generate module ui --module app.module

Next we will generate our 3 components inside of this new module:

ng generate component ui/layout
ng generate component ui/header
ng generate component ui/footer

Implement the LayoutComponent

Next thing to do is open src/app/ui/layout/layout.component.html in your IDE and update the content with the following code:

<app-header></app-header>
<div class="container">
<ng-content></ng-content>
</div>
<app-footer></app-footer>

As you can tell the LayoutComponent uses the HeaderComponent and FooterComponent and wraps it around a div with the class container, which wraps around the ng-content tag.

This means that if we want to use our layout, we can use it using the <app-layout> tag and add our content to it, as we will see in the next step.

Export the LayoutComponent

In order to use the <app-layout> tag outside of the UiModule we need to export it.

Open src/app/ui/ui.module.ts and add the exports: [] key to the @NgModule decorator. Inside the exports array we add a reference to our LayoutComponent.

Your UiModule should now look like this, the changes are in bold:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LayoutComponent } from './layout/layout.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
imports: [
CommonModule
],
declarations: [LayoutComponent, HeaderComponent, FooterComponent],
exports: [LayoutComponent]
})
export class UiModule { }

Now that our LayoutComponent is exported, we can use it in our AppComponent!

Use the LayoutComponent

Open the file src/app/app.component.html and remove replace all the content with the code below:

<app-layout>
<div class="jumbotron">
<h1>Angular CLI v6 + Bootstrap & FontAwesome</h1>
<p>
In this tutorial you learn how to use Angular CLI v6 with Bootstrap and FontAwesome!
</p>
</div>
</app-layout>
Using our LayoutComponent in our AppComponent

When you save the file you should see the application being rendered like in the screenshot above. As you can see the HeaderComponent and FooterComponent are wrapped around our content, which is exactly what we want! Time to add some styles to our HeaderComponent and FooterComponent

Implement the HeaderComponent

Open the file src/app/ui/header/header.component.html and replace the content with this code:

<nav class="navbar navbar-dark bg-dark mb-5">
<a class="navbar-brand" href="/">Angular & Bootstrap</a>
<div class="navbar-expand mr-auto">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
<div class="navbar-expand ml-auto navbar-nav">
<div class="navbar-nav">
<a class="nav-item nav-link" href="https://github.com/beeman" target="_blank">
<i class="fa fa-github"></i>
</a>
<a class="nav-item nav-link" href="https://twitter.com/beeman_nl" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a class="nav-item nav-link" href="https://medium.com/@beeman" target="_blank">
<i class="fa fa-medium"></i>
</a>
</div>
</div>
</nav>

This code implements a dark ‘navbar’, adds a title and some links. For more details on the syntax of the navbar or how to make it responsive, please refer the bootstrap documentation of the navbar.

The HeaderComponent with some links

Implement the FooterComponent

The last thing to do in this tutorial is to implement the FooterComponent.

Open the file src/app/ui/footer/footer.component.html and replace the content with the following code:

<nav class="navbar navbar-dark bg-dark mt-5 fixed-bottom">
<div class="navbar-expand m-auto navbar-text">
Made with <i class="fa fa-heart"></i> by <a href="https://twitter.com/beeman_nl">beeman</a>
</div>
</nav>

To give it a last touch open src/app/ui/footer/footer.component.css and add the following code:

.fa-heart {
color: hotpink;
}
The final result of our tutorial!

Source: https://github.com/beeman/tutorial-angular-cli-v6-styling-bootstrap

StackBlitz: https://stackblitz.com/edit/tutorial-angular-cli-v6-styling-bootstrap?file=src%2Fapp%2Fapp.component.html

Aaaaaaaand you’re done!

That’s it, you made it till the end! This tutorial is intended as a basic starting point for your app, from here on it should be fairly straight-forward to enhance it to your liking.

In case you have any questions, feel free to leave a comment below or send me a message on Twitter!

Happy coding! 
Cheers, Beeman ✌🏼🐝

Need help?

Need support for your Angular, Ionic, Firebase, NodeJS or TypeScript project? Looking for long-term mentorship? Feel free to book a 1-on-1 session with me on CodeMentor.

https://www.codementor.io/beeman