WgBoard
Wg
Summary information
Pending 37%
Approved 60%
Rejected 3%
  1. Home
  2. Buttons

Buttons

Buttons are one of the most integral elements of the page.

Colors. Supported classes
  • .btn-primary
  • .btn-secondary
  • .btn-primary-light
  • .btn-secondary-light
  • .btn-primary-dark
  • .btn-secondary-dark
  • .btn-default
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-light
  • .btn-dark
Outline

Add class .btn-o to get the outlined buttons.

Icon buttons

Use the icons on the buttons.

Add class .btn-circle to get the circle buttons.

Custom styles

Add classes .btn-t and .btn-tc (from transparent/-colored) to get transparent (default) buttons. The difference is only in the color of the text. You can combine .btn-tc with .btn-tc-link.

Sizes

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

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

Block Danger Button
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.

Left Middle Right
Nesting

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