Boost your idea with native components.

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

68

组件s

40

Plugins

750+

Combinations
图片描述内容
设计 & Graphics
图片描述内容

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.
图片描述内容

Duotone Icons

Front vector duotone duotone icons.
图片描述内容

Illustrations

High-quality and eye-catching scenes for any kind of projects from websites to applications.
组件s
图片描述内容

Accordion

Vertically collapsing accordions.
图片描述内容

Alerts

An alert lets users know when important information is available or when an action is required.
图片描述内容

Avatars

An avatar is a visual representation of a user or entity.
图片描述内容

Badge

A badge is a visual indicator for numeric values such as tallies and scores.
图片描述内容

面包屑

Breadcrumbs are a navigation system used to show a user's location in a site or app.
图片描述内容

Buttons

A button triggers an event or action. They let users know what will happen next.
图片描述内容

Cards

A flexible and extensible content container with multiple variants and options.
图片描述内容

Collapse

Toggle the visibility of content across your project.
图片描述内容

Column Divider

Separate groups of related menu items with a vertical divider.
图片描述内容

Devices

Beautifully demonstrate your contents in phone, laptop or tablet device mockups.
图片描述内容

Divider

Separate groups of related menu items with a vertical divider.
图片描述内容

Dropdowns

A dropdown menu displays a list of actions or options to a user.
图片描述内容

Icons

Static icon styles.
图片描述内容

List Group

List groups are a flexible and powerful component for displaying a series of content.
图片描述内容

Lists

Lists are a flexible and powerful component for displaying a series of content.
图片描述内容

Legend Indicator

A component to indicate properties of elements.
图片描述内容

Modal

A modal dialog displays content that requires user interaction, in a layer above the page.
图片描述内容

Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more.
图片描述内容

Page Header

A page header defines the top of a page. It contains a title and can be optionally combined with breadcrumbs.
图片描述内容

Pagination

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
图片描述内容

Popovers

Add Bootstrap popovers, like those found in iOS, to any element on your site.
图片描述内容

Progress

开发文档 and examples for using custom progress bars.
图片描述内容

Shapes

Shapes to use as background cover elements.
图片描述内容

Spinners

A spinner is an animated spinning icon that lets users know content is being loaded.
图片描述内容

Steps

A component that displays content as a process with defined by user milestones.
图片描述内容

Tab

Tabbable panes.
图片描述内容

Tables

开发文档 and examples for opt-in styling of tables with Bootstrap.
图片描述内容

Text Highlight

Gradient highlight/underline.
图片描述内容

Toasts

Push notifications to your visitors with a toast.
图片描述内容

Tooltips

A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
图片描述内容

Typography

开发文档 and examples for Front typography, including global settings, headings, body text, lists, and more.
Navbars
图片描述内容

Header (navbar)

Powerful and responsive navigation header, the navbar.
图片描述内容

Navs

开发文档 and examples for how to use navigation components.
图片描述内容

Mega Menu

A powerful, and responsive navigation mega menu.
图片描述内容

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
图片描述内容

Basic Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
图片描述内容

Checks & Switches

A checkbox is an input control that allows a user to select one or more options from a number of choices.
图片描述内容

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.
高级 forms
图片描述内容

高级 Select

Select allows users to make a single selection or multiple selections from a list of options.
图片描述内容

File Attachments

File attachment library allow users to attach files.
图片描述内容

Drag' n' Drop File Uploads

Drag'n'drop file-attach uploads with image previews.
图片描述内容

WYSIWYG Editor (Quill)

Text editor.
图片描述内容

Quantity Counter

Quantity counter input idea for Shop systems or so.
图片描述内容

Input Mask

A plugin to make masks on form fields.
图片描述内容

Step Forms (Wizard)

Create a multi-step form to get more leads and increase engagement.
图片描述内容

Range Slider (noUiSlider)

A JavaScript range slider.
图片描述内容

Add Field

Add Field dynamic fields creation.
图片描述内容

Toggle Password

Show or hide password field.
图片描述内容

Count Characters

Show count characters in the field.
图片描述内容

Toggle Switch

Switch from one value to another.
图片描述内容

Toggle State

Toggle from one value to another.
图片描述内容

Switch

It is for switching from one setting to another.
Media
图片描述内容

Fullscreen Lightbox

Simple and powerful lightbox for displaying photos, HTML5 or YouTube videos in clean overlaying box.
图片描述内容

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.
图片描述内容

Video Player

开发文档 and examples of the video player components.
图片描述内容

Swiper

Most modern mobile touch slider.
Others
图片描述内容

Maps (Leaflet)

Mobile-friendly interactive map library powered by Leaflet.
图片描述内容

Chart.js

Simple yet flexible JavaScript charting for designers & developers.
图片描述内容

Circles (Pie chart)

A lightweight JavaScript library that generates circular graphs in SVG.
图片描述内容

Sticky Block

This is for making any block floating on your page.
图片描述内容

Countdown

A simple JavaScript API for producing an accurate, intuitive description of the timespan between two Date instances.
图片描述内容

Sorting (Shuffle.js)

Categorize, sort, and filter a responsive grid of items powered by Shuffle.js.
图片描述内容

Go To

Smooth scroll back to the top of the page.
图片描述内容

Show Animation

A plugin to make boring show/hide blocks elegant with the opening/closing animation effects.
图片描述内容

Typed.js

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