#### Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

###### Start using alerts with no worries!

Check below table to use alerts with different types and designs.

Alert Type | Class | Description
--- | --- | ---
Default alert | `.alert.alert-*` | Use any template color from COLOR PALETTE that you like to add for alert.
Alert Title | `.alert-heading` | add this class inside of alert to create alert with title.
Dismissible Alerts | `.alert-dismissible` | Adds extra padding to the right of the alert and positions the .close button. You can use the data-dismiss="alert" attribute also.
Alerts with icons | N/A | Just add icon before your alert text to create a alert with icon.

Referrals :

Type | URL
--- | ---
Bootstrap Link | https://getbootstrap.com/docs/4.3/components/alerts/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-alerts.html

#### Buttons

Buttons include support for a handful of contextual variations, sizes, states, and more. Group a series of buttons together on a single line with the button group.

Buttons options | Class | Description
--- | --- | ---
Basic button | `.btn.btn-*` | Use any template color from COLOR PALETTE that you like to use for button.
Outline button | `.btn-outline-*` | For outline buttons.
Flat button | `.btn-flat-*` | For flat buttons.
Gradient button | `.btn-flat-*` | For gradient buttons.
Relief button | `.btn-relief-*` | For relief buttons.
Square button | `.btn-square` | For square button.
Round button | `.btn-round` | For round button.
Text color | `.text-*` | For button text color.
Button with icon | N/A | Just add icon before your button text for button with icons.
Button with icon only | `.btn-icon` | Adds icon to button Note: you can only use `.btn-icon` when you want icon without text in your button
Button group | `.btn-group` | Group a series of buttons together on a single line with the button group.
Button Size | `.btn{lg | sm}` | For fancy larger or smaller buttons size.
Button block | `.btn-block` | Create block level buttons—those that span the full width of a parent.
Vertical button group | `.btn-group-vertical` | To create vertical button group.

Referrals :

Type | URL
--- | ---
Bootstrap Buttons | https://getbootstrap.com/docs/4.3/components/buttons/
Button Groups | https://getbootstrap.com/docs/4.3/components/button-group/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-buttons-basic.html

#### Breadcrumbs

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Separators are automatically added in CSS through ::before and content. They can be changed by changing `$breadcrumb-divider`. The quote function is needed to generate the quotes around a string, so if you want > as separator, you can use this

    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item active" aria-current="page">Home</li>
      </ol>
    </nav>

    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
      </ol>
    </nav>

    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
      </ol>
    </nav>

Type | URL
--- | ---
Bootstrap Page | https://getbootstrap.com/docs/4.3/components/breadcrumb/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-breadcrumbs.html

#### Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel. In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).

Nested carousels are not supported.

Below have options that you can use with carousel :

- Carousel with caption
- Interval Options
- Disable on hover Pause
- Crossfade effect, etc..

Referrals :

Type | URL
--- | ---
Bootstrap Page | https://getbootstrap.com/docs/4.3/components/carousel/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-carousel.html

#### Collapse

The Bootstrap collapse plugin allows you to toggle content on your pages with a few classes thanks to some helpful JavaScript.

You can use a link with the `href` attribute, or a button with the `data-target` attribute.

In all cases, the `data-toggle="collapse"` is required.

Collapse Options | Class | Description
--- | --- | ---
Collapse with bottom border | `.collapse-bordered` | Adds border bottom to collapse header
Collapse Icons | `.collapse-icon` | Adds icon at the right side of collpase
Animated Collapse Icons | `.accordion-icon-rotate` | Adds animation to collapse icons
Collapse Shadow | `.accordion-shadow` | Adds shadow to your collapse/accordion
Collapse Border | `.collapse-border` | Adds border around collapse
Collapse Margin | `.collapse-margin` | Adds margin to collapse
Collapse Hover | `data-open-hover="true"` | Makes your collapse open on hover Note: `data-open-hover="true"` is not a class it's an attribute

Referrals :

Type | URL
--- | ---
Bootstrap Page | https://getbootstrap.com/docs/4.3/components/collapse/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-collapse.html

#### Dropdown

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin.

###### Example Code:

      <div class="dropdown open">
          <a class="btn btn-secondary dropdown-toggle" href="https://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown link
          </a>

          <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
          </div>
      </div>

Dropdown Options | Class | Description
--- | --- | ---
Active State | `.active` | Dropdown Button's selected/active state.
Directions | `.dropdown-{up | right | left}` | Changes drop direction.
Dropdown menu direction | `.dropdown-menu-right` | Changes dropdown menu's drop direction.

Referrals :

Type | URL
--- | ---
Bootstrap Page | https://getbootstrap.com/docs/4.3/components/dropdowns/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-dropdowns.html

#### List Group

List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

###### Example Code:

          <ul class="list-group">
              <li class="list-group-item">Cras justo odio</li>
              <li class="list-group-item">Dapibus ac facilisis in</li>
              <li class="list-group-item">Morbi leo risus</li>
              <li class="list-group-item">Porta ac consectetur ac</li>
              <li class="list-group-item">Vestibulum at eros</li>
          </ul>

Referrals :

Type | URL
--- | ---
Bootstrap Page | https://getbootstrap.com/docs/4.3/components/list-group/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-list-group.html

#### Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

###### Example Code:

        <div class="modal fade">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">Modal title</h4>
              </div>
              <div class="modal-body">
                <p>One fine body…</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

Modal options | Class | Description
--- | --- | ---
Background modal color | `.bg-*` | Use any template color from COLOR PALETTE that you like to use for modal background.
Modal sizes | `.modal-{xs|sm|lg|xl]` | Different sizes of modal that can be used for different examples.

Referrals :

Type | URL
--- | ---
Bootstrap Modal | https://getbootstrap.com/docs/4.3/components/modal/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-modals.html

#### Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

The pagination component should be wrapped in a `<nav>` element to identify it as a navigation section to screen readers and other assistive technologies. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be `aria-label="previous"`.

Below have options that you can use with pagination :

Pagination options | Class | Description
--- | --- | ---
Separated Pagination | `.prev-item`, `.next-item` | To create sperated pagination arrows, use this classes for previous and next list item.
Pagination with arrows | `.prev`, `.next` | To create pagination with arrows, use this classes for previous and next item.
Pagination Colors | `pagination-*` | Use any template color from COLOR PALETTE that you like to use for pagination theme.

Referrals :

Type | URL
--- | ---
Bootstrap Page | https://getbootstrap.com/docs/4.3/components/pagination/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-pagination.html

#### Navs

Roll your own navigation style by extending the base `.nav` component. All Bootstrap’s nav components are built on top of this by specifying additional styles. Includes styles for the disabled state, but not the active state.

Below have options that you can use with navs :

Navs options | Class | Description
--- | --- | ---
Border wrapper | `.wrap-border` | Wrap with border to nav.
Square Border | `.square-border` | For square navs border.

Referrals :

Type | URL
--- | ---
Bootstrap Page | https://getbootstrap.com/docs/4.3/components/navs/#base-nav
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-navs-component.html

#### Tabs

Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions and to extend navigational tabs.

Below have options that you can use with tabs :

Tabs options | Class | Description
--- | --- | ---
Basic Tabs | `.nav-tabs` | Simple basic nav tabs
Filled Tabs | `.nav-fill` | Proportionately fill all available space with your `.nav-items`.
Justified Tabs | `.nav-justified` | For justified tabs with equal width.
Vertical Tabs | `.nav-vertical` | For vertical style of the tabs.

Referrals :

Type | URL
--- | ---
Bootstrap Page | https://getbootstrap.com/docs/4.3/components/navs/#tabs
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-tabs-component.html

#### Pills

Navigation available in Bootstrap share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style.

Below have options that you can use with pills :

Pills options | Class | Description
--- | --- | ---
Basic Pills | `.nav-pills` | Simple basic nav pills
Active Border Pills | `.nav-active-bordered-pill` | Active border pill style.
Justified Pills | `.nav-justified` | For justified pills with equal width.
Vertical Pills | `.flex-column` | For vertical style of the pills.
Pills Colors | `.nav-pill-color*` | Use any template color from COLOR PALETTE that you like to use for pills theme.

Referrals :

Type | URL
--- | ---
Bootstrap Page | https://getbootstrap.com/docs/4.3/components/navs/#pills
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-pills-component.html

#### Tooltips

Tooltips are an updated version, which don’t rely on images, use CSS3 for animations, and data-attributes for local title storage.

Tooltip requires `data-toggle="tooltip"`.

To add tooltip text, use `data-original-title="Tooltip title"`.

Below have options that you can use with Tooltip :

Tooltip options | Class | Description
--- | --- | ---
Tooltip Positions | `data-placement` | Default: top. Options are top,right,bottom,left.
Tooltip Triggers | `data-trigger` | By default, tooltip triggers onhover. Trigger options are `click, hover, focus & manual`.
Delay Show/Hide Tooltip | `data-delay` | Delay showing and hiding the tooltip `(ms)` - does not apply to manual trigger type.
| Supports HTML | `data-html` | If this value is true, you can use html in `data-original-title` text.

Referrals :

Type | URL
--- | ---
Bootstrap Page | https://getbootstrap.com/docs/4.3/components/tooltips/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-tooltips.html

#### Popovers

Add small overlay content, like those found in iOS, to any element for housing secondary information.

Popovers requires `data-toggle="popover"`.

To add popover text, use `data-content="Popovers text"`.

Below have options that you can use with Popovers :

Popovers options | Class | Description
--- | --- | ---
Popovers Positions | `data-placement` | Default: top. Options are top,right,bottom,left.
Popovers Triggers | `data-trigger` | By default, popover triggers onhover. Trigger options are `click, hover, focus & manual`.
Delay Show/Hide Popovers | `data-delay` | Delay showing and hiding the popover `(ms)` - does not apply to manual trigger type.
Supports HTML | `data-html` | If this value is true, you can use html in `data-content` text.

Referrals :

Type | URL
--- | ---
Bootstrap Page | https://getbootstrap.com/docs/4.3/components/popovers/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-popovers.html

#### Badges

Small and adaptive badge for adding context to just about any content.

Below have options that you can use with Badges :

Badges options | Class | Description
--- | --- | ---
Basic Badges | `.badge-*` | Use any template color from COLOR PALETTE that you like to add for badge.
Square badges | `.badge-square` | For square style badges.
Badge Sizes | `.badge-{xl|lg|md|sm}` | Use this class for block badges.
Block Badges | `.block` | Use this class for block badges.

Referrals :

Type | URL
--- | ---
Bootstrap Page | https://getbootstrap.com/docs/4.3/components/badge
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-badges.html

#### Pill badges

Use the `.badge-pill` modifier class with `.badge` class to make pill badges.

Below have options that you can use with Pill badges :

Pill badges options | Class | Description
--- | --- | ---
Basic Pill badges | `.badge-*` | Use any template color from COLOR PALETTE that you like to add for pill badge.
Pill Tags With Glow | `.badge-glow` | To create glow styled pill badge.
Pill Tags as Notification | `.badge-up` | To set pill badge to higher than other text. So that it can work with notifications also.

Referrals :

Type | URL
--- | ---
Bootstrap Page | https://getbootstrap.com/docs/4.3/components/badge/#pill-badges
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-pill-badges.html

#### Progress

Stylize the HTML5 `<progress>` element.

Below have options that you can use with Progress :

Progress options | Class | Description
--- | --- | ---
Basic Progress | `.progress` | Basic progress bars using this class.
Colored Progress | `.progress-bar-*` | Use COLOR PALETTE for progress color.
Progress Sizes | `.progress-{xl|lg|sm}` | For Extra Large, Large, Small and Extra Small sized progress.

Referrals :

Type | URL
--- | ---
Bootstrap Page | https://getbootstrap.com/docs/4.3/components/progress
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-progress.html

#### Media Objects

The media object is an abstract element used as the basis for building more complex and repetitive components.

Example Code :

        <div class="media">
            <a class="media-left" href="#">
                <img class="media-object" src="..." alt="Generic placeholder image">
            </a>
            <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                Media Text
            </div>
        </div>

Referrals :

Type | URL
--- | ---
Bootstrap Page | https://getbootstrap.com/docs/4.3/components/media-object/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-media-objects.html

#### Spinners

Spinners contains Icon spinners with different styles. use below mentioned code to create a basic spinner

            <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
          </div>

Referrals :

Type | URL
--- | ---
Bootstrap Page | https://getbootstrap.com/docs/4.3/components/spinners/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-spinner.html

#### Toast

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Note: Because proper JS is not provided by bootstrap we have modified toasts for proper functionality.You have to use below mentioned classes for toast to work.

Toast Type | Class | Description
Toast Conatiner | `.toast-bs-container` | Works as container for toast
Toast Position | `.toast-positions` | Positions toast at desired place

Referrals :

Type | URL
--- | ---
Bootstrap Page | https://getbootstrap.com/docs/4.3/components/toasts/
Template Page | https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/component-bs-toast.html