UI components

Button |  | Bootstrap includes six predefined button styles, each serving its own semantic purpose.
Round Buttons |  | Use `.btn-round` class to button for Round Buttons.

Button dropdowns

Turn a button into a dropdown toggle with some basic markup changes.

Basic Button group |  | Group a series of buttons together on a single line with the button group. Wrap a series of buttons with `.btn` in `.btn-group.`
Buttons with Icon |  | Bootstrap includes six predefined button styles, each serving its own semantic purpose.
Icon Button |  | Simple Icon Button
Floating Buttons |  | Floating action buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point. Use the class `.btn` along with class `.btn-floating` .
Loading Buttons |  | Expand Animation Buttons

Alerts

Basic Alert | Good Morning! Start your day with some alerts. | Alerts are available for any length of text, as well as an optional dismiss button. Add `.alert.alert-COLOR` classes for alert with all theme colors.
Alerts with Links | Good Morning! Start your day with some alerts. | Add `.alert-link` class to add links to alerts.

Dismissible Alerts

Good Morning! Start your day with some alerts.

Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button. On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices. To animate alerts when dismissing them, be sure to add the `.fade` and `.in` classes.

Alerts with icons | Good Morning! Start your day with some alerts. | To add left/right icons to the alert, use class `.alert-icon-left` or `alert-icon-right` as required.

#### Callouts

Basic Callout | Great Job! Biscuit macaroon tootsie roll croissant. Dessert candy canes halvah cookie liquorice. | Use `.bs-callout-COLOR` for color callout.
Right Bordered Callouts | Not Bad! Croissant carrot cake sesame snaps dessert wafer dessert wafer icing jelly. | Use `.callout-border-right` for right bordered callout.

Callout with transparent Background

#### Super cool!

Cupcake macaroon chupa chups fruitcake. Candy canes cotton candy dessert.

Use `.callout-transparent` for callout with white background.

Callout With Icon | Congratulations! Cake chupa chups tootsie roll brownie pastry marzipan lollipop sweet. | Use class `.callout-icon` to use icon with callout.
Round Callout | Not Bad! Croissant carrot cake sesame snaps dessert wafer dessert wafer icing jelly. | Use class `.callout-round` for round callout.

#### Progress

Default Progress | Reticulating splines… 25% | To caption a progress bar, simply add a `<div>` with your caption text, align the text using a utility class, and associate the caption with the progress element using the aria-describedby attribute.
Striped Progress |  | Uses a gradient to create a striped effect.
Progress Sizes |  | Different sized progress. For Default progress, No size class needed.

#### Checkboxes

Basic Checkbox | I am checked Checkbox | Basic Checkbox
Custom Checkbox | Checkbox Checked | Custom Checkbox

#### Radio Buttons

Basic Radio Buttons | I am checked Radio Button | Basic Radio Buttons
Basic Radio Buttons | Checkbox Checked | Custom Radio Buttons

#### Select

Single Select |  | Use `ng-multiselect-dropdown` for basic select control.
Disabled Mode |  | Select will respond to the `disabled` attribute on `<select>` elements. You can also initialize Select with `disabled: true` to get the same effect.

#### Input

Default Input text |  | Standard form controls supported in all example form elements. Form controls automatically receives global styling. The .form-group class is the easiest way to add some structure to form elements like `<input>, <textarea>,` and`<select>`
Input Font Color |  | Input Primary colored Font
Input Border Color |  | Input Success Border Color
Input Background Color |  | Background Warning Color Input
Default Input with Left Icon |  | Left Icon Default Input
Default Input group | @ | Add span with `.input-group-prepend` class before `<input>`
Input group with Switchery |  | Add span with `.input-group-prepend` class before `<input>` text and Add switchery inside.

#### Badges

Basic Pills |  | Use the `.badge` class, followed by `.badge-pill` with `.badge-secondary` class within element to create default pill.
Pills With Glow effect |  | Use the `.badge` class, followed by .badge-pill with `.badge-glow` class within element to create `glow` styled pill.
Pills with Icons |  | I dont have text to put hear
Bordered Badges (Pills) |  | Use the `.badge` class, followed by`.badge-border` with `.badge-success` class within element to create success pill.

#### Tooltip Triggers

Hover |  | Use `triggers="hover"` for hover trigger. This is a default trigger.
Click |  | Use `triggers="click"` for click trigger.
Focus |  | Use `triggers="focus"` for focus trigger.
Manual |  | Use `triggers="manual"` for manual trigger. You can do show/hide using js

#### Tags

Info Label | Info Label | Use the `.badge` class, followed by`.badge-info` class within element to create info label.
Tags with Icons | Primary Label | Use the .badge class, followed by`.badge-square` class for square bordered label.
Tags with Only Icons |  | Use the `.badge` class, followed by`.round` class for round warning label.
Bordered Tags | Danger Label | Use the `.badge-bordered` with class `.badge`. Also use `.border-COLOR` class to add border and use `.COLOR` for text color

#### Switch

Basic Switchery Toggle |  | To set Switchery toggle, add `.switchery` class to checkbox.
Small Switchery |  | To set Small Switchery toggle, add `.switchery-sm` class to checkbox.
Color Switchery (Danger Switchery) |  | To get Danger Switchery, add `.switchery-danger` class to checkbox.