Components Navigation
Back to top

Component Documentation

  1. Home
  2. Component

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.
No border alert .alert.no-border Alerts without border working same but looks different.
Alert with links .alert-link If you want to give any link to the content of the alert, this class is used.
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 .alert-icon-[left/right] Adds left/right icons to the alert.
Alerts with arrow .alert-arrow-[left/right] Adds left/right arrow to the alert. To use with icons, add .alert-icon-[left/right] accordingly.
Solid alerts .alert.bg-* Add background color from COLOR PALETTE to the .alert container class for solid alerts.
Round alerts .alert.round Used for rounded bordered alerts.

Using above options, create some combinations like:

  • Alerts with icons & Arrow
  • Solid Alerts with icons
  • Solid Alerts with icons & arrow
  • Round Alerts with Icons
  • Round Alerts with Icons & Arrows, etc...

Referrals :

Type URL
Bootstrap Link https://getbootstrap.com/docs/4.2/components/alerts/
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/component-alerts.html

Callout

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

Callout Type Class Description
Default callout .bs-callout-* Use any template color from COLOR PALETTE that you like to add for callout.
Right bordered .callout-right It is used for right bordered callout
Transparent background .callout-transparent For transparent background callout. That can have only left/right border.
Bordered callout .callout-bordered For callout with all side bordered.
Callout with arrow .callout-arrow-[left/right] Set arrow according to icon sides using this class.
Round callout .callout-round For round bordered callout.
Square callout .callout-square For square bordered callout.

Using above options, create some combinations like:

  • Callouts with icons & Arrow
  • Round Callouts with Icons
  • Round Callouts with Icons & Arrows
  • Round Callouts with Right Icons & Arrows
  • Square Callouts with icons
  • Square Callouts with Icons & Arrows
  • Square Callouts with Right icons & arrow, etc...

Referrals :

Type URL
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/component-callout.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.
Round button .btn-round For round button.
Square button .btn-square For square 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.
Outline button .btn-outline-* Use any template color from COLOR PALETTE that you like to use for outline button.
Vertical button group .btn-group-vertical To create vertical button group.

You can also create button dropdowns and split button using .btn-group wrapper.

Using above options, create some combinations like:

  • Buttons with icon
  • Buttons with only icon
  • Round Buttons with icon
  • Round Buttons with only icon
  • Square Buttons with icon
  • Square Buttons with only icon
  • Outline Buttons with icon
  • Outline Buttons with only icon
  • Outline Buttons with only icon, etc...

Referrals :

Type URL
Bootstrap Buttons https://getbootstrap.com/docs/4.2/components/buttons/
Button Groups https://getbootstrap.com/docs/4.2/components/button-group/
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/component-buttons-basic.html

Extended Buttons

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.

Buttons options Class Description
Floating button .btn-float To create floating button.

Floating button also use, .btn-round, .btn-square, btn-outline-*, etc...

Social Buttons

Get Social buttons classes and descriptions below

Buttons options Class Description
Social button .btn.btn-social To create basic social button.
Social button with color .btn-* To match button color with social colors use classes like .btn-facebook, btn-twitter, etc...
Social button block .btn-block To create social block button.
Social button sizes .btn-[lg/sm/xs] To create social block button.
Social outline button .btn-outline-* To match button outline with social colors use classes like .btn-outline-facebook, btn-outline-twitter, etc...
Ladda Buttons

This UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing.

Ladda buttons must be given the class .ladda-button and the button label needs to have the .ladda-label class. The ladda-label will be automatically created if it does not exist in the DOM. Below is an example of a button which will use the expand-right animation style.

Referrals :

Type URL
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/component-buttons-extended.html
Ladda Buttons https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/

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, etc...

Referrals :

Type URL
Bootstrap Page https://getbootstrap.com/docs/4.2/components/carousel/
Template Page https://demos.pixinvent.com/modern-html-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.

Referrals :

Type URL
Bootstrap Page https://getbootstrap.com/docs/4.2/components/collapse/
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/component-collapse.html

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.
Dropdown Sizes .dropdown-menu-[xl/lg/sm] Different dropdown sizes.

Using above options, create some combinations like:

  • Dropdown with icon
  • Dropdown with checkbox
  • Dropdown with radio
  • Dropdown with pills & badges, etc...

Referrals :

Type URL
Bootstrap Page https://getbootstrap.com/docs/4.2/components/dropdowns/
Template Page https://demos.pixinvent.com/modern-html-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.2/components/list-group/
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/component-list-group.html

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.
Border modal color .border-* Use any template color from COLOR PALETTE that you like to use for modal border color.
Modal sizes .modal-[xl/lg/sm/xs] Different sizes of modal that can be used for different examples.

There are so many features that can be used for modals. Like :

  • Different heading options
  • Different animation to open modal, etc...

You can also create button dropdowns and split button using .btn-group wrapper.

Referrals :

Type URL
Bootstrap Modal https://getbootstrap.com/docs/4.2/components/modal/
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/component-modals.html

Pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

Labelling the pagination component

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 .pagination-separate Pagination with space between each pagination links
Flat Pagination .pagination-flat Flat Pagination style links
Round Pagination .pagination-round Round Styled Pagination
Curved Pagination .pagination-curved Curved Styled Pagination
Pagination Sizes .pagination-[lg/sm] Large and small pagination styles.
Pager :
Pager options Class Description
Basic Pager .pager Use this class for basic pager pagination.
Square Pager .pager-square Square styled pager.
Round Pager .pager-round Round styled pager.
Flat Pager .pager-flat Flat styled pager.

Referrals :

Type URL
Bootstrap Page https://getbootstrap.com/docs/4.2/components/pagination/
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/component-pagination.html

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.
Nav divider .dropdown-divider To set divider between sections.
Nav header .nav-header To set header of the section.

use more options using above classes :

  • Navs with icons
  • Navs with pills & badges, etc...

Referrals :

Type URL
Bootstrap Page https://getbootstrap.com/docs/4.2/components/navs/#base-nav
Template Page https://demos.pixinvent.com/modern-html-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
Top BorderedStyle .nav-top-border Tabs with top border style.
No hover Background .no-hover-bg To set transparent background on hover of tabs.
Topline Style .nav-topline Tabs with topline to nav.
Justified Tabs .nav-justified For justified tabs with equal width.
Underline Style .nav-underline For underlined tab style.
Linetriangle Style .nav-linetriangle For underlined and Triangle for active tab style.
Icon Fall Style .nav-iconfall For icon fall for active tab style.
Tabs with Only Icon .nav-only-icon For only icons for active tab style. This will increase icon font size.
Vertical Tabs .nav-vertical For vertical style of the tabs.

use more options using above classes :

  • Tabs with icons
  • Justified Tabs with different styles
  • Tabs with pills & badges
  • Vertical Tabs with icon
  • Vertical Tabs with different styles, etc...

Referrals :

Type URL
Bootstrap Page https://getbootstrap.com/docs/4.2/components/navs/#tabs
Template Page https://demos.pixinvent.com/modern-html-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
Top BorderedStyle .nav-pills-bordered Pills with border style.
Active Border Pills .nav-active-bordered-pill Active border pill style.
Toolbar Pills .nav-pill-toolbar Pills with toolbar style.
Justified Pills .nav-justified For justified pills with equal width.
Pill Animations .animated Used animate.js, so required this class for each animation you need.
Stacked Pills .nav-stacked To stack pills vertically. Each .nav-link becomes block-level, allowing for larger hit areas via mouse or tap.
Icon Fall Style .nav-iconfall For icon fall for active tab style.
Pills with Only Icon .nav-only-icon For only icons for active tab style. This will increase icon font size.
Vertical Pills .nav-vertical For vertical style of the pills.

use more options using above classes :

  • Pills with icons
  • Justified Pills with different styles
  • Pills with pills & badges
  • Stacked Pills with icon
  • Vertical Pills with different styles, icons, etc...

Referrals :

Type URL
Bootstrap Page https://getbootstrap.com/docs/4.2/components/navs/#pills
Template Page https://demos.pixinvent.com/modern-html-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.
Toolbar Animation data-animation Default is true.
Delay Show/Hide Tooltip data-delay Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type.
Pill Animations .animated Used animate.js, so required this class for each animation you need.
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.2/components/tooltips/
Template Page https://demos.pixinvent.com/modern-html-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.
Toolbar Animation data-animation Default is true.
Delay Show/Hide Popovers data-delay Delay showing and hiding the popover (ms) - does not apply to manual trigger type.
Pill Animations .animated Used animate.js, so required this class for each animation you need.
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.2/components/popovers/
Template Page https://demos.pixinvent.com/modern-html-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.
Bordered Badges .badge-border.border-* Tag with border & border color from COLOR PALETTE for badge border.
Striped Badges .badge-striped.border-[left/right]-* Striped badge with left/right border.
Delay Show/Hide Badges data-delay Delay showing and hiding the popover (ms) - does not apply to manual trigger type.
Block Badges .block Use this class for block badges.

Using above options, create some more badges as below:

  • Badges with icons
  • Only icons badges
  • Bordered badges with icons
  • Bordered icons badges
  • Striped badges with icons
  • Striped icons badges
  • Badges With Links, Dropdown, etc...

Referrals :

Type URL
Bootstrap Page https://getbootstrap.com/docs/4.2/components/badge
Template Page https://demos.pixinvent.com/modern-html-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.
Bordered Pill badges .badge-border.border-* Tag with border & border color from COLOR PALETTE for badge border.
Pill Tags With Glow .badge-glow To create glow styled pill badge.
Square Pill badges .badge-square For square style pill badges.
Pill Tags as Notification .badge-up To set pill badge to higher than other text. So that it can work with notifications also.

Using above options, create some more badges as below:

  • Pill badges with icons
  • Only icons pill badges
  • Bordered pill badges with icons
  • Bordered icons pill badges
  • Square pill badges with icons
  • Square icons pill badges
  • Pill badges With Links, Dropdown, etc...

Referrals :

Type URL
Bootstrap Page https://getbootstrap.com/docs/4.2/components/badge/#pill-badges
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/component-pill-badges.html

Progress

Stylize the HTML5 .progress> element.

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. you can stack progress bars, animate them, and place text labels over them.

  • We use the .progress as a wrapper to indicate the max value of the progress bar.
  • We use the inner .progress-bar to indicate the progress so far.
  • The .progress-bar requires an inline style, utility class, or custom CSS to set their width.
  • The .progress-bar also requires some role and aria attributes to make it accessible.

Below have options that you can use with Progress :

Progress options Class Description
Basic Progress .progress-bar Basic progress bars using this class.
Colored Progress .progress-bar.bg-* Use COLOR PALETTE for progress color.
Labeled Progress .progress-bar Add labels to your progress bars by placing text within the .progress-bar.
Striped Progress .progress-striped.bg-* Striped progress using template COLOR PALETTE.
Progress Sizes .progress-[xl/lg/sm/xs] For Extra Large, Large, Small and Extra Small sized progress.

Referrals :

Type URL
Bootstrap Page https://getbootstrap.com/docs/4.2/components/progress
Template Page https://demos.pixinvent.com/modern-html-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>

Below have options that you can use with Media Objects :

Media Objects options Class Description
Bordered Media Object .media-bordered For bordered media object to each media list.
Media Header .media-head Header section for media object.
Round Media Objects .rounded-circle For round media object.
Linked Media .media-linked For linked media list
Media Object Positions .media-[left/right] For media align to left/right.
Media Object Vertical Positions .media-[middle/bottom] For vertical media align to middle/bottom.

Other options using media-ibjects can be like :

  • Nested Media List
  • Media Object with Notation Text
  • Media Object with tags & pills
  • Icon as Media Object
  • Status Indicator to Media Object
  • Notification to Media Object, etc...

Referrals :

Type URL
Bootstrap Page https://getbootstrap.com/docs/4.2/components/media-object/
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/component-media-objects.html

Scrollable

1. Call the perfectScrollbar-function after the page has loaded
                
                    const ps = new PerfectScrollbar('#container');

Below have options that you can use with Scrollable :

Scrollable options Class Description
Vertical Scroll .vertical-scroll To add vertical scrollbar to content.
Horizontal Scroll .horizontal-scroll To add horizontal scrollbar to content.
Always visible scroll .always-visible To make the scrollbar always visible. Scrollbars are shown on hover and hidden by default.
Scrollbar With Margins .large-margin To have large margins on both sides.

Some more options with scrollable are :

  • Minimum Scrollbar Length
  • Different scrollbar handlers:'click-rail', 'drag-scrollbar', 'keyboard', 'wheel', 'touch'
  • Wheel speed changes, etc...

Referrals :

Type URL
Plugin Page https://github.com/noraesae/perfect-scrollbar/
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/component-scrollable.html

Spinners

Spinners contains Icon spinners with different styles.

Use .spinner class to icon for spin effect.

Referrals :

Type URL
Template Page https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-menu-template/component-spinners.html

Toast

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.

Below have options that you can use with Toasts :

Toasts options Class Description
Toast Container .toast To add notification toast.
Toast Header .toast-header To add toast header.
Toast Body .toast-body To ass toast body.

Referrals :

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

Bootstrap Spinners

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.

Below have options that you can use with Bootstrap Spinner :

Bootstrap spinner options Class Description
Spinner Container .spinner-border To add loading spinner.
Spinner Grow .spinner-grow To add grow spinner.
Spinner color .text-{colorName} To change spinner color (ie. primary, secondary, warning, info, success, dark, danger).

Referrals :

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