Create your account

Material Design Bootstrap 4 and Angular 5 Tutorial - MdBootstrap

By Gary simon - Jan 31, 2018

With Bootstrap 4.0 just releasing, I thought it would be worth taking a look at how to integrate it into an Angular 5 app. MdBootstrap.com offers a package built specifically for Angular 5 that allows you to use Bootstrap 4 along with Material Design for the frontend of your app.

I'm going to walk you through exactly how to get up and running with this setup, along with how to start creating layouts based on the MdBootstrap documentation.

If you prefer watching a video..

Starting the Project

You can either clone the MdBootstrap github, or integrate it custom with the help of npm. We're going to go the npm route, simply because it will help you better understand what's being altered within Angular to integrate MdBootstrap.

As always, being that we're going to use npm to install some packages, you're going to need Nodejs. If you don't have it, visit Nodejs.org and download the appropriate installer. Then, load up your console or command line.

You're going to need the Angular CLI to start a new Angular project, and if you don't have it already, install it by typing:

> npm install -g @angular/cli

Then, we're going to use it to create a new project:

> ng new mdbs --style=scss

This creates a new Angular project called mdbs and we're telling it that we want to use the Sass preprocessor. Next, hop into the new folder:

This will open up a browser and show you the default Angular starter template, and it should look like this:

If you're familiar with this starter template, you will notice that the type is different. This means that MdBootstrap is now working!

Integrating a Bootstrap Navigation

Because we're dealing with 3 different technologies (Bootstrap 4, Material Design & Angular 5), I will not be covering each in much detail with this tutorial. Instead, I'm going to pick out a few pieces of the MdBootstrap Angular Documentation to help you get a quick feel for how you can use the documentation to build a layout based on your needs.

Adding a Final Section

Just for a little more muscle memory, let's add a Team section to the layout. Copy and paste the Team v.2 HTML underneath the closing </section> element in our HTML. Remove the <h2> and <p> elemnts near the top.

The result should look like:

Notice how it doesn't look quite as good as in the actual documentation? That's because this is a pro component, as is the features section above this element.

This means if you don't pay for MdBootstrap Angular Pro, you will need to make custom CSS adjustments yourself to make these elements look better.

For instance, if we wanted to make the social media icons look better along with their names, we could use the Chrome Inspector (CTRL-SHIFT-I), find a common class they share, and modify it within our /src/app/app.component.scss file: