WgBoard
Colors. Supported classes
  • .btn-primary
  • .btn-secondary
  • .btn-default
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
Square | Circle

You can use circle|square buttons (icon buttons).

Classes .btn-circle | .btn-square

Custom Styles

You can use the following class combinations:

  • .btn-link
  • .btn-link.btn-link-light
  • .btn-link.btn-link-text

Use class .btn-link-underline to emphasize a button while hovering.

Sizes

Use .btn-lg, .btn-sm, .btn-xs for fast change button size.

.btn-block will make your button full-width unit.

Button groups

Wrap a series of buttons into groups.

Button groups

Wrap a series of buttons with .btn in .btn-group.

Toolbars

Combine sets of .btn-group into a .btn-toolbar for more complex components.

Vertical orientation

Make a set of buttons appear vertically stacked rather than horizontally (.btn-group-vertical).

Button groups sizes

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including when nesting multiple groups.

Justify button group

You can use btn-group-justified class.

Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.