Bootstrap Material Design for Angular

AngularJS directives for creating material design style bootstrap components

Getting Started

This project is an AngularJS version of the aswesome bootstrap material design. It removes the dependency on jQuery as well as Bootstrap's JavaScript and makes it easy to work with dynamic angularJS components


How to install:

To install via bower, run

bower install abm

or grab the latest source from Github and include it in your project after the dependencies. Include angularBootstrapMaterial module in your application:

angular.module('app', ['angularBootstrapMaterial']);

CSS Related Stuff:

This project doesn't do any CSS magic, all that comes from Bootstrap material design.

For demos and documentation of typography, tables, icons etc refer the Bootstrap material design documentation.

Form controls


Create a material design input by adding abmFormControl directive to an input element and wrapping it in abmFormGroup directive.

If the input is accompanied by a label, it should contain abmLabel directive. The behaviour of label can be controlled by adding a type attribute whos value can be either "floating" or "static"(default)

Control the size of the component by adding the classes "form-group-sm" or "form-group-lg" on the abmFormGroup directive.


Creating a material design textarea the same as creating an input, except that abmFormControl directive should be added to a textarea element.


Create a material design checkbox by adding abmCheckbox directive to the checkbox input's wrapper. Add a label property on it to specify it's label

Create a checkbox group by simply wrapping the checkboxes in a abmFormGroup directive


Creating a material design radio or radio group is similar to creating a checkbox or checkbox group, except that abmRadio directive needs to be added to the radio input's wrapper.


A simple select does not need any special direcitves. However if it accompanied by a label, or has validation message applied which needs to be highlighted similar to other controls, it should have abmFormControl directive and should be wrapping in abmFormGroup directive.

Form Validation


For using bootstrap's JavaScript components, include UI Bootstrap in your project and follow the instructions in it's documentation


To apply the material style ripple effect, add the abmComponent directive as shown in the below examples.


For more visit Bootstrap material design documentation for buttons







Toggle Button

Create a material design toggle button by adding abmtoggle directive to the checkbox input's wrapper. Add a label property on it to specify it's label