Table components

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 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 Add .alert-link class to add links to alerts.
Dismissible 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 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
Default iCheck Checkbox
Wrap with .icheck1 to use icheck checkbox.
Basic Skin iCheck
Wrap with .icheck2.skin for this style of checkbox.
Square Skin iCheck
Wrap with .skin.skin-square for square and colored checkbox. Have to do color changes using JS.
Flat Skin iCheck
Wrap with .skin.skin-flat for Flat colored checkbox. Have to do color changes using JS.
Polaris Skin iCheck
Wrap with .skin.skin-polaris for polaris checkbox.
Futurico Skin iCheck
Wrap with .skin.skin-futurico for futurico checkbox.

Radio Buttons

Basic Radio Buttons
Basic Radio Buttons
Basic iCheck Radio
Wrap with .icheck1 to use default icheck radio button.
Another iCheck Radio Option
Wrap with .icheck2 with .skin to use another icheck radio style.
Flat Skin iCheck Radio
Wrap with .skin.skin-flat for Flat colored radio. Have to do color changes using JS.
Polaris Skin iCheck Radio
Wrap with .skin.skin-polaris for polaris radio.
Futurico Skin iCheck Radio
Wrap with .skin.skin-futurico for futurico radio.

Select

Single Select2
Use .select2 class for basic select2 control.
Disabled Mode
Select2 will respond to the disabled attribute on <select> elements. You can also initialize Select2 with disabled: true to get the same effect.
Select With Icon
Use data attribute data-icon to add icon name for each options. And use class .select2-icons to set icon with option.
Template support
Select2 supports custom themes using the theme option so you can style Select2 to match the rest of your application. These are using the classic theme, which matches the old look of Select2.
Templating
Various display options of the Select2 component can be changed: You can access the <option> element (or <optgroup>) and any attributes on those elements using .element. Templating is primarily controlled by the templateResult and templateSelection options.
Extra Small Select
For different sizes of select2, Use classes like .select2-size-lg, .select2-size-sm, .select2-size-lg, & select2-size-xs for Large, & small Select respectively.

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.
Primary Touchspin
set data-bts-button-down-class & data-bts-button-up-class attribute and add value as btn btn-primary for Primary color spinner.

Badges

Basic Pills
59
Use the .badge class, followed by .badge-pill with .badge-secondary class within element to create default pill.
Pills With Glow effect
68
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)
25
Use the .badge class, followed by.badge-border with .badge-success class within element to create success pill.

Tooltip Triggers

Hover
Use data-trigger="hover" for hover trigger. This is a default trigger.
Click
Use data-trigger="click" for click trigger.
Focus
Use data-trigger="focus" for focus trigger.
Manual
Use data-trigger="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.

Chart

Sparkline Chart
Sparkline is a very small chart, usually drawn without axes and other elements of a chart.
Sparkline Chart
This is sparkline bar chart.

Theme Customizer


Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now