john.doe

# UI Elements > Buttons

- ##### My Income $47,171

  1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471

- ##### Site Traffic 45%

  110,150,300,130,400,240,220,310,220,300, 270, 210

- ##### Site Orders 2447

  110,150,300,130,400,240,220,310,220,300, 270, 210

## Buttons at a glance

# Buttons at a glance...

See how aspects of the Bootstrap button system look and feel like at a glance.

Button | btn-lg Button | Small Button | Small Mini | Disabled Button | Button with Icon | Split Button
--- | --- | --- | --- | --- | --- | ---
Default | Default | Default | Default | Default | Default | Default
Primary | Primary | Primary | Primary | Primary | Primary | Primary
Info | Info | Info | Info | Info | Info | Info
Success | Success | Success | Success | Success | Success | Success
Warning | Warning | Warning | Warning | Warning | Warning | Warning
Danger | Danger | Danger | Danger | Danger | Danger | Danger

## Basic Buttons

The icons below are the most basic ones, without any icons or additional css applied to it

Buttons come in 6 different default color sets `.btn .btn-*` `.btn-default, .btn-primary, .btn-success... etc`

Default Primary Success Info Warning Danger Disabled Link

## Button Sizes

Large buttons to attract call to action `.btn .btn-lg`

Large button Large button

The Default button `.btn .btn-default`

Default button Default button

Small button for elegance `.btn .btn-sm`

Small button Small button

Extra small button for added info `.btn .btn-xs`

Mini button Mini button

## Circle Buttons

Extra Large round buttons `.btn-circle .btn-xl`

Large round buttons `.btn-circle .btn-lg`

Default round buttons `.btn-circle`

## Drop Down buttons

Button group with dropup/dropdown toggle `.btn-group`

Default button dropdowns `.dropdown-toggle`

Smaller button dropdowns `.btn-sm .dropdown-toggle`

Extra small button dropdowns `.btn-xs .dropdown-toggle`

### Multiple Level Dropdown New!

Custom created Multiple Level dropdown that works with ease! Simply use the class `.dropdown-menu .multi-level`

Multi Level

## Button Groups

Group a series of buttons together on a single line with the button group. Wrap a series of buttons with `.btn` in `.btn-group` .

Horizontal Group | With Icons | Multiple Button Groups
--- | --- | ---

Make a set of buttons appear vertically stacked rather than horizontally by putting it in `.btn-group-vertical` .

Vertical Group | With Dropdown | With Icons | Multiple Button Groups
--- | --- | --- | ---

## Mix and match colors

Custom buttons with core CSS elements. Mix and match existing classes to come up with unique style buttons. For example: `.btn .bg-color-blueLight .txt-color-white`

- .bg-color-blueLight
- .bg-color-blue
- .bg-color-teal
- .bg-color-blueDark
- .bg-color-green
- .bg-color-greenDark
- .bg-color-greenLight
- .bg-color-purple
- .bg-color-magenta
- .bg-color-pink
- .bg-color-pinkDark
- .bg-color-yellow
- .bg-color-orange
- .bg-color-red
- .bg-color-redLight
- .btn-default

## Mix and match colors

Custom text colors can also be applied For example: `.txt-color-red`

Mix and match color with backgrounds `.btn .bg-color-blueLight .txt-color-magenta`

## Button with icons

Default buttons have a single line of text with or without one or two icons aligned left or right.

- Icon Left
- Both Sides
- Icon Right

- Icon Left
- Both Sides
- Icon Right

## Label Buttons

- Success
- Cancel
- Bookmark
- Camera
- Left
- Right
- Thumbs Up
- Thumbs Down
- Refresh
- Trash
- Info Web

    <button type="button" class="btn btn-labeled btn-success">
     <span class="btn-label">
      <i class="glyphicon glyphicon-ok"></i>
     </>Success
    </button>

## Block Buttons

Block buttons `.btn .btn-block`

Block group buttons `.btn-group .btn-group-justified`

Left Middle Right

- Mail 14
- Calendar
- Maps
- Invoice 99
- Gallery
- My Profile