### Table components

#### UI components

Button |  | Bootstrap includes six predefined button styles, each serving its own semantic purpose.
Round Buttons |  | Use `.btn-round` class to button for Round Buttons.
Button dropdowns |  | Turn a button into a dropdown toggle with some basic markup changes.
Basic Button group |  | Group a series of buttons together on a single line with the button group. Wrap a series of buttons with `.btn` in `.btn-group.`
Buttons with Icon |  | Bootstrap includes six predefined button styles, each serving its own semantic purpose.
Icon Button |  | Simple Icon Button
Floating Buttons |  | Floating action buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point. Use the class `.btn` along with class `.btn-floating` .
Loading Buttons |  | Expand Animation Buttons

#### Alerts

Basic Alert | Good Morning! Start your day with some alerts. | Alerts are available for any length of text, as well as an optional dismiss button. Add `.alert.alert-COLOR` classes for alert with all theme colors.
Alerts with Links | Heads up! This alert needs your attention, but it's not super important. | Add `.alert-link` class to add links to alerts.
Dismissible Alerts | Good Morning! Start your day with some alerts. | Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button. On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` 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. | To add left/right icons to the alert, use class `.alert-icon-left` or `alert-icon-right` as required.

#### Callouts

Basic Callout | Great Job! Biscuit macaroon tootsie roll croissant. Dessert candy canes halvah cookie liquorice. | Use `.bs-callout-COLOR` for color callout.
Right Bordered Callouts | Not Bad! Croissant carrot cake sesame snaps dessert wafer dessert wafer icing jelly. | Use `.callout-border-right` for right bordered callout.
Callout with transparent Background | #### Super cool! Cupcake macaroon chupa chups fruitcake. Candy canes cotton candy dessert. | Use `.callout-transparent` for callout with white background.
Callout With Icon | Congratulations! Cake chupa chups tootsie roll brownie pastry marzipan lollipop sweet. | Use class `.callout-icon` to use icon with callout.
Round Callout | Not Bad! Croissant carrot cake sesame snaps dessert wafer dessert wafer icing jelly. | Use class `.callout-round` for round callout.

#### Progress

Default Progress | Reticulating splines… 25% | To caption a progress bar, simply add a `<div>` with your caption text, align the text using a utility class, and associate the caption with the progress element using the aria-describedby attribute.
Striped Progress |  | Uses a gradient to create a striped effect.
Progress Sizes |  | Different sized progress. For Default progress, No size class needed.

#### Checkboxes

Basic Checkbox | I am checked Checkbox | Basic Checkbox
Default iCheck Checkbox | Checkbox Checked | Wrap with `.icheck1` to use icheck checkbox.
Basic Skin iCheck | Checkbox Checked | Wrap with `.icheck2.skin` for this style of checkbox.
Square Skin iCheck | Checkbox Checked | Wrap with `.skin.skin-square` for square and colored checkbox. Have to do color changes using JS.
Flat Skin iCheck | Checkbox Checked | Wrap with `.skin.skin-flat` for Flat colored checkbox. Have to do color changes using JS.
Polaris Skin iCheck | Checkbox Checked | Wrap with `.skin.skin-polaris` for polaris checkbox.
Futurico Skin iCheck | Checkbox Checked | Wrap with `.skin.skin-futurico` for futurico checkbox.

#### Radio Buttons

Basic Radio Buttons | I am checked Radio Button | Basic Radio Buttons
Basic iCheck Radio | Radio Button Checked | Wrap with `.icheck1` to use default icheck radio button.
Another iCheck Radio Option | Radio Button Checked | Wrap with `.icheck2` with `.skin` to use another icheck radio style.
Flat Skin iCheck Radio | Radio Button Checked | Wrap with `.skin.skin-flat` for Flat colored radio. Have to do color changes using JS.
Polaris Skin iCheck Radio | Radio Button Checked | Wrap with `.skin.skin-polaris` for polaris radio.
Futurico Skin iCheck Radio | Radio Button Checked | Wrap with `.skin.skin-futurico` for futurico radio.

#### Select

Single Select2 |  | Use `.select2` class for basic select2 control.
Disabled Mode |  | Select2 will respond to the `disabled` attribute on `<select>` elements. You can also initialize Select2 with `disabled: true` to get the same effect.
Select With Icon |  | Use data attribute `data-icon` to add icon name for each options. And use class `.select2-icons` to set icon with option.
Template support |  | Select2 supports custom themes using the theme option so you can style Select2 to match the rest of your application. These are using the `classic` theme, which matches the old look of Select2.
Templating |  | Various display options of the Select2 component can be changed: You can access the `<option>` element (or `<optgroup>`) and any attributes on those elements using .element. Templating is primarily controlled by the `templateResult` and `templateSelection` options.
Extra Small Select |  | For different sizes of select2, Use classes like `.select2-size-lg, .select2-size-sm, .select2-size-lg,` & `select2-size-xs` for Large, & small Select respectively.

#### Input

Default Input text |  | Standard form controls supported in all example form elements. Form controls automatically receives global styling. The .form-group class is the easiest way to add some structure to form elements like `<input>, <textarea>,` and`<select>`
Input Font Color |  | Input Primary colored Font
Input Border Color |  | Input Success Border Color
Input Background Color |  | Background Warning Color Input
Default Input with Left Icon |  | Left Icon Default Input
Default Input group | @ | Add span with `.input-group-prepend` class before `<input>`
Input group with Switchery |  | Add span with `.input-group-prepend` class before `<input>` text and Add switchery inside.
Primary Touchspin |  | set `data-bts-button-down-class` & `data-bts-button-up-class` attribute and add value as `btn btn-primary` for Primary color spinner.

#### Badges

Basic Pills | 59 | Use the `.badge` class, followed by `.badge-pill` with `.badge-secondary` class within element to create default pill.
Pills With Glow effect | 68 | Use the `.badge` class, followed by .badge-pill with `.badge-glow` class within element to create `glow` styled pill.
Pills with Icons |  | I dont have text to put hear
Bordered Badges (Pills) | 25 | Use the `.badge` class, followed by`.badge-border` with `.badge-success` class within element to create success pill.

#### Tooltip Triggers

Hover |  | Use `data-trigger="hover"` for hover trigger. This is a default trigger.
Click |  | Use `data-trigger="click"` for click trigger.
Focus |  | Use `data-trigger="focus"` for focus trigger.
Manual |  | Use `data-trigger="manual"` for manual trigger. You can do show/hide using js

#### Tags

Info Label | Info Label | Use the `.badge` class, followed by`.badge-info` class within element to create info label.
Tags with Icons | Primary Label | Use the .badge class, followed by`.badge-square` class for square bordered label.
Tags with Only Icons |  | Use the `.badge` class, followed by`.round` class for round warning label.
Bordered Tags | Danger Label | Use the `.badge-bordered` with class `.badge`. Also use `.border-COLOR` class to add border and use `.COLOR` for text color

#### Switch

Basic Switchery Toggle |  | To set Switchery toggle, add `.switchery` class to checkbox.
Small Switchery |  | To set Small Switchery toggle, add `.switchery-sm` class to checkbox.
Color Switchery (Danger Switchery) |  | To get Danger Switchery, add `.switchery-danger` class to checkbox.

#### Chart

Sparkline Chart |  | Sparkline is a very small chart, usually drawn without axes and other elements of a chart.
Sparkline Chart |  | This is sparkline bar chart.

#### Theme Customizer

Customize & Preview in Real Time

##### Menu Color Options

##### Layout Options

Collapsed Menu
Fixed Layout
Boxed Layout
Static Layout
Native Scroll
Right Side Icons
Bordered Navigation
Flipped Navigation
Collapsible Navigation
Static Navigation
Brand Center
Static Top

##### Navigation Color Options

###### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

###### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink

### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink
Buy Now