Components

This library is based on Bootstrap v4. https://v4-alpha.getbootstrap.com/
Over a dozen reusable components built to provide buttons, dropdowns, input groups, navigation, alerts, and much more.

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
  • Alert Success

    Well done! You successfully read this important alert message.

    1
    2
    3
    HTML
    <div class="alert alert-success" role="alert"> <strong>Well done!</strong> You successfully read this important alert message. </div>
  • Heads up Alert

    Heads up! This alert needs your attention, but it's not super important.

    1
    2
    3
    HTML
    <div class="alert alert-info" role="alert"> <strong>Heads up!</strong> This alert needs your attention, but it's not super important. </div>

Badge

Small and adaptive tag for adding context to just about any content. Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Breadcrumb

Indicate the current page’s location within a navigational hierarchy. Separators are automatically added in CSS through :before and :content.

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.

Group Buttons

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

Card

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

Carousel

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators. 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.). Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.

Collapse

The Bootstrap collapse plugin allows you to toggle content on your pages with a few classes thanks to some helpful JavaScript.

Dropdowns

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision.

Figures

Anytime you need to display a piece of content—like an image with an optional caption, consider using a <figure>. Use the included .figure, .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements. Images in figures have no explicit size, so be sure to add the .img-fluid class to your <img> to make it responsive.

Forms

Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.

Input Group

Easily extend form controls by adding text, buttons, or button groups on either side of textual <input>s.

Jumbotron

A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

List Group

List groups are a flexible and powerful component for displaying a series of content. List group items can be modified and extended to support just about any content within. They can also be used as navigation with the right modifier class.

Media Object

The media object helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media. Plus, it does this with only two required classes thanks to flexbox.

Modal

Modals are streamlined, but flexible dialog prompts powered by JavaScript. They support a number of use cases from user notification to completely custom content and feature a handful of helpful subcomponents, sizes, and more.

Navs

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.

Navbar

The navbar is a wrapper that positions branding, navigation, and other elements in a concise header. It’s easily extensible and, thanks to our Collapse plugin, can easily integrate responsive behaviors.
Navbars come with built-in support for a handful of sub-components. Choose from the following as needed: .navbar-brand for your company, product, or project name. .navbar-nav for a full-height and lightweight navigation (including support for dropdowns). .navbar-toggler for use with our collapse plugin and other navigation toggling behaviors. .form-inline for any form controls and actions. .navbar-text for adding vertically centered strings of text. .collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint. Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the md (medium) breakpoint.

Pagination

Pagination links indicate a series of related content exists across multiple pages. Typically these are used where a multi-page approach to long lists of content improves general performance, such as in search results or inboxes.
We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies. In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label for the <nav> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".

Popovers

Add small overlay content, like those found in iOS, to any element for housing secondary information.

Progress

Scrollspy

The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.

Tables

Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes.
Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.

Tooltips

Comming soon.Inspired by the excellent Tipsy jQuery plugin written by Jason Frame. Tooltips are an updated version, which don’t rely on images, use CSS3 for animations, and data-attributes for local title storage.

This Design System is empty

Click Edit in the top right corner to start working on it.