Variations using Bootstrap Material Design
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>
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>
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>
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
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics