• ENG
  • 2

    Cart

  • 4

    Notification View all

    • 30-04-2024Today
      Alice Goodwin

      Fashion should be fun. It shouldn't be labelled intellectual.

    • 28-06-20241 hour ago
      Herry Venter

      I am convinced that there can be luxury in simplicity.

    • 04-08-2024Today
      Loain Deo

      I feel that things happen for open new opportunities.

    • 12-11-2024Yesterday
      Fenter Jessy

      Sometimes the simplest things are the most profound.

  • Bookmark

  • 15

  • user
    Ava Davis

    Admin

Table Components

  2. Tables
  3. Table Components

UI Components

Button Bootstrap includes six predefined button styles, each serving its own semantic purpose.
Round ButtonsUse .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
Buttons with IconBootstrap includes six predefined button styles, each serving its own semantic purpose.
Icon ButtonSimple Icon Button
Loading ButtonsExpand 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 AlertsAdd 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 iconsAdd 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 CheckboxBasic Checkbox
Default Checkbox Square
Wrap with use .m-Square 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 ButtonsBasic 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, danger for 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 SelectUse for basic select control.
Disabled Select Mode Use for disabled select control add disabled .
Large Select ModeUse for large and small select control add class form-control-* lg, sm .
Example multiple selectUse for multi select control add code multiple on select.

Input

Default Input textUse for basic select control.
Input Hover ColorUse for basic input color add class input-air-* primary, secondary, success, info .on input

Badges

Basic PillsPrimaryUse 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 thelabel-square class with div

Tooltip Triggers

HoverUse data-bs-toggle="tooltip" for hover trigger. This is a default trigger
LinkLinkUsea href="#" for link trigger. This is a link trigger
outline buttonUse btn btn-outline-info for outline trigger. and button bold Border use class btn btn-outline-dark-2x 2

Switch

Default SwitchUse class switch for label.
Disable Switchthis 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.