UI Components
| 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 |
Alerts
| 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. |
Progressbar
| 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. |
Checkbox
| 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. |
Radio Buttons
| 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. |
Select
| 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. |
Input
| 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 |
Badges
| 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 |
Tooltip Triggers
| 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 |
SWITCH
| 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. |