| 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 |
|
| Loading Buttons | Expand Animation Buttons |
| 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 |
Heads up! This alert needs your attention,
but it's not super important.
|
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 |
To add left/right icons to the alert, use class .alert-icon-left or alert-icon-right as required.
|
| 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. |
| 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. |
| 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. |
| 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. |
| 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.
|
| 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 |
@
|
|
| Input group with Switchery |
|
|
| 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. |
| 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 |
| Pills as Notification | 1 | Use .badge-up to set pill to higher than other
text. So that it can work with notifications also. |
| Bordered Badges (Pills) |
25
|
Use the .badge class, followed by.badge-border with .badge-success class within element to
create success pill.
|
| 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 |
| Simple Switch |
|
Add .switch class to checkbox to set as switch |
| Small Switch |
|
Add data-group-cls="btn-group-sm" attribute
for small switch |
| Switch with Icons |
|
Add data-icon-cls="fa" to set font family you
are using data-off-icon-cls="fa FONT_AWESOME_ICON" attribute for off switch icon & data-on-icon-cls="fa FONT_AWESOME_ICON" attribute for on switch icon |
| 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. |