Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### 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="#"` 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.