Buttons View all kinds of Buttons examples below.

Buttons

Using the Bratilius Framework you can create all kind of button elements.

Basic

To create this element, with default color styling, you need to add the .btn and .label-default CSS class to any <a>, <input> or <button> element.

Disabled states

You can disable a button element by adding either the .disabled CSS helper class or the disabled parameter.

Active states

To make a button element active you need to add the .active CSS helper class.

Sizes

To change the button elements sizes you need to add one of the following CSS helper classes .label-xs, .label-sm, .label-lg.

Background colors

You can use the color helper CSS classes to add different background to the button element.

Theme inherited

The .label-default and .label-primary colors can be inherited from a theme color scheme you select. These colors are usually used through out the app to style different kinds of widgets, components and elements.

Result	Helper class	Description
Primary	.label-primary	This is the primary background color.
Default	.label-default	This is the default background color.

Framework inherited

The color helper classes below come packed with the Bratilius Framework.

Result	Helper class	Description
Success	.label-success	Used for success actions.
Danger	.label-danger	Used for error actions.
Warning	.label-warning	Used for warning actions.
Info	.label-info	Used for information actions.

Additional colors

These helper classes also come packed with the Bratilius Framework.

Result	Helper class	Description
Blue alternate	.label-blue-alt	Alternate blue background.
Yellow	.label-yellow	Yellow background.
Purple	.label-purple	Purple background.
Azure	.label-azure	Azure background.
Black	.label-black	Black background.
black	.label-black	black background.
black alternate	.label-black-alt	black alternate background.

Link buttons

To create a button element that looks like a link you need to add the .label-link CSS helper class. To change its color add one of the following font color CSS helper classes.

Result	Helper class	Description
Default	.label-link	Used for buttons that look like regular links, without a background color or border.
Blue	.font-blue	Creates a blue link button.
Alternate blue	.font-blue-alt	Creates an alternate blue link button.
Red	.font-red	Creates a red link button.
Orange	.font-orange	Creates a orange link button.
Green	.font-green	Creates a green link button.
black	.font-black	Creates a black link button.
Alternate black	.font-black-alt	Creates an alternate black link button.
Purple	.font-purple	Creates a purple link button.
Azure	.font-azure	Creates a azure link button.
Black	.font-black	Creates a black link button.
White	.font-white	Creates a white link button.

Full width

To change the button elements to full width (block level) you have to add the .label-block CSS helper class.

Button groups

To create button groups you need to wrap buttons inside a <div> with .label-group CSS helper class.

Sizing

To change the button groups sizes you need to add one of the following CSS helper classes to the .label-group, .label-group-xs, .label-group-sm, .label-group-lg.

Toolbars

Button toolbars consist of multiple .label-group elements wrapped inside a <div> with .label-toolbar CSS helper class.

Nesting horizontal

By placing a .label-group within another .label-group you can create dropdown menus mixed with a series of buttons.

Nesting vertical

To create vertically nestes button groups you need to wrap the .label-group elements within a wrapper with .label-group-vertical CSS helper class.

Justified groups

To make a group of buttons stretch at equal sizes to span the entire width of its parent, you need to add .label-group-justified to the .label-group element. Also works with button dropdowns within the button group.

Button dropdowns

Use any button to trigger a dropdown menu by placing it within a .label-group and providing the proper menu markup.

Split button dropdowns

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

Sizing

To change the button dropdowns sizes you need to add one of the following CSS helper classes .label-xs, .label-sm, .label-lg.

Button dropups

Button dropups are just like regular dropdowns, only they open at the top rather than the bottom. To create a button dropup you need to add the .dropup CSS helper class to the button parent container.

Toggle buttons

To create single toggle buttons you need to add the data-toggle="button" parameter to a button element.

Radio toggles

To create radio toggle buttons groups you need to add the data-toggle="buttons" to a .label-group that wraps the button elements.

Checkbox toggles

To create radio toggle buttons groups you need to add the data-toggle="buttons" to a .label-group that wraps the button elements.

Loading buttons

Loading buttons display a custom message when clicked to indicate a background action. You can set the 'loading' message using the data-loading-text="Custom loading text here..." button parameter.

Social buttons

We created special styles for Twitter, Facebook, Google+ social media buttons.

Dashboard buttons

Dashboard buttons are vertical buttons wrapped in a div with the .dashboard-buttons CSS class.To create vertical button you need to add the .vertical-button CSS helper class to any .btn element.

Dashboard buttons alternate

Just like regular dashboard buttons, but with different color styling.

Pagination

To create a pagination element you need to add the .pagination CSS helper class to an <ul> list.

Active and disabled states

You can use the .disabled CSS helper class for unclickable links and .active for current pages.

Sizing

To change the pagination element size you need to use .pagination-sm or .pagination-lg.

Pager

You can use the pager to create simple next/previous navigation menus.

Alignments

You can align each link to the sides.

Disabled state

By adding .disabled to a pagination item you can make it look unclickable, disabled.