Card for Accordions

Accordions chunk, conceal and reveal content effectively.

Accordions

Card for Alerts

Alerts and notes are useful to make information pop.

Alerts

Card for Badges

Badges pop when not overused, adding meaning contextually.

Badges

Card for Blockquotes

Blockquotes are brief, impactful textual excerpts.

Blockquotes

Card for Breadcrumbs

Breadcrumbs are a key wayfinding device for users.

Breadcrumbs

Card for Buttons

Buttons foreground important features or calls to action.

Buttons

Card for Cards

Cards help chunk and emphasize information visually.

Cards

Card for Carousels

Carousels provide a rotating slideshow effect.

Carousels

Card for Checklists

Easily track your progress with checklist panels.

Checklists

Card for Code Wells

Code wells display computer languages in a readable format.

Code Wells

Card for Columns

Use columns to structure your page content as a grid.

Columns

Card for Dropdowns

Dropdowns organize content and provide additional options.

Dropdowns

Card for Images

Images support and enhance the meaning on the page.

Images

Card for Image Grids

Image grids juxtapose images for comparison / contrast.

Image Grids

Card for Jumbotrons

Jumbotrons create a prominent visual introductory focus to a page.

Jumbotrons

Card for Lists

Use lists to better present groups of related data.

Lists

Card for Media Lists

Use media lists to organize textual data visually.

Media Lists

Card for Modals

Modals afford hiding and showing extended content.

Modals

Card for Navs

Simple navs allow users to navigate your site or your page.

Navs

Card for Navbars

Navbars provide users different ways to navigate your site.

Navbars

Card for Pagination

Pagination helps chunk your pages more meaningfully.

Pagination

Card for Popovers

Popovers easily hide and show supplementary information.

Popovers

Card for Progress Bars

Progress bars inform users of progress on longer processes.

Progress Bars

Card for Scrollspy

Scrollspy updates your navigation element based on page position.

Scrollspy

Card for Symbols

Symbols help users quickly, efficiently make meaning.

Symbols

Card for Tables

Use tables to display data for comparison and contrast.

Tables

Card for Tabs and Pills

Use tabs / pills to conceal-and-reveal related content.

Tabs & Pills

Card for Toast

Toast are short alerts useful for pushing notifications to user.

Toast

Card for Tooltips

Tooltips provide contextual information on mouse-over.

Tooltips

Card for Toast

A group of the most common properties required by developers.

Utility Classes

Card for Video

Video is engaging and can facilitate active learning of material.

Videos