Use to position content on top of other content.

Use to allow parts of one webpage to load or update within a second webpage (repurpose content).

No quick preview available.
To see this feature in action, go to its topic page.

Use to provide contextual feedback messages for typical user actions. Choose from a handful of available and flexible alert messages.

Use to align text to the left, centre or right. Or, use to align a block of content or an image to the centre.

Left aligned text

Center aligned text/image

Right aligned text

No quick preview available.
To see this feature in action, go to its topic page.

Use badges (numerical indicators) to highlight the number of updates, new or unread items associated with a link.

Link text 42

Link text 20

Link text 5

Use to add single or multiple borders to design elements in order to separate or call attention to content. Additionally, remove default borders or sharpen corners that appear in design components such as a "well".

Use buttons to create a call to action that entices the user to submit content from a form. Also, use buttons also take users to a webpage that provides additional information.

• Default
• Primary
• Success
• Info
• Warning
• Danger
• Link

• A B
• C D E
• F

Use the Calendar of events interface to navigate a chronological list of events.

No quick preview available.
To see this feature in action, go to its topic page.

Use a carousel to tab or cycle through content in a slide show format.

No quick preview available.
To see this feature in action, go to its topic page.

Use to dynamically generate charts and graphs from a table.

No quick preview available.
To see this feature in action, go to its topic page.

Use to emulate source code and display it in monospace font.

Use to provide syntax and highlight source code snippets within an HTML page.

<div class="container-fluid">
<div class="row">
...
</div>
</div>

Use colour as a presentation element for decorative purposes to convey information.

• Muted
• Primary
• Primary
• Success
• Success
• Info
• Info
• Warning
• Warning
• Danger
• Danger

Use a country identifier, a basic AjaxLoader wrapper, to  insert Ajaxed-in content, based on a visitor's country (determined by Free Geo IP).

No quick preview available.
To see this feature in action, go to its topic page.

Use data inview to display an overlay when a section moves out of the viewport.

No quick preview available.
To see this feature in action, go to its topic page.

Use to allow a webpage to specify different image sources to display, based on media queries.

No quick preview available.
To see this feature in action, go to its topic page.

Use to enhance a data table and allow sorting, filtering, searching, pagination and other such features.

No quick preview available.
To see this feature in action, go to its topic page.

Use to add auto-complete functionality to specific input fields; dynamically display a list of words that match a datalist.

( Tip: Type 'w' and cities will appear)

Use to update the contents of a datalist element dynamically, based upon user input.

No quick preview available.
To see this feature in action, go to its topic page.

Use to provide an interface to select a date in a form.

No quick preview available.
To see this feature in action, go to its topic page.

Dismissible content A

Regular static content

Dismissible content B

Regular static content

Use to make grid cells the same height. Make the inner elements (panels, wells and so forth) inherit the height from the parent grid.

Use to create collapsible expand and hide widgets that a user can select to show or hide content.

• Example 1

  Content goes here

• Example 2

  Content goes here

No quick preview available.
To see this feature in action, go to its topic page.

No quick preview available.
To see this feature in action, go to its topic page.

Use a feed widget to aggregate and display the entries from one or more web feeds on a webpage. Supported Web feed formats are Atom, RSS, and Media RSS.

No quick preview available.
To see this feature in action, go to its topic page.

Use a float to change the normal flow of an element. Push the element to the left or right of its container, where text and inline elements wrap around it.

Floated left

Floated right

Use a footnote to note a reference, citation, or comment that provides details about something on that page. It is non-critical content that relates to the main text, and is always at the bottom of the page.

Use a geomap to display a dynamic map and overlay information from additional sources.

No quick preview available.
To see this feature in action, go to its topic page.

Use a grid system (a series of rows and columns that house content) to create page layouts.

Use a heading to title a section of content that immediately follows it. Headings are large, bold, concise text that are hierarchical in nature.

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading

h6 heading

Use one of the two icon sets, Glyphicons or Font Awesome for decorative purposes. Icons are glyphs − picture-based fonts, similar to wingdings. They do not convey meaning, unlike traditional fonts. Therefore, real text must accompany the icon to ensure accessibility requirements are met. Make the text visible or invisible, as long as it is present.

Use images to visually represent a noun (person, place, thing) or a verb (action). An image is a static two dimensional visual artifact that is a type of non-text content. It is classified as decorative, simple, complex, or an image of text.

Use to show or hide content − it all depends on what you need to accomplish. There are styles specific to assistive technology (aid screen-reader users), responsive design (view from small to large devices), general usage (use of toggle tabs), and print (print only necessary info).

No quick preview available.
To see this feature in action, go to its topic page.

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

Use to mimic the keys of a computer keyboard.

Press Shift

Press Ctrl

Press Enter

Use the appropriate label to describe and highlight text-based (non-numerical) information.

• Text Default
• Text Primary
• Text Success
• Text Info
• Text Warning
• Text Danger

Use a link (text and/or image) to take a user to another webpage, jump to another location within the same webpage, or perform a user-control function determined by client-side scripting (JavaScript).

Use list group components to contain related content.

Use to display a number of connected items in a consecutive manner. Typically list items appear one below the other.

• Item
• Item
  • Sub-item

1. Item
2. Item
   1. Sub-item

Item

Description of item

Use to display mathematical formulas (not variables within a sentence) with MathML.

Use to increase or decrease the proximity of one object to another. This adjusts the white space between two elements to suggest whether items are related or unrelated. Additionally, these classes allow grid and non-grid content to exist in the same row.

Use to display a value in a range when there is a known minimum and maximum value (for example, the height of something).

• 75% (normal)
• 90% (too high)
• 15% (too low)

Use a modal pop-up window for information that stays in front of the original window.

Launch modal popup

Use to provide an accessible multimedia player to embed video and audio into webpages.

No quick preview available.
To see this feature in action, go to its topic page.

Use to adjust the opacity of any element.

Use to position one element over another.

Launch overlay

Use a pagination index for long documents that are best broken up over several pages. A user can select a specific page within a document through either the "Next", "Previous", or (if present) the numeric pagination hyperlinks.

• Previous
• 1
• 2
• 3
• Next

• Previous
• Next

Use to create a visual grouping of content. Panels have colour themed options, as well as offer a distinct header and footer.

Use to style a navigation list and to draw focus to an active link.

No quick preview available.

The progress bar is used to provide up-to-date feedback on the progress of a workflow or action. Meter is used to display a value in a range when there is a known minimum and maximum value (scalar measurement).

No quick preview available.

Use to display the progress of a task.

• 22%
• 66%

Use quotations to cite a group of words by someone other than the original author or speaker.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Use to reflow and wrap non-grid content around and below a grid cell (box of content).

No quick preview available.
To see this feature in action, go to its topic page.

Use to provide session timeout and inactivity timeout functionality.

No quick preview available.
To see this feature in action, go to its topic page.

Use to override the default size of any text (make text large or small).

• Size h1
• Size h2
• Size lead
• Size h3
• Size h4
• Size h5
• Size h6
• Size small

Use to display a slider control bar.

Use this web editor tool to produce tables that conform to WCAG 2.0. This tool helps to identify relationship errors within a complex table.

No quick preview available.
To see this feature in action, go to its topic page.

Use to organize data into rows and columns in order to create data cells.

No quick preview available.
To see this feature in action, go to its topic page.

Use to show multiple aspects of related content in different panes, side by side.

This is marked text

This is deleted text

This is strikethrough text

Do not use inserted text

Do not use underlined text

No quick preview available.
To see this feature in action, go to its topic page.

No quick preview available.
To see this feature in action, go to its topic page.

No quick preview available.
To see this feature in action, go to its topic page.

No quick preview available.
To see this feature in action, go to its topic page.

No quick preview available.
To see this feature in action, go to its topic page.

No quick preview available.
To see this feature in action, go to its topic page.

Use to display images in a lightbox, either individually or as part of a gallery.

One image

Gallery

Use to create a content transition with optional states (fade in, fade out, slide right or slide left).

No quick preview available.
To see this feature in action, go to its topic page.

Use to implement and embed Twitter timelines.

No quick preview available.
To see this feature in action, go to its topic page.

Use when there is reference to a variable like “x.”, "n" or "y" within a sentence (a non-mathematical phrase). New

No quick preview available.
To see this feature in action, go to its topic page.

No quick preview available.
To see this feature in action, go to its topic page.

No quick preview available.
To see this feature in action, go to its topic page.

No quick preview available.
To see this feature in action, go to its topic page.

No quick preview available.
To see this feature in action, go to its topic page.

Look, I'm in a well!

Look, I'm in a small well!

Default:

This year's deadline to filing your taxes is April 30.

With .nowrap:

This year's deadline to filing your taxes is April 30.

With .wb-elps:

This year's deadline to filing your taxes is April 30.

Use to provide alternate white and grey stripes to table rows in horizontal or multiple directions. This helps to visually connect horizontal with vertical data.

No quick preview available.
To see this feature in action, go to its topic page.