Alerts and Warnings

<div class="alert alert-success" role="alert"> <span class="icon icon-ok-circle"></span> <strong>Good Job!</strong> You are so good at that thing you just did! <a href="#" class="alert-link">This thing</a> </div> <div class="alert alert-info" role="alert"> <span class="icon icon-info-circle"></span> <strong>Well Just A Note!</strong> You are so good at that thing you just did! <a href="#" class="alert-link">This thing</a> </div> <div class="alert alert-warning" role="alert"> <span class="icon icon-info-circle"></span> <strong>Caution!</strong> Heads up at that thing you just did! <a href="#" class="alert-link">This thing</a> </div> <div class="alert alert-danger" role="alert"> <span class="icon icon-attention-circle"></span> <strong>Oops!</strong> Something went wrong just did! <a href="#" class="alert-link">This thing</a> </div>

App Icons

Default Icons

ai ai ai ai
ai ai ai ai
<div> <span class="app-icon app-icon-black">ai</span> <span class="app-icon app-icon-blue">ai</span> <span class="app-icon app-icon-green">ai</span> <span class="app-icon app-icon-orange">ai</span> </div> <div> <span class="app-icon app-icon-branded-black">ai<span class="caret"></span></span> <span class="app-icon app-icon-branded-blue">ai<span class="caret"></span></span> <span class="app-icon app-icon-branded-green">ai<span class="caret"></span></span> <span class="app-icon app-icon-branded-orange">ai<span class="caret"></span></span> </div>

Large Icons

ai ai ai ai
ai ai ai ai
<div> <span class="app-icon app-icon-lg app-icon-black">ai</span> <span class="app-icon app-icon-lg app-icon-blue">ai</span> <span class="app-icon app-icon-lg app-icon-green">ai</span> <span class="app-icon app-icon-lg app-icon-orange">ai</span> </div> <div> <span class="app-icon app-icon-lg app-icon-branded-black">ai<span class="caret"></span></span> <span class="app-icon app-icon-lg app-icon-branded-blue">ai<span class="caret"></span></span> <span class="app-icon app-icon-lg app-icon-branded-green">ai<span class="caret"></span></span> <span class="app-icon app-icon-lg app-icon-branded-orange">ai<span class="caret"></span></span> </div>

Extra Large Icons

ai ai ai ai
ai ai ai ai
<div> <span class="app-icon app-icon-xl app-icon-black">ai</span> <span class="app-icon app-icon-xl app-icon-blue">ai</span> <span class="app-icon app-icon-xl app-icon-green">ai</span> <span class="app-icon app-icon-xl app-icon-orange">ai</span> </div> <div> <span class="app-icon app-icon-xl app-icon-branded-black">ai<span class="caret"></span></span> <span class="app-icon app-icon-xl app-icon-branded-blue">ai<span class="caret"></span></span> <span class="app-icon app-icon-xl app-icon-branded-green">ai<span class="caret"></span></span> <span class="app-icon app-icon-xl app-icon-branded-orange">ai<span class="caret"></span></span> </div>

App Icons with Title

ai h1. Application Title

ai h2. Application Title

ai h3. Application Title

ai h4. Application Title

ai h5. Application Title
<h1> <span class="app-icon app-icon-black">ai</span> <span class="app-icon-title">h1. Application Title</span> </h1> <h2> <span class="app-icon app-icon-blue">ai</span> <span class="app-icon-title">h2. Application Title</span> </h2> <h3> <span class="app-icon app-icon-green">ai</span> <span class="app-icon-title">h3. Application Title</span> </h3> <h4> <span class="app-icon app-icon-orange">ai</span> <span class="app-icon-title">h4. Application Title</span> </h4> <h5> <span class="app-icon app-icon-branded-black">ai<span class="caret"></span></span> <span class="app-icon-title">h5. Application Title</span> </h5>

With Breadcrumbs

ai h1. Application Title

<ul class="breadcrumb"> <li> <a href="#">Home</a> </li> <li> <a href="#">Spaces</a> </li> <li class="active"> My Application </li> </ul> <h1> <span class="app-icon app-icon-black">ai</span> <span class="app-icon-title">h1. Application Title</span> </h1>

Badges

Examples

Notices 42

<a href="#">Notices <span class="badge">42</span></a> <button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> </button>

Variants

42 42 42 42 42 42
<span class="badge badge-default">42</span> <span class="badge badge-primary">42</span> <span class="badge badge-success">42</span> <span class="badge badge-info">42</span> <span class="badge badge-warning">42</span> <span class="badge badge-danger">42</span>

Breadcrumbs are links at the top of a page which indicate the relationship of the current page to the larger system page structure. While many browsers include 'Back' functionality to support a similar traversal, this functionality is not reliable as a result of form submissions or 'deep linking' - when users get to a lower-level page directly, without having visited it's parent pages. Breadcrumbs avoid these pitfalls by providing discrete links representing the intended hierarchy.

<ul class="breadcrumb"> <li> <a href="#">Home</a> </li> <li> <a href="#">Spaces</a> </li> <li class="active"> My Application </li> </ul>

Buttons

Primary buttons allow for users to take action within the application or site and generally correspond to the main call to action on the page. Secondary or alternate buttons allow for action to be taken by the user, but generally correspond to lower priority actions outside of the main call to action.

Options

<button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button>

Disabled

<button type="button" disabled="disabled" class="btn btn-default">Default</button> <button type="button" disabled="disabled" class="btn btn-primary">Primary</button> <button type="button" disabled="disabled" class="btn btn-success">Success</button> <button type="button" disabled="disabled" class="btn btn-info">Info</button> <button type="button" disabled="disabled" class="btn btn-warning">Warning</button> <button type="button" disabled="disabled" class="btn btn-danger">Danger</button> <button type="button" disabled="disabled" class="btn btn-link">Link</button>

Large Button

<button class="btn btn-primary btn-lg"> Large Primary Button </button>

Primary Button

<button type="button" class="btn btn-primary">Primary button</button>

Secondary Button

<button type="button" class="btn btn-default">Secondary button</button>

Button Group

<div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>

Combo Button

<div class="btn-group"> <button type="button" class="btn btn-default">Action</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

File Upload

Add files... Add files... Add files... Add files... Add files... Add files... Add files...
<span class="btn btn-default btn-file"> <i class="icon icon-plus-circle"></i> <span>Add files...</span> <input type="file" name="files[]" multiple> </span> <span class="btn btn-primary btn-file">...</span> <span class="btn btn-success btn-file">...</span> <span class="btn btn-info btn-file">...</span> <span class="btn btn-warning btn-file">...</span> <span class="btn btn-danger btn-file">...</span> <span class="btn btn-link btn-file">...</span>

Cards

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.

Cards were ported over from a pre-release version of Bootstrap 4

Basic

Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease. For example, if your card has no flush content like images, feel free to put the `.card-block` class on the `.card` element to consolidate your markup.

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button
<div class="card"> <img class="card-img-top" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div>

Content Types

Cards support a wide variety of content, including images, text, list groups, links, and more. Mix and match multiple content types to create the card you need.

100px180

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card"> <img class="card-img-top"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Vestibulum at eros</li> </ul> <div class="card-block"> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div>
100px180

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="card"> <img class="card-img-top" alt="100px180"> <div class="card-block"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div>

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link
<div class="card card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div>

Card title

Support card subtitle
Card image

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link
<div class="card"> <div class="card-block"> <h3 class="card-title">Card title</h3> <h6 class="card-subtitle text-muted">Support card subtitle</h6> </div> <img data-src="" alt="Card image"> <div class="card-block"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div>

Card title

Support card subtitle
  • one
  • two
  • three
<div class="card card-block"> <h4 class="card-title">Card title</h4> <h6 class="card-subtitle text-muted">Support card subtitle</h6> <ul class="card-block"> <li>one</li> <li>two</li> <li>three</li> </ul> </div>

Sizing

Cards are block-level by default, so they’ll fill the available horizontal space. Constrain their widths via inline styles, our predefined grid classes, or with custom styles using our grid mixins.

One

With supporting text below as a natural lead-in to additional content.

Go somewhere

Two

With supporting text below as a natural lead-in to additional content.

Go somewhere

Three

With supporting text below as a natural lead-in to additional content.

Go somewhere

Four

With supporting text below as a natural lead-in to additional content.

Go somewhere
<div class="row"> <div class="col-sm-3"> <div class="card card-block"> <h3 class="card-title">One</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-block btn-primary">Go somewhere</a> </div> </div> <div class="col-sm-3"> <div class="card card-block"> <h3 class="card-title">Two</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-block btn-primary">Go somewhere</a> </div> </div> <div class="col-sm-3"> <div class="card card-block"> <h3 class="card-title">Three</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-block btn-primary">Go somewhere</a> </div> </div> <div class="col-sm-3"> <div class="card card-block"> <h3 class="card-title">Four</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-block btn-primary">Go somewhere</a> </div> </div> </div>

Text Alignment

You can quickly change the text alignment of any card—in its entirety or specific parts—with with the text alignment

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
<div class="card card-block"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> <div class="card card-block text-center"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> <div class="card card-block text-right"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div>

Collapsible Card

<div class="card card-collapsible"> <h5 class="card-header"> <a class="collapsed card-collapsible-link" data-toggle="collapse" href="#exampleCollapse"> View more data </a> </h5> <div id="exampleCollapse" class="collapse" aria-expanded="false"> <div class="card-block"> <p data-mock="paragraph:3"></p> <p data-mock="paragraph:5"></p> </div> </div> </div>

Add an optional header and/or footer within a card.

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
<div class="card"> <div class="card-header"> Featured </div> <div class="card-block"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>
Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
<div class="card text-center"> <div class="card-header"> Featured </div> <div class="card-block"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> <div class="card-footer text-muted"> 2 days ago </div> </div>

Image Caps

Similar to headers and footers, cards include top and bottom image caps.

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap
<div class="card"> <img class="card-img-top" data-src="" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> <img class="card-img-bottom" data-src="holder.js/100px180?text=Image" height="180" alt="Card image cap"> </div>

Variants

Cards include their own variant classes for quickly changing the background-color and border-color of a card. Darker colors require the use of .card-inverse.

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

Someone famous in Source Title

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

Someone famous in Source Title

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

Someone famous in Source Title

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

Someone famous in Source Title

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

Someone famous in Source Title

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

Someone famous in Source Title
<div class="card card-inverse card-primary text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="card-link">Integer</a> posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> <div class="card card-inverse card-success text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="card-link">Integer</a> posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> <div class="card card-inverse card-info text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="card-link">Integer</a> posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> <div class="card card-inverse card-warning text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="card-link">Integer</a> posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> <div class="card card-inverse card-danger text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="card-link">Integer</a> posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> <div class="card card-inverse card-default text-center"> <div class="card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="card-link">Integer</a> posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div>

Groups

Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use display: table; and table-layout: fixed; to achieve their uniform sizing.

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="card-group"> <div class="card"> <img class="card-img-top" data-src="" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top" data-src="" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top" data-src="" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div>

Decks

Need a set of equal width and height cards that aren’t attached to one another? Use card decks. By default, card decks require two wrapping elements: .card-deck-wrapper and a .card-deck. We use table styles for the sizing and the gutters on .card-deck. The .card-deck-wrapper is used to negative margin out the border-spacing on the .card-deck.

Card image cap

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="card-deck-wrapper"> <div class="card-deck"> <div class="card"> <img class="card-img-top" data-src="" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top" data-src="" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top" data-src="" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div>

Columns

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns.

This is not available in IE9 and below as they have no support for the column CSS properties.

Card image cap

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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

Someone famous in Source Title
Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

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

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image

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

Someone famous in Source Title

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="card-columns"> <div class="card"> <img class="card-img-top" data-src="holder.js/100px160?text=Image" height="160" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title that wraps to a new line</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> <div class="card card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card"> <img class="card-img-top" data-src="holder.js/100px160?text=Image" height="160" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card card-block card-inverse card-primary text-center"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card card-block text-center"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> <div class="card"> <img class="card-img" data-src="holder.js/100px260?text=Image" alt="Card image"> </div> <div class="card card-block text-right"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div>

Colors

Standard

#ed5624
#2261b5
#0093e8
#4d4f53
#e8ebeb
#ffffff

Status & Alerts

#02a17c
#3e6887
#ffda00
#b21909

Containers

To see full page examples for different container sizes please see our examples page

Small

...
<div class="container-sm"> ... </div>

An inline menu which can be used to provide additional actions and links related to an object on the page.

Contextual Menu

<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Actions <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="icon icon-cog"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-ghost dropdown-toggle" data-toggle="dropdown"> <span class="icon icon-cog"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </div>

Scrollable Menu

<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Actions <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-scrollable" role="menu"> <li><a href="#">Action 1</a></li> <li><a href="#">Action 2</a></li> <li><a href="#">Action 3</a></li> <li><a href="#">Action 4</a></li> <li><a href="#">Action 5</a></li> <li><a href="#">Action 6</a></li> <li><a href="#">Action 7</a></li> <li><a href="#">Action 8</a></li> <li><a href="#">Action 9</a></li> <li><a href="#">Action 10</a></li> <li><a href="#">Action 11</a></li> <li><a href="#">Action 12</a></li> <li><a href="#">Action 13</a></li> </ul> </div>

The footer is the last, bottom-most section on a page and provides space for both non-essential navigation (such as Terms of Use) and redundant navigation with elements likely to be frequently sought out. We suggest this redundant navigation focus on Help content, which while in a dropdown in the nav, can be discretely listed here.

<footer class="footer"> <div class="footer-body"> <span class="footer-copy">©2016 Availity, LLC.</span> <ul class="footer-links"> <li><a href="#">Contact</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Terms of Use</a></li> </ul> </div> </footer>

Forms

Form elements and interactive components for inputting data into the system.

Label with placeholder text

<div class="form-group"> <label for="text2">My cool input box</label> <input type="text" class="form-control" id="text2" placeholder="Text input"> </div>

Inline Help

<div class="form-group"> <label for="text4">Label for text input <span class="inline-help" data-toggle="tooltip" data-placement="top" title="" data-original-title="Lorem ipusm cornaer vel eu leo. cum soclies nasctuere abl ultriceis vehiclula et magins.">What’s this?</span></label> <input type="text" class="form-control" id="text4" placeholder="Type what you want here"> </div>

Optional Form Inputs

Contact Information

All fields required unless noted.

<div class="card"> <fieldset class="card-block"> <h2 class="lighter">Contact Information</h2> <p>All fields <strong>required</strong> unless noted.</p> <div class="row"> <div class="col-xs-5"> <div class="form-group"> <label for="firstName11">First Name</label> <input type="email" class="form-control" id="firstName11" placeholder="Text input"> </div> <div class="form-group"> <label for="lastName11">Last Name</label> <input type="email" class="form-control" id="lastName11" placeholder="Text input"> </div> <div class="form-group"> <label for="phonenNumber11">Phone <small>(Optional)</small></label> <input type="email" class="form-control" id="phonenNumber11" placeholder="Text input"> </div> </div> </div> </fieldset> </div>

Validation states

Example block-level help text here.

Example block-level help text here.

Example block-level help text here.

<div class="form-group has-error"> <label for="text8">Label for text input</label> <input type="text" class="form-control" id="text8" placeholder="" value="This is error text"> <p class="help-block">Example block-level help text here.</p> </div> <div class="form-group has-success"> <label for="text9">Label for text input</label> <input type="text" class="form-control" id="text9" placeholder="" value="this is success text"> <p class="help-block">Example block-level help text here.</p> </div> <div class="form-group has-warning"> <label for="text10">Label for text input</label> <input type="text" class="form-control" id="text10" placeholder="" value="this is warning text"> <p class="help-block">Example block-level help text here.</p> </div>

Checkboxes and Radios

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. A checkbox or radio with the disabled attribute will be styled appropriately. To have the label for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the .disabled class to your .radio, .radio-inline, .checkbox, .checkbox-inline, or fieldset.


<!--Checkboxes--> <div class="checkbox"> <input id="checkbox1" type="checkbox" checked> <label for="checkbox1">Option one is this and that—be sure to include why it's great</label> </div> <div class="checkbox"> <input id="checkbox2" type="checkbox" value=""> <label for="checkbox2">Option two is this and wow</label> </div> <div class="checkbox disabled"> <input id="checkbox3" type="checkbox" value="" disabled> <label for="checkbox3">Option two is disabled</label> </div> <!--Radios--> <div class="radio"> <input type="radio" name="optionsRadios1" id="optionsRadios1" value="option1" checked> <label for="optionsRadios1">Option one is this and that—be sure to include why it's great</label> </div> <div class="radio"> <input type="radio" name="optionsRadios1" id="optionsRadios2" value="option2"> <label for="optionsRadios2">Option two can be something else and selecting it will deselect option one</label> </div> <div class="radio disabled"> <input type="radio" name="optionsRadios1" id="optionsRadios3" value="option3" disabled> <label for="optionsRadios3">Option three is disabled</label> </div>

Inline Checkboxes and Radios

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.



<!--Checkboxes--> <div class="checkbox checkbox-inline"> <input id="checkbox4" type="checkbox" checked> <label for="checkbox4">1</label> </div> <div class="checkbox checkbox-inline"> <input id="checkbox5" type="checkbox" value=""> <label for="checkbox5">2</label> </div> <div class="checkbox checkbox-inline"> <input id="checkbox6" type="checkbox" value=""> <label for="checkbox6">3</label> </div> <!--Radios--> <div class="radio radio-inline"> <input type="radio" name="optionsRadios2" id="optionsRadios4" value="option1" checked> <label for="optionsRadios4">1</label> </div> <div class="radio radio-inline"> <input type="radio" name="optionsRadios2" id="optionsRadios5" value="option2"> <label for="optionsRadios5">2</label> </div> <div class="radio radio-inline"> <input type="radio" name="optionsRadios2" id="optionsRadios6" value="option3"> <label for="optionsRadios6">3</label> </div>

Checkboxes and Radios without label text

Should you have no text within the label, the input is positioned as you'd expect. Currently only works on non-inline checkboxes and radios.

<!--Checkboxes--> <div class="checkbox"> <input id="checkbox7" type="checkbox"> <label for="checkbox7"></label> </div> <!--Radios--> <div class="radio"> <input type="radio" name="optionsRadios3" id="optionsRadios7" value="option1"> <label for="optionsRadios7"></label> </div>

Checkbox and Radio Variants



<!--Checkboxes--> <div class="checkbox checkbox-inline checkbox-primary"> <input id="checkbox8" type="checkbox" checked> <label for="checkbox8">Primary</label> </div> <div class="checkbox checkbox-inline checkbox-success"> <input id="checkbox9" type="checkbox"> <label for="checkbox9">Success</label> </div> <div class="checkbox checkbox-inline checkbox-info"> <input id="checkbox10" type="checkbox"> <label for="checkbox10">Info</label> </div> <div class="checkbox checkbox-inline checkbox-warning"> <input id="checkbox11" type="checkbox"> <label for="checkbox11">Warning</label> </div> <div class="checkbox checkbox-inline checkbox-danger"> <input id="checkbox12" type="checkbox"> <label for="checkbox12">Danger</label> </div> <!--Radios--> <div class="radio radio-inline radio-primary"> <input type="radio" name="optionsRadios4" id="optionsRadios8" value="option1"> <label for="optionsRadios8">Primary</label> </div> <div class="radio radio-inline radio-success"> <input type="radio" name="optionsRadios4" id="optionsRadios9" value="option1"> <label for="optionsRadios9">Success</label> </div> <div class="radio radio-inline radio-info"> <input type="radio" name="optionsRadios4" id="optionsRadios10" value="option1"> <label for="optionsRadios10">Info</label> </div> <div class="radio radio-inline radio-warning"> <input type="radio" name="optionsRadios4" id="optionsRadios11" value="option1"> <label for="optionsRadios11">Warning</label> </div> <div class="radio radio-inline radio-danger"> <input type="radio" name="optionsRadios4" id="optionsRadios12" value="option1"> <label for="optionsRadios12">Danger</label> </div>

Select

Do not use HTML's select tag. Instead, see the Select2 section on the JavaScript examples page.

Basic Form

Request Information
<form> <h5 class="card-title-secondary">Request Information</h5> <div class="form-group"> <label for="memberID"> Member ID <span class="inline-help" data-toggle="tooltip" data-placement="top" title="" data-original-title="Lorem ipusm cornaer vel eu leo. cum soclies nasctuere abl ultriceis vehiclula et magins."> What's this </span> </label> <input type="text" class="form-control" id="memberID" placeholder=""> </div> <div class="form-group"> <label for="relationshipToSubscriber"> Relationship to Subscriber <span class="inline-help" data-toggle="tooltip" data-placement="top" data-original-title="Lorem ipusm cornaer vel eu leo. cum soclies nasctuere abl ultriceis vehiclula et magins."> What's this </span> </label> <select class="form-control select2" id="relationshipToSubscriber"> <option>Select one</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </div> <div class="form-group"> <label for="datetimepicker7"> Date of Birth </label> <input type="text" class="form-control" id="datetimepicker7" placeholder="mm/dd/yyyy"> </div> <div class="form-group"> <label for="serviceQuantityType"> Service Quantity/Type </label> <div class="row"> <div class="col-xs-4"> <input type="text" id="serviceQuantityType" class="form-control"> </div> <div class="col-xs-8"> <select class="form-control select2" id="rts"> <option>Select one</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </div> </div> </div> <div class="form-controls form-controls-card"> <input type="submit" class="btn btn-default" value="Cancel"> <input type="submit" class="btn btn-default" value="Ok"> <input type="submit" class="btn btn-default" value="Maybe"> <input type="submit" class="btn btn-primary form-controls-right" value="Save"> </div> </form>

Read Only Form

Transaction ID 386494049 Customer ID 5579464938
Certification Number

123456789

Patient Name

Bryant, Nevaeh

Patient Date of Birth

03/03/2010

Patient Gender

Male

Status

Modified

Diagnosis Version

ICD-9

Request Type

Inpatient Authorization

Payer

Aetna

<div class="card"> <div class="card-block"> <div class="card-header-secondary"> <small class="text-label text-label-inline">Transaction ID</small> <span class="label label-info" data-mock="memberId:1">236316981</span> <small class="text-label text-label-inline">Customer ID</small> <span class="label label-info" data-mock="customerId:1">7843703252</span> </div> </div> <div class="card-block"> <div class="row"> <div class="col-sm-3 col-ms-6"> <h5 class="text-label">Certification Number</h5> <p>123456789</p> </div> <div class="col-sm-3 col-ms-6"> <h5 class="text-label">Patient Name</h5> <p data-mock="fullNameReverse:1">Phillips, Nevaeh</p> </div> <div class="col-sm-3 col-ms-6"> <h5 class="text-label">Patient Date of Birth</h5> <p>03/03/2010</p> </div> <div class="col-sm-3 col-ms-6"> <h5 class="text-label">Patient Gender</h5> <p>Male</p> </div> </div> <div class="row"> <div class="col-sm-3 col-ms-6"> <h5 class="text-label">Status</h5> <p>Modified</p> </div> <div class="col-sm-3 col-ms-6"> <h5 class="text-label">Diagnosis Version</h5> <p>ICD-9</p> </div> <div class="col-sm-3 col-ms-6"> <h5 class="text-label">Request Type</h5> <p>Inpatient Authorization</p> </div> <div class="col-sm-3 col-ms-6"> <h5 class="text-label">Payer</h5> <p>Aetna</p> </div> </div> </div> </div>

Fieldsets and Legends

Provider Information
Member Information
<form class="form"> <div class="card"> <div class="card-block"> <fieldset> <legend>Provider Information</legend> <div class="form-group"> <label for="organizations">Organization</label> <select id="organizations" class="form-control select2"> <option selected="selected"></option> <option label="Acme Medical Center" value="15">Acme Medical Center</option> </select> </div> <div class="form-group"> <label for="providers">Provider</label> <select id="providers" class="form-control select2"> <option label="Acme Provider LLC" value="16">Acme Provider LLC</option> </select> </div> <label for="npi"> NPI <span class="inline-help" placement="top" trigger="hover" title="" data-original-title="National Provider Index"> What's this </span> </label> <input type="text" class="form-control" id="npi"> </fieldset> <fieldset> <legend>Member Information</legend> <div class="form-group"> <label for="memberID"> Member ID <span class="inline-help" placement="top" trigger="hover" title="" data-original-title="Also known as subscriber ID or member number"> What's this </span> </label> <input type="text" class="form-control" id="memberID"> </div> <div class="form-group"> <label for="dob">Date of Birth</label> <div class="input-group date"> <input type="text" class="form-control" id="dob"> <span class="input-group-btn" data-toggle="datepicker"> <button class="btn btn-default" type="button"><span class="icon icon-calendar"></span></button> </span> </div> </div> </fieldset> <div class="form-controls form-controls-card"> <input type="submit" class="btn btn-primary form-controls-right" value="Submit"> </div> </div> </div> </form>

Labels

Examples

Unstyled Default Primary Success Info Warning Danger Brand Extra

0 1 2 3 4 5 6 7 8

<span class="label label-unstyled">Unstyled Label</span> <span class="label label-default">Default Label</span> <span class="label label-primary">Primary Label</span> <span class="label label-success">Success Label</span> <span class="label label-info">Info Label</span> <span class="label label-warning">Warning Label</span> <span class="label label-danger">Danger Label</span> <span class="label label-brand">Brand Label</span> <span class="label label-optional">Optional Label</span>

Header Labels

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

<h1>Example heading <span class="label label-default">New</span></h1> <h2>Example heading <span class="label label-default">New</span></h2> <h3>Example heading <span class="label label-default">New</span></h3> <h4>Example heading <span class="label label-default">New</span></h4> <h5>Example heading <span class="label label-default">New</span></h5> <h6>Example heading <span class="label label-default">New</span></h6>

Block Labels

Default Label

Primary Label

Success Label

Info Label

Warning Label

Danger Label

Default Label

<h1 class="label label-default label-block">Default Label</h1> <h2 class="label label-primary label-block">Primary Label</h2> <h3 class="label label-success label-block">Success Label</h3> <h4 class="label label-info label-block">Info Label</h4> <h5 class="label label-warning label-block">Warning Label</h5> <h6 class="label label-danger label-block">Danger Label</h6> <div class="label label-default label-block">Default Label</div>

Removable Labels

Unstyled Default Primary Success Info Warning Danger Brand Extra
<span class="label label-unstyled label-remove"><a href="#"><i class="icon icon-cancel"></i></a> Unstyled</span> <span class="label label-default label-remove"><a href="#"><i class="icon icon-cancel"></i></a> Default</span> <span class="label label-primary label-remove"><a href="#"><i class="icon icon-cancel"></i></a> Primary</span> <span class="label label-success label-remove"><a href="#"><i class="icon icon-cancel"></i></a> Success</span> <span class="label label-info label-remove"><a href="#"><i class="icon icon-cancel"></i></a> Info</span> <span class="label label-warning label-remove"><a href="#"><i class="icon icon-cancel"></i></a> Warning</span> <span class="label label-danger label-remove"><a href="#"><i class="icon icon-cancel"></i></a> Danger</span> <span class="label label-brand label-remove"><a href="#"><i class="icon icon-cancel"></i></a> Brand</span> <span class="label label-extra label-remove"><a href="#"><i class="icon icon-cancel"></i></a> Extra</span>

List Groups

An approach to showing list data in which each row of data is represented by a 'card.' Like records, cards contain just the most important data for the given context, with additional information ideally being available through a secondary action such as opening a new page or modal.

Cards with anchor tags

<div class="list-group list-group-cards"> <a class="list-group-item primary" href="#"> <h4 class="list-group-item-heading">Rogers, Steve</h4> <p class="list-group-item-text">US Army</p> </a> <a class="list-group-item success" href="#"> <h4 class="list-group-item-heading">Acey, Sofia</h4> <p class="list-group-item-text">Masung Corp.</p> </a> <a class="list-group-item pending" href="#"> <h4 class="list-group-item-heading">Barish, Joseph</h4> <p class="list-group-item-text">Masung Corp.</p> </a> <a class="list-group-item error" href="#"> <h4 class="list-group-item-heading">Benson, Sarah</h4> <p class="list-group-item-text">ZetaComm</p> </a> <a class="list-group-item canceled" href="#"> <h4 class="list-group-item-heading">Wayne, Bruce</h4> <p class="list-group-item-text">Wayne Industries</p> </a> <a class="list-group-item" href="#"> <h4 class="list-group-item-heading">Wayne, Bruce</h4> <p class="list-group-item-text">Wayne Industries</p> </a> </div>

Card without anchor tags

When using a .list-group without anchors, the .list-group-selectable class will provide the hover and selection styling.

Rogers, Steve

US Army

Paker, Peter

Daily Planet

Banner, Bruce

United States Defense Department

Stark, Tony

Stark Industries

Wayne, Bruce

Wayne Industries

Kent, Clark

Daily Planet

<div class="list-group list-group-cards list-group-selectable"> <div class="list-group-item primary" href="#"> <h4 class="list-group-item-heading">Rogers, Steve</h4> <p class="list-group-item-text">US Army</p> </div> <div class="list-group-item success" href="#"> <h4 class="list-group-item-heading">Paker, Peter</h4> <p class="list-group-item-text">Daily Planet</p> </div> <div class="list-group-item pending" href="#"> <h4 class="list-group-item-heading">Banner, Bruce</h4> <p class="list-group-item-text">United States Defense Department</p> </div> <div class="list-group-item error" href="#"> <h4 class="list-group-item-heading">Stark, Tony</h4> <p class="list-group-item-text">Stark Industries</p> </div> <div class="list-group-item canceled" href="#"> <h4 class="list-group-item-heading">Wayne, Bruce</h4> <p class="list-group-item-text">Wayne Industries</p> </div> <div class="list-group-item" href="#"> <h4 class="list-group-item-heading">Kent, Clark</h4> <p class="list-group-item-text">Daily Planet</p> </div> </div>

Media Object

Using dropdowns

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Mega Menu

<nav class="navbar mega-menu navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#availity-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand-availity" href="#"> <div class="navbar-logo-availity"></div> </a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Mega Menu</a> <ul class="dropdown-menu mega-menu-default mega-menu-md" role="menu"> <li> <div class="mega-menu-content"> <h5 class="mega-menu-title">My Patient Access Apps</h5> <div class="list-group list-group-unstyled"> <a href="#" class="list-group-item"> <span class="app-icon app-icon-orange">ai</span> Eligibility & Benefits </a> <a href="#" class="list-group-item"> <span class="app-icon app-icon-orange">ai</span> Care Reminders </a> <a href="#" class="list-group-item"> <span class="app-icon app-icon-orange">ai</span> Patient Care Summary </a> <hr> <a href="#" class="list-group-item"> <span class="app-icon app-icon-orange">ai</span> Authorizations & Referrals </a> </div> </div> <div class="mega-menu-content mega-menu-feature"> <h4>Availity Premium Apps</h4> <p> <div class="row"> <div class="col-sm-8"> <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p> </div> <div class="col-sm-4"> <button class="btn btn-primary btn-block">Upgrade Today</button> </div> </div> </p> <p><a href="#">Learn More</a></p> </div> </li> </ul> </li> </ul> </div> </div> </nav> <nav class="navbar-default navbar navbar-secondary mega-menu" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#availity-navbar-secondary"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="availity-navbar-secondary"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tiled Mega Menu</a> <ul class="dropdown-menu mega-menu-default mega-menu-md" role="menu"> <li> <div class="mega-menu-content mega-menu-tiles"> <div class="row"> <div class="col-xs-4"> <a href="https://www.availity.com" target="_blank"> <div class="mega-menu-tile"> <img alt="Anthem" class="img-responsive img-thumbnail"> <p>Anthem CA</p> </div> </a> </div> <div class="col-xs-4"> <a href="https://www.availity.com" target="_blank"> <div class="mega-menu-tile"> <img alt="Florida Blue" class="img-responsive img-thumbnail"> <p>Florida Blue</p> </div> </a> </div> <div class="col-xs-4"> <a href="https://www.availity.com" target="_blank"> <div class="mega-menu-tile"> <img alt="Humana" class="img-responsive img-thumbnail"> <p>Humana</p> </div> </a> </div> </div> <div class="row"> <div class="col-xs-4"> <a href="https://www.availity.com" target="_blank"> <div class="mega-menu-tile"> <img alt="Anthem" class="img-responsive img-thumbnail"> <p>Anthem CA</p> </div> </a> </div> <div class="col-xs-4"> <a href="https://www.availity.com" target="_blank"> <div class="mega-menu-tile"> <img alt="Florida Blue" class="img-responsive img-thumbnail"> <p>Florida Blue</p> </div> </a> </div> <div class="col-xs-4"> <a href="https://www.availity.com" target="_blank"> <div class="mega-menu-tile"> <img alt="Humana" class="img-responsive img-thumbnail"> <p>Humana</p> </div> </a> </div> </div> <div class="row"> <div class="col-xs-4"> <a href="https://www.availity.com" target="_blank"> <div class="mega-menu-tile"> <img alt="Anthem" class="img-responsive img-thumbnail"> <p>Anthem CA</p> </div> </a> </div> <div class="col-xs-4"> <a href="https://www.availity.com" target="_blank"> <div class="mega-menu-tile"> <img alt="Florida Blue" class="img-responsive img-thumbnail"> <p>Florida Blue</p> </div> </a> </div> <div class="col-xs-4"> <a href="https://www.availity.com" target="_blank"> <div class="mega-menu-tile"> <img alt="Humana" class="img-responsive img-thumbnail"> <p>Humana</p> </div> </a> </div> </div> </div> <div class="mega-menu-content mega-menu-feature"> <h4>Availity Premium Apps</h4> <p> <div class="row"> <div class="col-sm-8"> <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p> </div> <div class="col-sm-4"> <button class="btn btn-primary btn-block">Upgrade Today</button> </div> </div> </p> <p><a href="#">Learn More</a></p> </div> </li> </ul> </li> </ul> </div> </div> </nav>

The primary nav bar sits below the utility bar and contains primary navigation for the system, including both Availity workflow apps and Spaces, as well as user Favorites.

Brand Image

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand-availity" href="#"> <div class="navbar-logo-availity"></div> </a> </div> </div> </nav>
Note: to attach the navbar to the top of the screen, as shown on this page, add the class navbar-fixed-top to your nav tag:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> ... </nav>

Forms in navbar

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#availity-example-navbar-collapse-10"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand-availity" href="#"> <div class="navbar-logo-availity"></div> </a> </div> <div class="collapse navbar-collapse" id="availity-example-navbar-collapse-10"> <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <span class="input-group-btn"> <button type="submit" class="btn btn-default"><i class="icon icon-search"></i></button> </span> </div> </div> </form> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle dropdown-toggle-secondary" data-toggle="dropdown"> <i class="icon icon-help-circle"></i> Help </a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle dropdown-toggle-secondary" data-toggle="dropdown"> Hello, John Doe </a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li class="divider"></li> <li><a href="#">Logout</a></li> </ul> </li> </ul> </div> </div> </nav>

Secondary Navbar

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand-availity" href="#"> <div class="navbar-logo-availity"></div> </a> </div> </div> </nav> <nav class="navbar navbar-default navbar-secondary" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#availity-example-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="availity-example-navbar-collapse-2"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Claims Management</a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Insurance Payments</a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Patient Payments</a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li class="dropdown dropdown-favorites"> <button href="#" class="dropdown-toggle btn-favorites" data-toggle="dropdown">Favorites</button> <ul class="dropdown-menu favorites-menu" role="menu"> <li> <h5 class="favorites-menu-title">Favorites</h5> <div class="favorites-menu-body"> <a href="#" class="list-group-item"> <span class="app-icon app-icon-blue">ar</span> Authorizations & Referrals </a> <a href="#" class="list-group-item"> <span class="app-icon app-icon-orange">eb</span> Eligibility & Benefits </a> <a href="#" class="list-group-item"> <span class="app-icon app-icon-is-branded"> cr <span class="caret"></span> </span> Humana Credentialing Status </a> <a href="#" class="list-group-item"> <span class="app-icon app-icon-is-branded-alt"> pr <span class="caret"></span> </span> Provider Management </a> </div> <div class="favorites-menu-footer"> <a href="#">Manage Favorites</a> </div> </li> </ul> </li> </ul> </div> </div> </nav>
<nav class="navbar mega-menu navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#availity-example-navbar-collapse-4"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand-availity" href="#"> <div class="navbar-logo-availity"></div> </a> </div> <div class="collapse navbar-collapse" id="availity-example-navbar-collapse-4"> <ul class="nav navbar-nav"> <li> <a href="#" class="dropdown-toggle dropdown-toggle-notifications" data-toggle="dropdown"> <i class="icon icon-bell-alt navbar-default-icon"></i> Notifications <span class="badge badge-success">3</span> </a> <ul class="dropdown-menu dropdown-menu-md notifications-menu" role="menu"> <li> <ul class="nav nav-pills-secondary nav-justified notifications-menu-header" role="tablist"> <li class="active"> <a data-target="#all1" role="tab" data-toggle="tab">All <span class="notifications-menu-count">(3)</span></a> </li> <li> <a data-target="#alerts1" role="tab" data-toggle="tab">Alerts <span class="notifications-menu-count">(2)</span></a> </li> <li> <a data-target="#messages1" role="tab" data-toggle="tab">Messages <span class="notifications-menu-count">(1)</span></a> </li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="all1"> <div class="notifications-menu-body"> <div class="list-group-item"> <h6 class="subheader">Humana | Pharmacy Prior Authorization <a href="#"><i class="icon icon-cancel"></i></a></h6> <h5 class="condensed">Pharmacy Authorization Approved</h5> <p>Authorization for Arnold, Clifford (HUMIRA 40 MG/0.8 ML) was approved.</p> <a href="#" class="notification-menu-link">View Request</a> </div> <div class="list-group-item"> <h6 class="subheader">Humana | Pharmacy Prior Authorization <a href="#"><i class="icon icon-cancel"></i></a></h6> <h5 class="condensed">Pharmacy Authorization Approved</h5> <p>Authorization for Arnold, Clifford (HUMIRA 40 MG/0.8 ML) was approved.</p> <a href="#" class="notification-menu-link">View Request</a> </div> <div class="list-group-item"> <h6 class="subheader">Humana | Pharmacy Prior Authorization <a href="#"><i class="icon icon-cancel"></i></a></h6> <h5 class="condensed">Pharmacy Authorization Approved</h5> <p>Authorization for Arnold, Clifford (HUMIRA 40 MG/0.8 ML) was approved.</p> <a href="#" class="notification-menu-link">View Request</a> </div> </div> </div> <div role="tabpanel" class="tab-pane fade" id="alerts1"> <div class="notifications-menu-body"> <div class="list-group-item"> <h6 class="subheader">Humana | Pharmacy Prior Authorization <a href="#"><i class="icon icon-cancel"></i></a></h6> <h5 class="condensed">Pharmacy Authorization Approved</h5> <p>Authorization for Arnold, Clifford (HUMIRA 40 MG/0.8 ML) was approved.</p> <a href="#" class="notification-menu-link">View Request</a> </div> <div class="list-group-item"> <h6 class="subheader">Humana | Pharmacy Prior Authorization <a href="#"><i class="icon icon-cancel"></i></a></h6> <h5 class="condensed">Pharmacy Authorization Approved</h5> <p>Authorization for Arnold, Clifford (HUMIRA 40 MG/0.8 ML) was approved.</p> <a href="#" class="notification-menu-link">View Request</a> </div> </div> </div> <div role="tabpanel" class="tab-pane fade" id="messages1"> <div class="notifications-menu-body"> <div class="list-group-item"> <h6 class="subheader">Humana | Pharmacy Prior Authorization <a href="#"><i class="icon icon-cancel"></i></a></h6> <h5 class="condensed">Pharmacy Authorization Approved</h5> <p>Authorization for Arnold, Clifford (HUMIRA 40 MG/0.8 ML) was approved.</p> <a href="#" class="notification-menu-link">View Request</a> </div> </div> </div> </div> <div class="notifications-menu-footer"> <a href="#">Show All Notifications</a> </div> </li> </ul> </li> </ul> </div> </div> </nav> <script> // prevent the dropdown from closing on tab show $('.dropdown-menu a[data-toggle="tab"]').click(function (e) { e.stopPropagation(); $(this).tab('show'); }); </script>

Tabs are a form of subnavigation used to change what information is currently being shown on the screen. One tab must always be selected, thus all tab groups must have a default tab defined.

Tabs

Home

Profile

Messages

Settings

<div role="tabpanel"> <ul class="nav nav-tabs" role="tablist"> <li class="active"> <a href="#home1" role="tab" data-toggle="tab">Home</a> </li> <li> <a href="#profile1" role="tab" data-toggle="tab">Profile</a> </li> <li> <a href="#messages111" role="tab" data-toggle="tab">Messages</a> </li> <li> <a href="#settings1" role="tab" data-toggle="tab">Settings</a> </li> </ul> <div class="tab-content tab-bump"> <div role="tabpanel" class="tab-pane active" id="home1"> <p class="lead">Home</p> </div> <div role="tabpanel" class="tab-pane" id="profile1"> <p class="lead">Profile</p> </div> <div role="tabpanel" class="tab-pane" id="messages111"> <p class="lead">Messages</p> </div> <div role="tabpanel" class="tab-pane" id="settings1"> <p class="lead">Settings</p> </div> </div> </div>

Pills

Home

Profile

Messages

Settings

<div role="tabpanel"> <ul class="nav nav-pills" role="tablist"> <li class="active"> <a href="#home6" role="tab" data-toggle="tab">Home</a> </li> <li> <a href="#profile6" role="tab" data-toggle="tab">Profile</a> </li> <li> <a href="#messages6" role="tab" data-toggle="tab">Messages</a> </li> <li> <a href="#settings6" role="tab" data-toggle="tab">Settings</a> </li> </ul> <div class="tab-content tab-bump"> <div role="tabpanel" class="tab-pane active" id="home6"> <p class="lead">Home</p> </div> <div role="tabpanel" class="tab-pane" id="profile6"> <p class="lead">Profile</p> </div> <div role="tabpanel" class="tab-pane" id="messages6"> <p class="lead">Messages</p> </div> <div role="tabpanel" class="tab-pane" id="settings6"> <p class="lead">Settings</p> </div> </div> </div>

Pills Secondary

Home

Profile

Messages

Settings

<div role="tabpanel"> <ul class="nav nav-pills-secondary" role="tablist"> <li class="active"> <a href="#home2" role="tab" data-toggle="tab">Home</a> </li> <li> <a href="#profile2" role="tab" data-toggle="tab">Profile</a> </li> <li> <a href="#messages2" role="tab" data-toggle="tab">Messages</a> </li> <li> <a href="#settings2" role="tab" data-toggle="tab">Settings</a> </li> </ul> <div class="tab-content tab-bump"> <div role="tabpanel" class="tab-pane active" id="home2"> <p class="lead">Home</p> </div> <div role="tabpanel" class="tab-pane" id="profile2"> <p class="lead">Profile</p> </div> <div role="tabpanel" class="tab-pane" id="messages2"> <p class="lead">Messages</p> </div> <div role="tabpanel" class="tab-pane" id="settings2"> <p class="lead">Settings</p> </div> </div> </div>

Pagination

When a list contains more elements than will ideally fit within the current page, pagination allows for this data to be chunked into more manageable 'pages.' The pagination pattern shows the inner-navigation for traversing these pages.

Default Pagination

Show
Showing batches 1-10 of 12
<ul class="pagination"> <li class="disabled"><a href="#">« Prev</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">Next »</a></li> </ul> <div class="pagination-container"> <ul class="pagination"> <li class="disabled"><a href="#">« Prev</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">Next »</a></li> </ul> <div class="pagination-text"> Show </div> <select class="form-control select2"> <option>10 results</option> <option>20 results</option> <option>30 results</option> </select> <div class="pagination-text"> Showing batches 1-10 of 12 </div> </div>

Unstyled Pagination

Show
Showing batches 1-10 of 12
<ul class="pagination pagination-unstyled"> ... </ul> <div class="pagination-container"> <ul class="pagination pagination-unstyled"> ... </ul> <div class="pagination-text"> Show </div> <select class="form-control select2"> <option>10 results</option> <option>20 results</option> <option>30 results</option> </select> <div class="pagination-text"> Showing batches 1-10 of 12 </div> </div>

Progress Bar

Progress bars convey to users a sense of status and give them a sense for how much is left in an activity.

0% Complete

0% Complete

80% Complete

80% Complete

100% Complete

100% Complete

Processing

50% Complete
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> <span class="sr-only">0% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> <span class="sr-only">80% Complete</span> </div> </div> <div class="progress progress-complete"> <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"> <span class="sr-only">100% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"> <span class="sr-only">50% Complete</span> </div> </div>

Tables

A simple table used to display data in rows and columns, which can be embedded within larger information displays.

Basic tables

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table"> <caption>Optional table caption.</caption> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> ... </tbody> </table>

Striped rows

# First Name Last Name Health Plan
1 Lance Gutin Cigna
2 Elliott Muñoz Florida Blue
3 Kevin Vigneault Humana
4 Todd Moy Wellpoint
<table class="table table-striped"> ... </table>

Hover rows

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover"> ... </table>

Contextual classes

# Column heading Column heading Column heading
1 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content
<table class="table"> <thead> ... </thead> <tbody> <tr class="active"> ... </tr> <tr class="success"> ... </tr> <tr class="info"> ... </tr> <tr class="warning"> ... </tr> <tr class="danger"> ... </tr> </tbody> </table>

Fixed Table

Fixed table layouts are required for .text-truncation

# Haiku Last Name Username
1 Haikus are easy; but sometimes they don't make sense; refrigerator Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-fixed"> <thead> <tr> <th class="col-md-1">#</th> <th class="col-md-3">Haiku</th> <th class="col-md-2">Last Name</th> <th class="col-md-5">Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td class="text-truncate">Haikus are easy; but sometimes they don't make sense; refrigerator</td> <td>Otto</td> <td>@mdo</td> </tr> ... </tbody> </table>

Typography

Headings

h1. Bootstrap heading Secondary text




h2. Bootstrap heading Secondary text




h3. Bootstrap heading Secondary text




h4. Bootstrap heading Secondary text




h5. Bootstrap heading Secondary text



h6. Bootstrap heading Secondary text



<h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6>

Subheaders

h1. Bootstrap heading




h2. Bootstrap heading




h3. Bootstrap heading




h4. Bootstrap heading




h5. Bootstrap heading



h6. Bootstrap heading



<h1 class="subheader">h1. Bootstrap heading</h1> <h2 class="subheader">h2. Bootstrap heading</h2> <h3 class="subheader">h3. Bootstrap heading</h3> <h4 class="subheader">h4. Bootstrap heading</h4> <h5 class="subheader">h5. Bootstrap heading</h5> <h6 class="subheader">h6. Bootstrap heading</h6>

Transformation Classes

Lowercase text

Uppercase text

Capitalized text

Truncated text on overflow

WrapTextWithoutBreakableCharacters

<p class="text-lowercase">Lowercase text</p> <p class="text-uppercase">Uppercase text</p> <p class="text-capitalize">Capitalized text</p> <p class="text-truncate">Truncated text on overflow</p> <p class="text-break">WrappedTextWithoutBreakableCharacters</p> <a href="#">Link to internal resource</a> <a href="#" class="external">Link to external resource</a> <a href="#"><small>Link with small text</small></a>

Header Text Section Header Link

<h3 class="section-header">Header Text <small><a href="#" class="section-header-link">Section Header Link</a></small> </h3>
<h2 class="page-header page-header-brand"> <div class="page-header-title"> <span class="app-icon app-icon-black">ar</span> Authorization Results Authorization Results </div> <div class="page-header-logo"> <a href="http://www.example.com" class=" spaces-logo holderjs"></a> </div> </h2>

Disclaimer

I have fully read this agreement and understand that I am entering into a legally binding agreement and that my organization is bound by the terms and conditions contained therein. I attest and certify that I am the Primary Controlling Authority for the organization named herein and that I possess the necessary legal authority to bind this organization. I further attest and certify my organization's designation as a Covered Entity under HIPAA, as more fully described in 45 CFR § 160.103.
<div class="disclaimer"> I have fully read this agreement... </div>

Disclaimer Unstyled

I have fully read this agreement and understand that I am entering into a legally binding agreement and that my organization is bound by the terms and conditions contained therein. I attest and certify that I am the Primary Controlling Authority for the organization named herein and that I possess the necessary legal authority to bind this organization. I further attest and certify my organization's designation as a Covered Entity under HIPAA, as more fully described in 45 CFR § 160.103.
<div class="disclaimer-unstyled"> I have fully read this agreement... </div>

Disclaimer Unstyled small text

I have fully read this agreement and understand that I am entering into a legally binding agreement and that my organization is bound by the terms and conditions contained therein. I attest and certify that I am the Primary Controlling Authority for the organization named herein and that I possess the necessary legal authority to bind this organization. I further attest and certify my organization's designation as a Covered Entity under HIPAA, as more fully described in 45 CFR § 160.103.
<div class="disclaimer-unstyled"> <small>I have fully read this agreement...</small> </div>

Agreement

veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur

doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio

veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur

doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio

veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur

doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio

veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur

doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio

veritatis doloremque ut hic et etvitae amet natus perferendisdolores illum et rerum officia autiste deserunt quis sed corporis explicabo qui non pariaturaccusantium molestias non aut ut utnumquam qui vero est nihil eum ullam autemrerum repellat dicta quae dolorest occaecati sapiente a cupiditatereprehenderit quibusdam nam eveniet voluptatem quis soluta quamdelectus consequatur qui incidunt voluptatem consequuntur

doloribus excepturi veritatis deleniti explicabo rerum quis aut sinta omnis numquamsaepe sint fugiatvoluptatem qui accusamus ad et idnon cumque aut molestiae hic corruptiveniam fuga libero vitae est ut facere optio

<div class="agreement"> ... </div>

Wizard

Horizontal

<div class="stepwizard"> <div class="stepwizard-row"> <a class="stepwizard-step complete" href="#step-1"> <span class="stepwizard-badge">1</span> <span class="stepwizard-title">First</span> </a> <a class="stepwizard-step active" href="#step-2"> <span class="stepwizard-badge">2</span> <span class="stepwizard-title">Second with some long text</span> </a> <a class="stepwizard-step" href="#step-3"> <span class="stepwizard-badge">3</span> <span class="stepwizard-title">Third</span> </a> <a class="stepwizard-step disabled" href="#step-4"> <span class="stepwizard-badge">4</span> <span class="stepwizard-title">Fourth with some really really really long text</span> </a> </div> </div>

Vertical

<div class="stepwizard stepwizard-stacked"> <div class="stepwizard-row"> <a class="stepwizard-step complete" href="#step-1"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">First (Complete)</span> </a> <a class="stepwizard-step active" href="#step-2"> <span class="stepwizard-badge">2</span> <span class="stepwizard-title">Second with some long text (Active)</span> </a> <a class="stepwizard-step" href="#step-3"> <span class="stepwizard-badge">3</span> <span class="stepwizard-title">Third</span> </a> <a class="stepwizard-step disabled" href="#step-4"> <span class="stepwizard-badge">4</span> <span class="stepwizard-title">Fourth with longest text ever written in a wizard (Disabled)</span> </a> </div> </div>

Progress horizontal

<div class="stepwizard stepwizard-progress"> <div class="stepwizard-row"> <a class="stepwizard-step complete" href="#step-1"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">First</span> </a> <a class="stepwizard-step active" href="#step-2"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">Second with some long text</span> </a> <a class="stepwizard-step" href="#step-3"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">Third</span> </a> <a class="stepwizard-step disabled" href="#step-4"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">Fourth with some really really really long text</span> </a> </div> </div>

Progress vertical

<div class="stepwizard stepwizard-progress stepwizard-stacked"> <div class="stepwizard-row"> <a class="stepwizard-step complete" href="#step-1"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">Complete</span> </a> <a class="stepwizard-step active" href="#step-2"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">Active</span> </a> <a class="stepwizard-step" href="#step-3"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">Normal</span> </a> <a class="stepwizard-step disabled" href="#step-4"> <span class="stepwizard-badge"></span> <span class="stepwizard-title">Disabled</span> </a> </div> </div>