Before we proceed to know how to work in MDB, we must know what is MDB i.e Material Design for Bootstrap, or in short, sometimes it is just called Material Design Bootstrap.
It is a Bootstrap overlay, which provides a marvelous appearance consistent with the standards of Material Design by Google. You may say that it is a theme for Bootstrap which allows you to use the Google Material Design for the best output in your most loved front-end framework.
The term overlay that we used above simply refers to MATERIAL DESIGN for BOOTSTRAP.
Let’s know what actually Material Design for Bootstrap is?
There is a very famous designing standard that was developed by Google which has a good reputation amongst web designers and developers. Google coined a term for it which is known as Google Material Design.
Bootstrap was developed by Twitter.
Now both of these were having their own advantages for front-end web development and designing.
So, Material Design for Bootstrap took features from both of these and combined them with new features and components resulting in a separate framework.
Why use Material Design Bootstrap(MDB)?
- Free-to-use features
- Contains 400+ UI components.
- 600+ useful icons.
- Highly responsive
- 700+ CSS animations.
- Provides plenty of useful templates.
- Easy to install.
- Cross-browser compatibility.
- Easy to use and customize.
Now that you have got to know so many advantages of MDB, so let’s proceed to learn how actually we can use MDB.
How to use MDB?
The first step, to start with Material Design for Bootstrap(MDB), just visit the official website and go to the download link.
The download link is given below.
Although you will get links to proceed with GitHub, for ease of understanding, we will go with “DIRECT DOWNLOAD” link.
Just click the ‘DIRECT DOWNLOAD’ link.
Now after downloading is complete, you will get to see a zipped folder. Simply unzip it to your desired location and hence you will have your MDB starting contents inside it.
Now, we will explore a little bit of the downloaded folder. The downloaded folder is actually the structure in which essential libraries, files, and info-based documents will be there.
This folder consists of the files which define the styles and lookups of the pages that we design in our project. In this folder, you would find the following files:
- bootstrap.css: This is the file that includes the predefined classes of bootstrap (which we discussed at the starting of this article).
- bootstrap.min.css: This file is also the same as the above file but it is the minified version of it (it means all the styling code will not have spaces and extra lines. It takes lesser space in memory with the same functionality as the bootstrap.css file).
- mdb.css: It is the file that includes the predefined classes and the design patterns of the MDB.
- mdb.min.css: This is the file that is similar to mdb.css but it is the minified version of it.
- style.css: This is the file that helps you to put your own customized styling code that is required in the project.
- bootstrap.js: This file will include the bootstrap-related js into the project.
- bootstrap.min.js: This file is the same as above but it is the minified version of it that takes less space in memory.
- jquery-2.2.3.js: This file will include the compatible version of the jquery code that you need in your code (the version here may be the latest one. Here we have 2.3).
- jquery-2.3.3.min.js: This file is similar to the above file but it is the minified version of it.
- mdb.min.js: This file is same as the above file but it is also the minified form of that file.
- tether.min.js: It is same as the above file but is the minified version of it.
This folder is mainly for the fonts that we need to include in the project. The default font that is provided with the download is Roboto. The basic font formats that it includes are:
- .ttf: TRUE TYPE FONT (developed by Apple and Microsoft)
- .otf: OPEN TYPE FONT (the result of a joint effort between Adobe and Microsoft)
- .woff: WEB OPEN FONT FORMAT (the result of collaboration by the Mozilla Foundation, Microsoft, and Opera Software.)
- .woff2: WEB OPEN FONT FORMAT 2.0 (second version of woff)
- .eot: EMBEDDED OPEN TYPE (designed by Microsoft to be the fonts used on the web.)
This is the folder where you will keep your images that you need in your project.
- This folder is needed for keeping all the images in a well-arranged way.
- In your index file, this folder’s path will be needed to refer to the images that you want to show on the web pages.
- NOTE: This is the default image folder that comes along with the MDB. You may change your location as per the needs and preferences of the project.
This is the folder that contains the most modular and maintainable CSS which is adaptive and shareable in every environment. Sass is used to giving the output in a very powerful manner. This provides more productivity.
We generally use simple CSS instead of sass but this folder is there to help you to make styling work in an advanced way if you really want to implement it.
This is the file that contains the information regarding the product use and the license. This file tells the features that you will get under free and pro versions of the MDB (Material Design for Bootstrap).
The image below shows some part of it:
This is another important file that you will get inside the downloaded MDB (Material Design for Bootstrap) folder.
It includes information regarding the essential links that may be important for you to consider. This file includes the FAQs, support, tutorials, templates, and many other links that are useful to learn, practice, raise queries and do some other relevant stuff in Material Design for Bootstrap community.
Now that we have learned a lot regarding the files and folders or we can say the folder structure of the MDB (Material Design Bootstrap), it is time to know how actually we can include them in our project.
Let us make a folder for our demo project naming it
Now, cut everything inside the downloaded MDB folder (generally it has a name of MDB Free after extracting the downloaded folder) and paste them inside the
demoMDB folder that we just created.
Now there must be a file with the name
demoMDB folder, which is nothing but a demo page.
Now that we have everything inside our
demoMDB folder and every file is present inside it and we have a demo page known as
index.html, so we need to tell
index.html file from where to include the important files.
index.html file will look like the below code:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<link href="css/mdbStyle.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<!—actual body content code goes here -->
<!-- SCRIPTS -->
<!-- JQuery -->
<!-- Bootstrap tooltips -->
The thing here that must be kept in mind is the sequence of the files in which they are included.
It is very important to follow the order because higher in the order means that the file has dependencies needed by the next listed file, and if we change the order, then there may be some unwanted errors and warnings that can come up in the console and can block any major functionality that was needed.
Material Design for Bootstrap(MDB) has all the essential components that can make a website very attractive and good-looking.
It has buttons, tags, navbars, models, cards, date-pickers, and many other features that are fully organized and compatible with the properties of bootstrap and other major libraries.
Let us make a very basic example with the features of material design for bootstrap(MDB):
In place of
<!—actual body content code goes here –>
just replace with the below code in
<div class="container text-center mainButtonDiv">
<h1 class="text-center maintainSpaces inputHeader">BASIC BUTTONS USED IN MDB</h1>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-default">Default</button>
<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary">Secondary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<div class="inputTute z-depth-4 hoverable">
<h1 class="inputHeader">INPUT FIELD EXAMPLES </h1>
<h3> BASICS INPUT FIELD </h3>
<input type="text" id="form1" class="form-control">
<label for="form1" class="prefilled">Example label</label>
<h3> SMALL INPUT </h3>
<div class="md-form form-sm">
<input type="text" id="form2" class="form-control">
<label for="form2" class="prefilled">Example label</label>
<h3> ICON PREFIXES </h3>
<input type="text" id="form3" class="form-control">
<label for="form3" class="prefilled">Example label</label>
<h3> PLACEHOLDER </h3>
<input placeholder="Placeholder" type="text" id="form4" class="form-control">
<label for="form4" class="prefilled">Example label</label>
<h3> PREFILLED INPUT FIELD </h3>
<div class="md-form prefilled">
<input value="Habilelabs Pvt. Ltd." type="text" id="form5" class="form-control">
<label class="active prefilled" for="form5">Example label</label>
<h3> MESSAGES OF ERROR AND SUCCESS </h3>
<input type="email" id="form6" class="form-control validate">
<label for="form6" data-error="wrong" data-success="right" class="prefilled">Type your email</label>
<input type="password" id="form7" class="form-control validate">
<label for="form7" data-error="wrong" data-success="right" class="prefilled">Type your password</label>
<h3> DISABLED INPUT </h3>
<input type="text" id="form8" class="form-control" disabled>
<label for="form8" class="disabled prefilled">Example label</label>
After doing this, there is some sort of CSS needed to give example a better look. So, include the following in
/* YOUR CUSTOM STYLES */
margin: 40px auto;
-moz-transition:background-color 1.5s ease;
-webkit-transition:background-color 1.5s ease;
transition:background-color 1.5s ease;
Once all this is done, you will get the following look in the web browser for the same page that we have written code for.
That was a very basic example for just a feel of material design for bootstrap(MDB). Know HTML and CSS guidelines for front-end development.
MDB has many more features to be explored. You may consider going to the official website for more examples and tutorials.
I hope, this may have given you the basic idea of what Material Design for Bootstrap is and how it is used in any project.
Many of the big companies are now making their best components using MDB, so it must have given you the curiosity to use it in your project as well.
We will explain MDB components in upcoming blogs. Share your views in the comment, what components you want to discuss.