| 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 |
@
|
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. |
| 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 data-size="sm" attribute with class .switchery to checkbox. |
| Color Switchery (Danger Switchery) |
|
To get Danger Switchery, add data-color="danger" attribute to checkbox. |