Loading...

### 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 |  | 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 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 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 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.
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 | Default | Basic Checkbox
Default Checkbox Squar | Default | Wrap with use `.m-squar` checkbox.
Basic Skin Check | Brand state | Wrap with use`checkbox-dark`for this style of checkbox.
Flat Skin Check | checked | Wrap with use`checkbox-solid-*`,`primary, secondary, success, info, warning, danger`for this style of checkbox.
Disable Check | Disabled | Wrap with use`disabled`,`primary, secondary, success, info, warning, danger`for this style of checkbox disable.
Inline Checkbox | Option 1 Option 1 Option 1 | Wrap with use`disabled`,`primary, secondary, success, info, warning, danger`for this style of checkbox disable.

##### Radio Buttons

Basic Radio Buttons | Default radio | Basic Radio Buttons
Default Radio | Option 1 | Wrap with use `.radio-*` and color `.radio-*``primary , secondary , success , info` on Radio.
Checked Radio | Checked | Wrap with use`checkbox-dark`for this style of checkbox.
Flat Skin Check | Disabled | Wrap with use`checkbox-solid-*`,`primary, secondary, success, info, warning, danger`for this style of checkbox.
Inline Checkbox | Option 1 Option 1 Option 1 | 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="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 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.