Web Development: Using Bootstrap to Create Material Design Web Apps

Using Bootstrap to Create Material Design Web Apps

Google's Material Design is ubiquitous in modern mobile apps. Perhaps it's because most people today have come to love its bold colors, subtle shadows, and minimalist layouts. Wouldn't it be great if you could easily apply the same design language to your websites and offer visitors a user experience they're are well accustomed to? Well, with MDBootstrap, you can.

MDBootstrap, also known as Material Design for Bootstrap 4, is an opensource UI kit that allows you to use Bootstrap 4, a CSS framework you might already be familiar with, to create fully responsive websites that have a Material Design look and feel. It comes with over 500 components, dozens of animations, and support for several JavaScript frameworks, including jQuery, Vue, and React.

In this step-by-step tutorial, I'll show you how to add the MDBootstrap UI kit to your web projects and use some of its components.

Or, if you want to get started right away with a professional Bootstrap theme, check out some of our ready-to-go templates.

1. Setup

MDBootstrap is available on cdnjs, and several other CDNs. Therefore, you don't need to download it to your computer to be able to use it. But adding it to a web page—along with all its dependencies—does only take a few minutes.

Start by creating a new HTML document and opening it using your favorite text editor. Then add the following HTML5 boilerplate code to it:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Page</title>
  </head>
  <body>
  
  </body>
</html>

The MDBootstrap UI kit consists of just two minified files: mdb.min.css and mdb.min.js. It does, however, depend on Bootstrap, jQuery, and Font Awesome to provide several features.

So, inside the head tag of the HTML5 document, add the following link tags:

<link rel="stylesheet"
   href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/css/mdb.min.css">

Next, towards the end of the body of the document, add the following script tags:

<script type="text/javascript" 
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">    
</script>
<script type="text/javascript" 
    src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js">    
</script>
<script type="text/javascript" 
    src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/js/mdb.min.js">    
</script>

At this point, the web page is ready to display Material Design components.

2. Creating a Header

The first component of a Material Design web page is usually a header. It acts as a container for the navigation bar, in which you can not only display your company's logo and name, but also add links to other important pages of your website. In the Material Design spec, the navigation bar is often referred to as the top app bar.

To create a header, all you need to do is use the header tag. Creating a navigation bar, however, is a little more involved.

First, you must create a nav tag and assign the navbar class to it. This creates a basic navigation bar with a white background. If you want to give it a color from the Material palette, you can use one of the many color classes available. They have intuitive names such as purple, red, and blue-grey.

Inside the tag, you can then use the navbar-brand class while specifying your company's name or logo.

<header>
    <nav class="navbar purple navbar-dark navbar-expand-md">
       <a class="navbar-brand" href="https://example.com">
        Bob's Store
       </a>
       <!-- More code here-->
    </nav>
</header>

Note that when you're using dark colors for the navigation bar, you should add the navbar-dark class to it to ensure that the text inside is readable.

Including links to other pages of your website is as easy as creating an unordered list having the navbar-nav class, with its items having the nav-item class.

<ul class="navbar-nav ml-auto">
    <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Products</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Offers</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
    </li>
</ul>

In the above code, the ml-auto class pushes the links to the opposite end of the navigation bar.

If you try looking at the web page in a browser now, you should see a header that looks like this:

3. Using the Grid

To add actual content to the web page, you'll want to use the responsive grid system that Bootstrap offers. For the sake of a realistic example, let's add two cards to the page, placed in a single row having two columns.

Start by creating a div element with the container class. It will serve as a container for all the rows and columns we add to this document. Inside it you can create rows and columns using the row and col-md classes. Because all of this is going to be the main content of the page, it's a good idea to wrap it in a main tag.

<main>
    <div class="container">
        <div class="row">
            <div class="col-md">
                
            </div>
            <div class="col-md">
            
            </div>
        </div>
    </div>
</main>

The col-md class ensures that both the columns have the same width and fit inside the row on screens whose width is at least 768 px. To target smaller or larger screens, feel free to experiment with the col-sm and col-lg classes.

You can now create cards inside both the columns using the card class. With MDBootstrap, your cards can have images, titles, buttons, and text. Here's the code for a sample card that has all of them:

<div class="card">

  <img class="card-img-top" src="tomatoes.jpg">
  
  <div class="card-body">
    <h4 class="card-title"><a>Cherry tomatoes to get costlier</a></h4>
    <p class="card-text">With a no-deal Brexit, you're likely to 
    pay 10% more for cherry tomatoes next month.</p>
    <a href="#" class="btn btn-primary">More</a>
  </div>

</div>

Similarly, go ahead and add another card to the page, this time in the second column. For best results, I suggest you use images that have the same dimensions.

<div class="card">

  <img class="card-img-top" src="raw.jpg">
  
  <div class="card-body">
    <h4 class="card-title"><a>Raw fruits and vegetables for breakfast?</a></h4>
    <p class="card-text">Raw fruits and vegetables that have been thinly sliced are great way to start your day.</p>
    <a href="#" class="btn btn-primary">More</a>
  </div>

</div>

As you may have noticed, the kit has intuitively-named classes, such as card-title and card-text, that help you quickly style the contents of your cards. Similarly, the btn and btn-primary classes help you give Material styles to your buttons.

With all the above changes, your web page should look like this:

4. Creating a Form

Material Design forms have a very distinct look and feel. The design language goes into exhaustive detail about what each form element should look like, when it should be used, and where it should be placed.

MDBootstrap has styles for several HTML5 form elements. By using them, you can be sure that your forms conform to most of the guidelines of Material Design.

Let us now create a simple form your visitors can use to sign up for a newsletter. It shall have two text fields, one for a name and one for an email address. Additionally, it shall have a submit button.

The form will need its own row and column, so you must create them first. Because it's alone, the column will stretch to fill the entire row by default. By qualifying the col-md class with a number, and by using the offset-md class, you can control the size and the position of the column in the row.

<div class="row mt-4 mb-4">
    <div class="col-md-8 offset-md-2">
        <!-- more code here -->                                    
    </div>
</div>

In the above code, the mt-4 and mb-4 classes give the row appropriate top and bottom margins.

Inside the column, create another card. It'll serve as a container for the form and all the text associated with it. Optionally, you can use the card-header class to give a header to the the card, and thus the form too.

<div class="card">
    <h4 class="card-header white-text purple">Subscribe to us</h4>                        
    <div class="card-body">
        <!-- more code here -->
    </div>
</div>

To create the form, all you need is the form tag. But you must remember to add the form-control class to each text field you add to the form. If you have a label associated with it, you must also wrap them both inside a div element whose class is md-form. The following code shows you how:

<form>
    <p class="h6 grey-text">Stay updated and get the latest 
        information about all our offers and discounts right
        into your inbox.</p>
        
    <div class="md-form">
        <input type="text" id="fname" class="form-control"/>
        <label for="fname">Your full name</label>
    </div>
    
    <div class="md-form">
        <input type="email" id="email" class="form-control"/>
        <label for="email">Your email address</label>
    </div>
    
    <div class="d-flex justify-content-around">
        <input type="submit" 
            class="btn purple white-text" value="Submit"/>
    </div>
</form>

Here's what the form should look like now:

Conclusion

You now know how to create simple web pages using the Material Design for Bootstrap 4 UI kit. In this introductory tutorial, you learned how to use several important components offered by the kit, such as navigation bars, cards, and form controls. You also learned the basics of positioning the components using Bootstrap 4's grid system.

To know more about MDBootstrap, do refer to the official documentation.

Web Development

Thursday, November 28, 2019