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
Basic Checkbox
Custom Checkbox
Custom Checkbox

Radio Buttons

Basic Radio Buttons
Basic Radio Buttons
Basic Radio Buttons
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.