Component Documetation

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.

Referrals :

Type	URL
Bootstrap Link	http://v4-alpha.getbootstrap.com/components/alerts/
Template Page	https://pixinvent.com/free-bootstrap-template/robust-lite/html/ltr/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.
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.

Referrals :

Type	URL
Bootstrap Buttons	http://v4-alpha.getbootstrap.com/components/buttons/
Button Groups	http://v4-alpha.getbootstrap.com/components/button-group/
Template Page	https://pixinvent.com/free-bootstrap-template/robust-lite/html/ltr/component-buttons-basic.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, etc...

Referrals :

Type	URL
Bootstrap Page	http://v4-alpha.getbootstrap.com/components/carousel/
Template Page	https://pixinvent.com/free-bootstrap-template/robust-lite/html/ltr/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	http://v4-alpha.getbootstrap.com/components/collapse/
Template Page	https://pixinvent.com/free-bootstrap-template/robust-lite/html/ltr/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.

Referrals :

Type	URL
Bootstrap Page	http://v4-alpha.getbootstrap.com/components/dropdowns/
Template Page	https://pixinvent.com/free-bootstrap-template/robust-lite/html/ltr/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	http://v4-alpha.getbootstrap.com/components/list-group/
Template Page	https://pixinvent.com/free-bootstrap-template/robust-lite/html/ltr/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	http://v4-alpha.getbootstrap.com/components/modal/
Template Page	https://pixinvent.com/free-bootstrap-template/robust-lite/html/ltr/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
Pagination Sizes	`.pagination-[lg/sm]`	Large and small pagination styles.

Referrals :

Type	URL
Bootstrap Page	http://v4-alpha.getbootstrap.com/components/pagination/
Template Page	https://pixinvent.com/free-bootstrap-template/robust-lite/html/ltr/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.
Nav divider	`.dropdown-divider`	To set divider between sections.

Referrals :

Type	URL
Bootstrap Page	http://v4-alpha.getbootstrap.com/components/navs/#base-nav
Template Page	https://pixinvent.com/free-bootstrap-template/robust-lite/html/ltr/component-navs/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
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	http://v4-alpha.getbootstrap.com/components/navs/#tabs
Template Page	https://pixinvent.com/free-bootstrap-template/robust-lite/html/ltr/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
Justified Pills	`.nav-justified`	For justified pills with equal width.
Stacked Pills	`.nav-stacked`	To stack pills vertically. Each `.nav-link` becomes block-level, allowing for larger hit areas via mouse or tap.

Referrals :

Type	URL
Bootstrap Page	http://v4-alpha.getbootstrap.com/components/navs/#pills
Template Page	https://pixinvent.com/free-bootstrap-template/robust-lite/html/ltr/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`.
Tooltip 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.
Supports HTML	`data-html`	If this value is true, you can use html in `data-original-title` text.

Referrals :

Type	URL
Bootstrap Page	http://v4-alpha.getbootstrap.com/components/tooltips/
Template Page	https://pixinvent.com/free-bootstrap-template/robust-lite/html/ltr/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`.
Popovers 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.
Supports HTML	`data-html`	If this value is true, you can use html in `data-content` text.

Referrals :

Type	URL
Bootstrap Page	http://v4-alpha.getbootstrap.com/components/popovers/
Template Page	https://pixinvent.com/free-bootstrap-template/robust-lite/html/ltr/component-popovers.html

Tags options	Class	Description
Basic Tags	`.tag-*`	Use any template color from COLOR PALETTE that you like to add for tag.

Type	URL
Bootstrap Page	http://v4-alpha.getbootstrap.com/components/tag
Template Page	https://pixinvent.com/free-bootstrap-template/robust-lite/html/ltr/component-tag.html

Pill tags

Use the .tag-pill modifier class with .tag class to make pill tags.

Below have options that you can use with Pill tags :

Pill tags options	Class	Description
Basic Pill tags	`.tag-*`	Use any template color from COLOR PALETTE that you like to add for pill tag.

Referrals :

Type	URL
Bootstrap Page	http://v4-alpha.getbootstrap.com/components/tag/#pill-tags
Template Page	https://pixinvent.com/free-bootstrap-template/robust-lite/html/ltr/component-pill-tags.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-*`	Use COLOR PALETTE for progress color.
Striped Progress	`.progress-striped.progress-*`	Striped progress using template COLOR PALETTE.

Referrals :

Type	URL
Bootstrap Page	http://v4-alpha.getbootstrap.com/components/progress
Template Page	https://pixinvent.com/free-bootstrap-template/robust-lite/html/ltr/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	http://v4-alpha.getbootstrap.com/layout/media-object/
Template Page	https://pixinvent.com/free-bootstrap-template/robust-lite/html/ltr/component-media-objects.html

Components Navigation

Back to top

Alert

Start using alerts with no worries!

Buttons

Carousel

Collapse

Example Code:

List Group

Example Code:

Example Code:

Labelling the pagination component

Navs

Tabs

Pills

Tooltips

Popovers

Tags

Pill tags

Progress

Media Objects