For options to give buttons the "ink effect" on click, see the Waves page

Raised button

Element with the class btn.
The first button has the class theme. The second one has the class theme-inverse.
Change the theme inSettings to see the effect.

Flat button

Element with the class btn-flat

Circular button

Element with the class btn-circle

Fixed floating action button

Add a fixed floating action button to the bottom corner of your page. You can also add multiple action buttons to it, that will appear on hovering over.

Click only FAB

If you want to disable the hover behaviour, and instead toggle the FAB menu when the user clicks on the large button (works great on mobile!), just add the class click-to-toggle to the FAB.

The demo button is in the bottom right corner of this the page.

Block button

Add the class btn-block to your button.

Button with icon

Add class left or right to the icon element.
Use class text-theme-accent or a text-* (*= a color name) on the icon element to give the icon a different color.

Animated buttons

Animated buttons show a icon or text on hover. The slide in can come from four directions.

Circular Rotate Button

To let the icon rotate on hover add the class rotate to the icon element

Button colors

To style the buttons you can use class theme, theme-inverse or theme-accent to give it the selected theme color.
Or add a color name from the color pallete as a class to the button to give a button a different color. These are just the base colors. You can also use the accent colors.

Button sizes

Next to the default button size, you can also use btn-sm or btn-lg.

Button circle sizes

The circular button can also be a large size btn-lg.

Dropdown Buttons

When a dropdown menu comes from an icon or circular button you can use the class top-left, or top-right for right alignt elements.

Button groups

Group a series of buttons together in an element with the class btn-group.

Checkbox and radio buttons

Group a series of buttons together in an element with the class btn-group.

Button groups sizes

For sizing your button group add the class btn-group-sm or btn-group-lg to the btn-group element.

Button groups justified

Add class btn-group-justified to give the button group full width to its parent element.

Badge option

Highlight new or unread items by adding a badge.
Add class badge to a element.
Style the badge by adding a color name.
On empty the badge will be hidden.

  • Default badge (theme color) 1
  • Badge with class theme-accent 14
  • Badge with class new 14
  • Click me!

Callout is a colored border. That can be added to emphasize an item.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Porta ac consectetur ac
  • Vestibulum at eros

The callout can be placed on the top, right, bottom, or on the left side an element.
Use the classes callout-top, callout-right, callout-bottom and callout-left

  • .callout-top.green
  • .callout-right.amber
  • .callout-left.pink
  • .callout-bottom.blue

There are four type of alerts

Heads up! This alert needs your attention, but it's not super important.

Well done! You successfully read this important alert message.

Warning! Best check your self, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

Checkbox switch
Radio switches

Support up to 6 switches.
Style the selector by adding the class btn or btn-flat.
To style the selector you can use class theme and theme-accent or use a color name as a class e.g. green.

Floating selector
Flat selector
Supports up to 6 switches
Default progress

The default progress bar will have the theme color.

70% complete
Circular progressbar

A jQuery Plugin to make circular progressbars. You will have to manually link to the progressbar.js file.For all the options see the documentation.


To style the progress bar you can add the class theme-accent or any of the color names from the color palette.

Large progress

Add class progress-large.
Large progress bars can be used with text inside.

70% complete
Stacked progress

Stack multiple progress-bar inside the progress element.

40% Desktop
33% Tablet
27% Phone

A progress with a indeterminate element. It can be styled the same way as the progress bars. By default it has the theme color.


Add data-toggle="tooltip" to initialize the tooltip. Put the tooltip content in the title="content in here" attribute.

Tooltips can be displayed in four directions. Use the data-placement=" " attribute.
e.g. data-placement="bottom"


Add data-toggle="popover" to initialize the popover. Put the popover content in the data-content ="content in here attribute.

Popovers can be displayed in four directions. Use the data-placement=" " attribute.
e.g. data-placement="bottom"

Popover on click

Use the data-trigger="focus"

Popover on hover

Use the data-trigger="hover"

Popover title

Popovers can also have a title.
Use the title=" " attribute. for the title text.
e.g. title="This is a title"

© 2016 YourApp