| Button | Bootstrap includes six predefined button styles, each serving its own semantic purpose. | |
| Round Buttons |
Use .btn-roundclass 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-linkclass 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 .closebutton. 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 .inclasses.
|
| Alerts with icons |
To add left/right icons to the alert, use class .alert-icon-left or alert-icon-rightas required.
|
| Basic Callout |
Great Job!
Biscuit macaroon tootsie roll croissant. Dessert candy canes halvah cookie liquorice. |
Use .bs-callout-COLORfor color callout.
|
| Right Bordered Callouts |
Not Bad!
Croissant carrot cake sesame snaps dessert wafer dessert wafer icing jelly. |
Use .callout-border-rightfor right bordered callout.
|
| Callout with transparent Background |
Super cool!Cupcake macaroon chupa chups fruitcake. Candy canes cotton candy dessert. |
Use .callout-transparentfor callout with white background.
|
| Callout With Icon |
Congratulations!
Cake chupa chups tootsie roll brownie pastry marzipan lollipop sweet. |
Use class .callout-iconto use icon with callout.
|
| Round Callout |
Not Bad!
Croissant carrot cake sesame snaps dessert wafer dessert wafer icing jelly. |
Use class .callout-roundfor 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 .icheck1to use icheck checkbox.
|
| Basic Skin iCheck |
|
Wrap with .icheck2.skinfor this style of checkbox.
|
| Square Skin iCheck |
|
Wrap with .skin.skin-squarefor square and colored checkbox. Have to do color changes using JS.
|
| Flat Skin iCheck |
|
Wrap with .skin.skin-flatfor Flat colored checkbox. Have to do color changes using JS.
|
| Polaris Skin iCheck |
|
Wrap with .skin.skin-polarisfor polaris checkbox.
|
| Futurico Skin iCheck |
|
Wrap with .skin.skin-futuricofor futurico checkbox.
|
| Basic Radio Buttons |
|
Basic Radio Buttons |
| Basic iCheck Radio |
|
Wrap with .icheck1to use default icheck radio button.
|
| Another iCheck Radio Option |
|
Wrap with .icheck2with .skinto use another icheck radio style.
|
| Flat Skin iCheck Radio |
|
Wrap with .skin.skin-flatfor Flat colored radio. Have to do color changes using JS.
|
| Polaris Skin iCheck Radio |
|
Wrap with .skin.skin-polarisfor polaris radio.
|
| Futurico Skin iCheck Radio |
|
Wrap with .skin.skin-futuricofor futurico radio.
|
| Single Select2 |
|
Use .select2class for basic select2 control.
|
| Disabled Mode |
|
Select2 will respond to the disabledattribute on <select>elements. You can also initialize Select2 with disabled: trueto get the same effect.
|
| Select With Icon |
|
Use data attribute data-iconto 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 classictheme, 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 templateResultand templateSelection options.
|
| Extra Small Select |
|
For different sizes of select2, Use classes like .select2-size-lg, .select2-size-sm, .select2-size-lg, & select2-size-xsfor 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-secondaryclass within element to create default pill.
|
| Pills With Glow effect |
68
|
Use the .badgeclass, followed by .badge-pill with .badge-glowclass within element to create glowstyled pill.
|
| Pills with Icons |
|
I dont have text to put hear |
| Pills as Notification | 1 |
Use .badge-upto set pill to higher than other text. So that it can work with notifications also.
|
| Bordered Badges (Pills) |
25
|
Use the .badgeclass, followed by.badge-border with .badge-successclass within element to create success pill.
|
| Info Label |
Info Label
|
Use the .badgeclass, 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 .badgeclass, followed by.round class for round warning label.
|
| Bordered Tags |
Danger Label
|
Use the .badge-borderedwith class .badge. Also use .border-COLORclass to add border and use .COLORfor text color
|
| Simple Switch |
|
Add .switchclass 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 .switcheryclass 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.
|