@@include("@@autopath/partials/docs/docs-sidebar.html", { "link": "index.html" })

Boost your idea with native components.

Components are the reusable building blocks of our design system to create patterns and intuitive user experiences.

68

Components

40

Plugins

750+

Combinations
Image Description Image Description
Design & Graphics
Image Description Image Description

Bootstrap Icons

Free, high quality, open source icon library with over 1,300 icons. Include them anyway you like—SVGs, SVG sprite, or web fonts.
Image Description Image Description

Illustrations

High-quality and eye-catching scenes for any kind of projects from websites to applications.
Components
Image Description Image Description

Accordion

Vertically collapsing accordions.
Image Description Image Description

Alerts

An alert lets users know when important information is available or when an action is required.
Image Description Image Description

Avatars

An avatar is a visual representation of a user or entity.
Image Description Image Description

Badge

A badge is a visual indicator for numeric values such as tallies and scores.
Image Description Image Description

Breadcrumb

Breadcrumbs are a navigation system used to show a user's location in a site or app.
Image Description Image Description

Buttons

A button triggers an event or action. They let users know what will happen next.
Image Description Image Description

Cards

A flexible and extensible content container with multiple variants and options.
Image Description Image Description

Collapse

Toggle the visibility of content across your project.
Image Description Image Description

Column Divider

Separate groups of related menu items with a vertical divider.
Image Description Image Description

Divider

Separate groups of related menu items with a vertical divider.
Image Description Image Description

Dropdowns

A dropdown menu displays a list of actions or options to a user.
Image Description Image Description

Icons

Static icon styles.
Image Description Image Description

List Group

List groups are a flexible and powerful component for displaying a series of content.
Image Description Image Description

Lists

Lists are a flexible and powerful component for displaying a series of content.
Image Description Image Description

Legend Indicator

A component to indicate properties of elements.
Image Description Image Description

Modal

A modal dialog displays content that requires user interaction, in a layer above the page.
Image Description Image Description

Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more.
Image Description Image Description

Page Header

A page header defines the top of a page. It contains a title and can be optionally combined with breadcrumbs.
Image Description Image Description

Pagination

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
Image Description Image Description

Popovers

Add Bootstrap popovers, like those found in iOS, to any element on your site.
Image Description Image Description

Progress

Documentation and examples for using custom progress bars.
Image Description Image Description

Shapes

Shapes to use as background cover elements.
Image Description Image Description

Sliding Image

Sliding background effect.
Image Description Image Description

Spinners

A spinner is an animated spinning icon that lets users know content is being loaded.
Image Description Image Description

Steps

A component that displays content as a process with defined by user milestones.
Image Description Image Description

Tab

Tabbable panes.
Image Description Image Description

Toasts

Push notifications to your visitors with a toast.
Image Description Image Description

Tooltips

A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
Image Description Image Description

Typography

Documentation and examples for Front typography, including global settings, headings, body text, lists, and more.
Navbars
Image Description Image Description

Header (navbar)

Powerful and responsive navigation header, the navbar.
Image Description Image Description

Navs

Documentation and examples for how to use navigation components.
Image Description Image Description

Mega Menu

A powerful, and responsive navigation mega menu.
Image Description Image Description

Navbar Vertical Aside

Vertical navbar.
Image Description Image Description

Scrollspy

Automatically update Front navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
Tables
Image Description Image Description

Tables

Documentation and examples for opt-in styling of tables with Bootstrap.
Image Description Image Description

Datatables

Showcase your latest works with a plugin that provides powerful portfolio system.
Image Description Image Description

Sticky Header

Make a table thead sticky to the top of a page, card or any other content.
Basic forms
Image Description Image Description

Basic Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Image Description Image Description

Checks & Switches

A checkbox is an input control that allows a user to select one or more options from a number of choices.
Image Description Image Description

Input Group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
Advanced forms
Image Description Image Description

Advanced Select

Select allows users to make a single selection or multiple selections from a list of options.
Image Description Image Description

Datepicker (Flatpickr)

Flatpickr is a lightweight and powerful datetime picker.
Image Description Image Description

Date Range Picker

A JavaScript component for choosing date ranges, dates and times.
Image Description Image Description

Calendar (Fullcalendar)

The most popular full-sized JavaScript Calendar.
Image Description Image Description

File Attachments

File attachment library allow users to attach files.
Image Description Image Description

Drag' n' Drop File Uploads

Drag'n'drop file-attach uploads with image previews.
Image Description Image Description

WYSIWYG Editor (Quill)

Text editor.
Image Description Image Description

Quantity Counter

Quantity counter input idea for Shop systems or so.
Image Description Image Description

Copy to Clipboard

A modern approach to copy text to clipboard.
Image Description Image Description

Input Mask

A plugin to make masks on form fields.
Image Description Image Description

Step Forms (Wizard)

Create a multi-step form to get more leads and increase engagement.
Image Description Image Description

Add Field

Add Field dynamic fields creation.
Image Description Image Description

Toggle Password

Show or hide password field.
Image Description Image Description

Count Characters

Show count characters in the field.
Image Description Image Description

Form Search

Form search plugin with clearing value options.
Image Description Image Description

Toggle Switch

Switch from one value to another.
Image Description Image Description

Google reCAPTCHA

It is for switching from one setting to another.
Charts
Image Description Image Description

Chart.js

Simple yet flexible JavaScript charting for designers & developers.
Image Description Image Description

Counter

Animate a number from zero (counting up towards it).
Image Description Image Description

Circles.js (Pie Chart)

A lightweight JavaScript library that generates circular graphs in SVG.
Others
Image Description Image Description

Fullscreen Lightbox

Simple and powerful lightbox for displaying photos, HTML5 or YouTube videos in clean overlaying box.
Image Description Image Description

Maps (Leaflet)

Mobile-friendly interactive map library powered by Leaflet.
Image Description Image Description

Maps (JSVectorMap)

A lightweight JavaScript library for creating interactive maps and pretty data visualization.
Image Description Image Description

SortableJS

SortableJS JavaScript library for reorderable drag-and-drop lists.
Image Description Image Description

Sticky Block

This is for making any block floating on your page.
Image Description Image Description

Go To

Smooth scroll back to the top of the page.