logologo

Table Components

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
Dropdown header
ActionAnother actionSomething else here
Separated link
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 Template colors.
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 alert alert-primary, alert alert-secondary, alert alert-success, alert alert-info classes for alert with all Template colors.
Dismissible 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.
Alerts with icons 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="#" 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.