Start using alerts with no worries!

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

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 :

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

Using above options, create some combinations like:

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

Referrals :

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.

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 :

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.

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

Social Buttons

Get Social buttons classes and descriptions below

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 :

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 :

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 :

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>
                
            

Using above options, create some combinations like:

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

Referrals :

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 :

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 -->
                
            

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 :

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 :

Pager :

Referrals :

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 :

use more options using above classes :

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

Referrals :

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 :

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 :

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 :

Referrals :

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 :

Referrals :

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

Below have options that you can use with 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 :

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

Below have options that you can use with Pill badges :

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 :

Stylize the HTML5 <progress> element.

Below have options that you can use with Progress :

Referrals :

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 :

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 :

1. Call the perfectScrollbar-function after the page has loaded

                
                    const ps = new PerfectScrollbar('#container');
                
            

Below have options that you can use with Scrollable :

Some more options with scrollable are :

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

Referrals :

Spinners contains Icon spinners with different styles.

Use .spinner class to icon for spin effect.

Referrals :