Color variations using Bootstrap Material Designl

Last update on August 19 2022 21:51:33 (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 develoment 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 the zip file containng 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. Following color palette shows what aret he colors you may add.

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 adding 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>