Alerts and Warnings
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oops! Change a few things up and try submitting again.
<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
<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
<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
<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
<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
<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
<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
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 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.
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>
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
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.
<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 somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial 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
View more data
Aut explicabo quas nihil quia ex aspernatur quod sint. Ut blanditiis itaque ab blanditiis et aut amet. Saepe voluptatem exercitationem tenetur necessitatibus. Amet debitis cupiditate sunt distinctio saepe nostrum laboriosam omnis.
Natus voluptatem natus impedit. Facere voluptatem voluptas velit vel. Qui id reprehenderit beatae ea et sit blanditiis excepturi.
<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>
Header and Footer
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 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
<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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<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 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 card has supporting text below as a natural lead-in to additional content.
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 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 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 title
This card has supporting text below as a natural lead-in to additional content.
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 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 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.
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.
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 a ante.
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
Status & Alerts
Containers
To see full page examples for different container sizes please see our examples page
Small
...
<div class="container-sm">
...
</div>
Dropdowns
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>
Feedback Survey
Styles for implimenting feedback surveys.
Feedback Prompt
<div class="feedback-survey">
<h5>Feedback Prompt</h5>
<div class="text-center">
<span class="input-group-addon btn"><i class="icon icon-xl icon-smile"></i></span>
<span class="input-group-addon btn"><i class="icon icon-xl icon-meh"></i></span>
<span class="input-group-addon btn"><i class="icon icon-xl icon-frown"></i></span>
</div>
<p></p>
<form>
<div class="survey-form expanded">
<div class="survey-group">
<div class="select-wrapper">
<select class="form-control">
<option>Select one</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>
<textarea class="form-control" rows="2" placeholder="Tell us why.">
</textarea>
<label class="input-group-addon btn btn-inverse">
Send
</label>
</div>
</div>
</form>
</div>
Footer
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
<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
<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 966343462
Customer ID 8964733372
Certification Number
123456789
Patient Name
Taylor, Matthew
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
<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
<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-groupwithout anchors, the.list-group-selectableclass 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>
Navbar
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 classnavbar-fixed-topto yournavtag:
<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>
Navbar Notifications
<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>
Navs
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
<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
<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
80% Complete
100% Complete
Processing
<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
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<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 | ||
<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 |
<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>
Links
<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>
Section header with a link
Header Text Section Header Link
<h3 class="section-header">Header Text
<small><a href="#" class="section-header-link">Section Header Link</a></small>
</h3>
Page header with branded logo
<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>