• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

Linked items

Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.

Links and button items

Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <li>s or <div>s) don’t provide a click or tap affordance.

Be sure to not use the standard .btn classes here.

Disabled items

Add .disabled to a .list-group-item to gray it out to appear disabled.

Contextual classes

Use contextual classes to style list items with a stateful background and color.

• Dapibus ac facilisis in
• This is a primary list group item
• This is a secondary list group item
• This is a success list group item
• This is a danger list group item
• This is a warning list group item
• This is a info list group item
• This is a light list group item
• This is a dark list group item

Custom content

Add nearly any HTML within, even for linked list groups like the one below.

Product finder

Product search

Panel with heading

Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading.

For proper link coloring, be sure to place links in headings within .panel-title.

Panel with footer

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Contextual alternatives

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

SDS search

Single button dropdowns

Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

Tabs

Note the .nav-tabs class requires the .nav base class.

• Home
• Profile
• Messages

Pills

Take that same HTML, but use .nav-pills instead:

• Home
• Profile
• Messages

Pills Vertical

Pills are also vertically stackable. Just add .nav-stacked.

• Active
• Link
• Link
• Disabled

Fill and justify

Easily make tabs or pills equal widths of their parent at screens wider than 768px with .nav-justified. On smaller screens, the nav links are stacked.

• Active
• Longer nav link
• Link
• Disabled

• Active
• Longer nav link
• Link
• Disabled

Using dropdowns

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

Tabs with dropdowns

• Home
• Help
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

Pills with dropdowns

• Home
• Help
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.

Dismissible alerts

Build on any alert by adding an optional .alert-dismissible and close button.

Requires JavaScript alert plugin

For fully functioning, dismissible alerts, you must use the alerts JavaScript plugin.

Ensure proper behavior across all devices

Be sure to use the <button> element with the data-dismiss="alert" data attribute.

Component-level alerts

Fancybox Modal Examples

Here is a template for a fancybox modal (popup) that opens and closes using the jquery.fancybox script, but uses the built-in Bootstrap css properties to style the elements of the modal - ie. head, body, footer.

This link opens the modal using the class fb_dialog:

Click Me to open the modal dialog.

The example above is comfigured as a login modal and provides and example of building a simple form into the modal.

Generic modal example

Click Me to open generic modal dialog.

Example of the modal in visible form:

More Examples

DOM Message
The spinny "Processing" dialog. Use only modal-body, modal-header or modal-footer.

Open DOM message

Session Expired message
One of several "Your session has expired" messages here. No modal-header, just modal-body and modal-footer.

Open sessionSoftAlert

Width Classes

Add the appropriate class found below to your Fancybox content <div> to set a max-width.

class="modal-300" - sets popup width to 300px
class="modal-400" - sets popup width to 400px
class="modal-500" - sets popup width to 500px
class="modal-600" - sets popup width to 600px
class="modal-700" - sets popup width to 700px
class="modal-800" - sets popup width to 800px
class="modal-900" - sets popup width to 900px
class="modal-1000" - sets popup width to 1000px
class="modal-container" - sets popup width to 1170px, width of the page container
class="modal-fullscreen" - sets popup width to fullscreen

Example: to make a 700px wide popup, link to it like so:

<a href="#MyPopup" data-fancybox>Open MyPopup</a>

With the following Fancybox content:

<div id="MyPopup" class="modal-700">
  MyPopup content
</div>

Open the Fancybox