| Button | Bootstrap includes six predefined button styles, each serving its own semantic purpose. | |
| Round Buttons | Use .btn-pill class to button for
Round Buttons. |
|
| Button dropdowns | Use .dropdown-toggle class to
button for Dropdown-toggle. |
|
| Basic Button group |
|
Use btn-group class to button for
div. |
| Buttons with Icon | Bootstrap includes six predefined button styles, each serving its own semantic purpose. | |
| Icon Button | Simple Icon Button | |
| Loading Buttons | Expand Animation Buttons |
| Basic Alert |
Success! Indicates a successful or positive action. |
Alerts are available for any length of
text, as well as an optional dismiss button.
Add
|
| Alerts with Links |
Success! You should read this message. |
Alerts are available for any length of
text, as well as an optional dismiss button.
Add
|
| Dismissible Alerts |
Holy ! You can check in on some of those fields below. |
Add a dismiss button and
the alert alert-dismissableclass,
which adds extra padding to the right of the
alert and positions theclosea link
On the dismiss button, add the
data-bs-dismiss="alert" attribute, which
triggers the JavaScript functionality. Be sure
to use theaelement 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 |
Good Morning! Start your day with some alerts. |
Add a dismiss button and
the alert alert-dismissableclass,
which adds extra padding to the right of the
alert and positions theclosea link
On the dismiss button, add the
data-bs-dismiss="alert" attribute, which
triggers the JavaScript functionality. Be sure
to use theaelement with it for
proper behavior across all devices. To animate
alerts when dismissing them, be sure to add the
.fade and .in classes. |
| Default Progress |
|
Uses a progress bar with
classprogress-bar and background
colorbg-primary, bg-secondaryalso
change |
| Striped Progress |
|
Uses a gradient to create a striped effect
class.progress-bar-striped
|
| Progress Sizes | Different sized progress. For Default
progress, class
needlg-progress-baron div.
|
| Basic Checkbox | Basic Checkbox | |
| Default Checkbox Squar |
|
Wrap with use .m-squar
checkbox. |
| Basic Skin Check |
|
Wrap with usecheckbox-darkfor
this style of checkbox. |
| Flat Skin Check |
|
Wrap with
usecheckbox-solid-*,primary, secondary, success, info, warning, dangerfor
this style of checkbox. |
| Disable Check |
|
Wrap with
usedisabled,primary, secondary, success, info, warning, dangerfor
this style of checkbox disable. |
| Inline Checkbox |
|
Wrap with
usedisabled,primary, secondary, success, info, warning, dangerfor
this style of checkbox disable. |
| Basic Radio Buttons | Basic Radio Buttons | |
| Default Radio |
|
Wrap with use .radio-* and color
.radio-*primary , secondary , success , info
on Radio. |
| Checked Radio |
|
Wrap with usecheckbox-darkfor
this style of checkbox. |
| Flat Skin Check |
|
Wrap with
usecheckbox-solid-*,primary, secondary, success, info, warning, dangerfor
this style of checkbox. |
| Inline Checkbox |
|
Wrap with
usedisabled,primary, secondary, success, info, warning, danger, light, darkfor
this style of checkbox disable. |
| Single Select | Use for basic select control. | |
| Disabled Select Mode | Use for disabled select control add
disabled. |
|
| Large Select Mode | Use for large and small select control add
classform-control-*lg, sm.
|
|
| Example multiple select | Use for multi select control add code
multipleon select. |
| Default Input text | Use for basic select control. | |
| Input Hover Color | Use for basic input color add
classinput-air-*primary, secondary, success, info.on
input |
| Basic Pills | Primary | Use the .badge class, followed
by. with badge color use class
.badge-*primary , secondary , success , info, warning, danger, light
class within element to create default
pill. |
| Label With Icon |
Primary Label
|
Use the label-square class with
div |
| Hover | Use data-bs-toggle="tooltip" for hover trigger. This is a default trigger | |
| Link | Link | Use a href="javascript:void(0)"
for link trigger. This is a link trigger
|
| outline button | Use btn btn-outline-info for
outline trigger. and button bold Border use
classbtn btn-outline-dark-2x
|
| Default Switch | Use class switch for
label. |
|
| Disable Switch | this Disable Switch
disabled |
|
| Switch Color |
|
Use class
bg-*Primary , Secondary , Success , Info , Warning , Dangerin
span with icon show switch
icon-stateon div. |
| Switch Outline |
|
Use class switch-outlineon
div. |
