Variations using Bootstrap Material Design

Last update on August 19 2022 21:50:44 (UTC/GMT +8 hours)

Introduction

Material Design is a project from Google which promises to bring new potentialities to your design under the aegis of cutting edge technologies.

Material Design has been brought to the most popular web development framework Twitter Bootstrap also. You may add variations to inout, buttons, and icons using Bootstrap Material Design.

Install

You can install Bootstrap Material Design using either Bower or using Gems.

If you are using Bower, you have to run following command

bower install bootstrap-material-design --save

For Gems use following

gem install bootstrap-material-design

Else, you may download the zip file containing the project from "https://github.com/FezVrasta/bootstrap-material-design/archive/master.zip". You need to include material.min file present within dist/css folder and material.min file present within dist/js folder available within "bootstrap-material-design-master" folder which you obtain on unzipping the zip file downloaded from the link given.

Add color variations to buttons

You may add 17 color variations to Botstrap Buttons. For that, you need to add "btn-material-color", where color points to 17 different colors.

Here is an example showing how to add "LIGHT GREEN" color to a button.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color variations in buttons using Bootstrap Material Design Example</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-material-design-master/dist/css/material.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <button class="btn btn-material-lightgreen">Light Green button</button>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="bootstrap-material-design-master/dist/js/material.min.js"></script>
  </body>
</html>

Live Demo

Add and remove shadows to buttons

By adding ".btn-flat" class to your buttons, you may look them flat. Want shadows? just add ".btn-raised" class.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add and remove shadows to buttons using Bootstrap Material Design Example</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
   <link rel="stylesheet" href="bootstrap-material-design-master/dist/css/material.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <button class="btn btn-material-deeppurple btn-flat">Button without shadow</button>
    <button class="btn btn-material-deeppurple btn-raised">Button with shadow</button>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
     <script src="bootstrap-material-design-master/dist/js/material.min.js"></script>
  </body>
</html>

Live Demo

Working with form inputs

You may add ".floating-label" class to an input field and add a placeholder to it will transform the placeholder in a floating label.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <titleWorking with inputs using Bootstrap Material Design Example</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
   <link rel="stylesheet" href="bootstrap-material-design-master/dist/css/material.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <input type="text" class="floating-label" placeholder="Enter Your Name">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
     <script src="bootstrap-material-design-master/dist/js/material.min.js"></script>
  </body>
</html>

Live Demo

Working with icons

Bootstrap material design has got 490 original Material Design icons. If you are familiar using any other fotn icon project, it is similar to those.

An usage may look like following

<i class="icon icon-material-favorite"></i>

Previous: Twitter Bootstrap with Less css
Next: Twitter Bootstrap Modals Tutorial