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 alert alert-primary, alert alert-secondary, alert alert-success, alert alert-info classes for alert with all theme colors.
Alerts are available for any length of text, as well as an optional dismiss button. Add alert alert-primary, alert alert-secondary, alert alert-success, alert alert-info classes for alert with all theme colors.
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
Emay Walter