Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create 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.

Let's get started!

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

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:

> cd mdbs

Next, we will install a few packages:

> npm i --save angular-bootstrap-md chart.js@2.5.0 font-awesome hammerjs
  • angular-bootstrap-md is the package from MdBootstrap for Angular
  • chart.js is a charting library that MdBootstrap uses for charts
  • font-awesome is for icons MdBootstrap uses
  • hammerjs enables touch for certain elements on mobile devices

Open up your code editor and modify the /src/app/app.module.ts file to the following:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
  • NO_ERRORS_SCHEMA tells the compiler to not error based on unknown elements, which are used by MdBootstrap

Then, in the @NgModule we add:

  imports: [
    BrowserModule,
    MDBBootstrapModule.forRoot()
  ],
  schemas: [ NO_ERRORS_SCHEMA ],

Next, open up /angular-cli.json and modify the styles and scripts properties:

"styles": [
  "../node_modules/font-awesome/scss/font-awesome.scss",
  "../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
  "../node_modules/angular-bootstrap-md/scss/mdb-free.scss",
  "styles.scss"
],
"scripts": [
  "../node_modules/chart.js/dist/Chart.js",
  "../node_modules/hammerjs/hammer.min.js"
],

This imports a few of the required sass files and also necessary JavaScript files for MdBootstrap to work properly.

The last step requires opening up /tsconfig.json and adding a single line as shown:

{
  "compileOnSave": // removed for brevity,
  "compilerOptions": {
    // removed for brevity
  },
  "include": ["node_modules/angular-bootstrap-md/**/*.ts",  "src/**/*.ts"] // add this line
}

Now, in the console, run:

> ng serve --open

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.

If you want to know more about Bootstrap 4 though, I did just release a Free Bootstrap 4 Crash Course.

Let's say you want a quick navigation, visit the Layouts > Navigation section in the Documentation and you will see a bunch of HTML code with associated examples.

Copy and paste the first one into /src/app/app.component.html (replace the existing HTML):

<mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark bg-pink scrolling-navbar" [containerInside]="false">
  <logo>
      <a class="logo navbar-brand" href="#"><strong>Navbar</strong></a>
  </logo>
  <links>
      <ul class="navbar-nav mr-auto">
          <li class="nav-item active waves-light" mdbRippleRadius>
              <a class="nav-link">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item waves-light" mdbRippleRadius>
              <a class="nav-link">Features</a>
          </li>
          <li class="nav-item waves-light" mdbRippleRadius>
              <a class="nav-link">Pricing</a>
          </li>
          <li class="nav-item waves-light" mdbRippleRadius>
              <a class="nav-link">Opinions</a>
          </li>
      </ul>
      <ul class="navbar-nav nav-flex-icons">
          <li class="nav-item waves-light" mdbRippleRadius>
              <a class="nav-link"><i class="fa fa-facebook"></i></a>
          </li>
          <li class="nav-item waves-light" mdbRippleRadius>
              <a class="nav-link"><i class="fa fa-twitter"></i></a>
          </li>
          <li class="nav-item waves-light" mdbRippleRadius>
              <a class="nav-link"><i class="fa fa-instagram"></i></a>
          </li>
      </ul>
  </links>
</mdb-navbar>
<!-- Main -->
<main>
  <div class="container" style="height:1300px;">
      
  </div>
</main>

This is the result after saving:

Also, try shrinking the width of the browser to simulate a mobile viewport; you will notice it's also responsive!

Let's say we want to use a different color instead of pink. MdBootstrap has a Colors section that provides you with a list of the possible colors you can use.

Let's say we want to use blue instead. Simply change the first line of the code above from:

<!-- From -->
bg-pink

<!-- To -->
bg-blue

While we're here, let's also remove the fixed-top class.

Let's also say we also want the navigation to be confined within a fixed centered navigation. On the same line, adjust:

<!-- From -->
[containerInside]="false"

<!-- To -->
[containerInside]="true"

The result:

As you're probably starting to realize, all of this is highly customizable. You can make many, many more adjustments to the navigation if you know your way around Bootstrap 4.

Let's continue experimenting with other elements.

MdBootstrap Sections

MdBootstrap features a variety of elements that are considered sections. One such section is the Features section.

If you browse around on this page, you will find a variety of different layout options to showcase features of your app, product or service.

Let's use the Features v.3 example HTML and paste it between the .container class div:

<!--Section: Features v.3-->
<section class="section feature-box">

    <!--Section heading-->
    <h1 class="section-heading pt-4">Why is it so great?</h1>
    <!--Section description-->
    <p class="section-description lead grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

    <!--Grid row-->
    <div class="row features-small pt-2">

        <!--Grid column-->
        <div class="col-lg-5 mb-r center-on-small-only">
            <img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/ipad-portfolio2.png" alt="" class="img-fluid z-depth-0">
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-7">

            <!--Grid row-->
            <div class="row pb-3">
                <div class="col-2 col-md-1">
                    <i class="fa fa-bank blue-text"></i>
                </div>
                <div class="col-10">
                    <h5 class="feature-title">Safety</h5>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
            </div>
            <!--Grid row-->

            <!--Grid row-->
            <div class="row pb-3">
                <div class="col-2 col-md-1">
                    <i class="fa fa-code blue-text"></i>
                </div>
                <div class="col-10">
                    <h5 class="feature-title">Technology</h5>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
            </div>
            <!--Grid row-->

            <!--Grid row-->
            <div class="row pb-3">
                <div class="col-2 col-md-1">
                    <i class="fa fa-money blue-text"></i>
                </div>
                <div class="col-10">
                    <h5 class="feature-title">Finance</h5>
                    <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.</p>
                </div>
            </div>
            <!--Grid row-->

        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

</section>
<!--Section: Features v.3-->

The result:

While this looks good, what if we wanted to add some margin or padding to separate our elements a bit more?

This is where it helps to understand a little Bootstrap 4, as they provide you with easy to use classes for both margin and padding.

We will simply add the pt-5 class to a couple elements:

<!--Section: Features v.3-->
<section class="section feature-box pt-5">

...and a few lines down:

<!--Grid row-->
<div class="row features-small pt-5">

The result:

Much better. As you can see, it's easy to make adjustments.

MdBootstrap Animation

Let's say that we want the tablet graphic to animate in some unique manner. MdBootstrap has an Animation section that provides you with predefined animation classes.

Let's add the animated bounce classes onto the image:

<img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/ipad-portfolio2.png" alt="" class="img-fluid z-depth-0 animated bounce">

Now, if you refresh the browser, you will see that it animates. Easy!

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:

h4 {
    font-weight: bold;
    margin-top: 15px;
}

.btn-floating {
    padding: 5px 10px;
    background: #fff;
    margin: 10px 3px;
}

Now, the result should look like the following:

 

Conclusion

Hopefully, you found some use out of this tutorial and you're excited to start working with Angular 5, Bootstrap 4 and Material Design!

See you next time!


Share this post




Say something about this awesome post!