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
Design & Graphics
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

Duotone Icons

Front vector duotone duotone icons.
Image Description

Illustrations

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

Accordion

Vertically collapsing accordions.
Image Description

Alerts

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

Avatars

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

Badge

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

Breadcrumb

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

Buttons

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

Cards

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

Collapse

Toggle the visibility of content across your project.
Image Description

Column Divider

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

Devices

Beautifully demonstrate your contents in phone, laptop or tablet device mockups.
Image Description

Divider

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

Dropdowns

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

Icons

Static icon styles.
Image Description

List Group

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

Lists

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

Legend Indicator

A component to indicate properties of elements.
Image Description

Modal

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

Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more.
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

Pagination

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

Popovers

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

Progress

Documentation and examples for using custom progress bars.
Image Description

Shapes

Shapes to use as background cover elements.
Image Description

Spinners

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

Steps

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

Tab

Tabbable panes.
Image Description

Tables

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

Text Highlight

Gradient highlight/underline.
Image Description

Toasts

Push notifications to your visitors with a toast.
Image Description

Tooltips

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

Typography

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

Header (navbar)

Powerful and responsive navigation header, the navbar.
Image Description

Navs

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

Mega Menu

A powerful, and responsive navigation mega menu.
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.
Basic forms
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

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

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

Advanced Select

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

File Attachments

File attachment library allow users to attach files.
Image Description

Drag' n' Drop File Uploads

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

WYSIWYG Editor (Quill)

Text editor.
Image Description

Quantity Counter

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

Input Mask

A plugin to make masks on form fields.
Image Description

Step Forms (Wizard)

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

Range Slider (noUiSlider)

A JavaScript range slider.
Image Description

Add Field

Add Field dynamic fields creation.
Image Description

Toggle Password

Show or hide password field.
Image Description

Count Characters

Show count characters in the field.
Image Description

Toggle Switch

Switch from one value to another.
Image Description

Toggle State

Toggle from one value to another.
Image Description

Switch

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

Fullscreen Lightbox

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

Video Background

Creates responsive video or slideshow embeds based on the width of the parent by making an intrinsic ratio that scales on any device.
Image Description

Video Player

Documentation and examples of the video player components.
Image Description

Swiper

Most modern mobile touch slider.
Others
Image Description

Maps (Leaflet)

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

Chart.js

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

Circles (Pie chart)

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

Sticky Block

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

Countdown

A simple JavaScript API for producing an accurate, intuitive description of the timespan between two Date instances.
Image Description

Sorting (Shuffle.js)

Categorize, sort, and filter a responsive grid of items powered by Shuffle.js.
Image Description

Go To

Smooth scroll back to the top of the page.
Image Description

Show Animation

A plugin to make boring show/hide blocks elegant with the opening/closing animation effects.
Image Description

Typed.js

Decorate your website with Typed.js is a library that types, allowing to showcase more texts in a sentence.