| 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 |
| 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 |