Don't Miss Out! Our new update has been released.
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-dismissable class, which adds extra padding to the right of the alert and positions the close a link On the dismiss button, add the data-bs-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use thea 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 | Good Morning! Start your day with some alerts. | Add a dismiss button and the alert alert-dismissable class, which adds extra padding to the right of the alert and positions the close a link On the dismiss button, add the data-bs-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the a element 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 class progress-bar and background color bg-primary, bg-secondary also change | |
| Striped Progress | Uses a gradient to create a striped effect class. progress-bar-striped | |
| Progress Sizes | Different sized progress. For Default progress, class need lg-progress-bar on div. |
Checkbox
| Basic Checkbox | Basic Checkbox | |
| Default Checkbox Squar | Wrap with use .m-squar checkbox. | |
| Basic Skin Check | Wrap with use checkbox-dark for this style of checkbox. | |
| Flat Skin Check | Wrap with use checkbox-solid-* ,primary, secondary, success, info, warning, danger for this style of checkbox. | |
| Disable Check | Wrap with use disabled ,primary, secondary, success, info, warning, danger for this style of checkbox disable. | |
| Inline Checkbox | Wrap with use disabled ,primary, secondary, success, info, warning, danger for 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 use checkbox-dark for this style of checkbox. | |
| Flat Skin Check | Wrap with use checkbox-solid-* , primary, secondary, success, info, warning, dangerfor this style of checkbox. | |
| Inline Checkbox | Wrap with use disabled , primary, secondary, success, info, warning, danger, light, dark for 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 class form-control-*lg, sm. | |
| Example Multiple Select | Use for multi select control add code multiple on select. |
Input
| Default Input Text | Use for basic select control. | |
| Input Hover Color | Use for basic input color add class input-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="#" for link trigger. This is a link trigger |
| Outline Button | Use btn btn-outline-info for outline trigger. and button bold Border use class btn 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 , Danger in span with icon show switch icon-state on div. | |
| Switch Outline | Use class switch-outline on div. |