Colors
Standard
Status & Alerts
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>
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>
Add to Favorites
<button class="btn btn-add-favorites has-icon-left" data-toggle="button">
<span class="icon icon-star"></span>
Favorites
</button>
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>
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" 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" 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" 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>
Panels
Basic
Basic panel example
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Default
Title See More
Body
<div class="panel panel-default">
<h4 class="panel-heading panel-title">
Title
</h4>
<div class="panel-body">
Body
</div>
<footer class="panel-footer">
Footer
</footer>
</div>
Collapsible Panel
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et ligula ut elit mattis sodales. Fusce pharetra magna ut maximus maximus. Praesent vehicula nibh tincidunt elit congue malesuada.
semper, ut consectetur turpis sollicitudin. Etiam vel sodales enim. Integer sed varius dolor.
<div class="panel panel-default panel-collapsible">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" href="#exampleCollapse">
View more data
</a>
</h4>
</div>
<div id="exampleCollapse" class="collapse" aria-expanded="false">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et ligula ut elit mattis sodales. Fusce pharetra magna ut maximus maximus. Praesent vehicula nibh tincidunt elit congue malesuada.</p>
<p>semper, ut consectetur turpis sollicitudin. Etiam vel sodales enim. Integer sed varius dolor.</p>
</div>
</div>
</div>
Contextual classes
Title
Body
Title
Body
Title
Body
Title
Body
Title
Body
<div class="panel panel-primary">
...
</div>
<div class="panel panel-success">
...
</div>
<div class="panel panel-info">
...
</div>
<div class="panel panel-warning">
...
</div>
<div class="panel panel-danger">
...
</div>
Panel Card ⊗
.panel-cardhas been DEPRECATED in favor of.card. See Cards.
Availity Resources See More
Business Associate/Trading Partner
Ivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Sed posuere consectetur est at. 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.EDI Guidelines
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.Availity Technology Company
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.Patient Payments ACH
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.
<div class="panel panel-card">
<h4 class="panel-heading panel-title">
...
<a href="#" class="panel-heading-link">See More</a>
</h4>
<div class="panel-body">
...
</div>
</div>
Header ⊗
.panel-cardhas been DEPRECATED in favor of.card. See Cards.
News & Announcements See All
Sunday, 16 August 2014
Nulla vitae elit libero, a pharetra augue – nullam id dolor id nibh ultricies
Ivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Sed posuere consectetur est at.
Sunday, 17 August 2014
Nulla vitae elit libero, a pharetra augue – nullam id dolor id nibh ultricies
Ivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Sed posuere consectetur est at.
<div class="panel panel-card">
<div class="panel-heading">
<h4 class="panel-card-title">
...
</h4>
</div>
<div class="panel-body">
...
</div>
</div>
Inverse ⊗
.panel-cardhas been DEPRECATED in favor of.card. See Cards.
Value-Added Services See All
Patient Payments
You don't want to spend time and money chasing down payments. So collect payments upfront - before patients leave the office - with Availity patient payments. Learn More
Electronic Remittance Advice Delivery
You can enroll with various payers to receive your electronic remittance advice (ERA or 835) files delivered to the Availity Web Portal. Access the Availity Health Plan Partners list for a list of participating payers and enrollment instructions.
<div class="panel panel-inverse panel-card">
...
</div>
Card Summary ⊗
.panel-cardhas been DEPRECATED in favor of.card. See Cards.
Anthem
Fee Schedule
Humana
Credentialing
Cigna
EFT Enrollment
Florida Blue
Provider Management
Aetna
Payment Estimator
<div class="container-fluid container-md-height">
<div class="row row-md-height">
<div class="col-md-2 col-md-height">
<div class="panel panel-summary">
<div class="panel-body">
<img data-src="holder.js/75x75" alt="Anthem Logo" class="img-responsive">
<h5 class="subheader">Anthem</h5>
<h4>Fee Schedule</h4>
</div>
</div>
</div>
</div>
</div>
Card Apps ⊗
.panel-cardhas been DEPRECATED in favor of.card. See Cards.
Eligibility & Benefits
Get patient eligibility and benefit information along with co-pay and deductibles in real-time or batch.ERA Registration
Register to receive your remittance advices electronically for multiple payers.Custom Reporting
Get customized patient reports from your participating payer(s).Claims Management Tool
A single destination for creating transparency into claim and payment transaction.
<div class="container-fluid container-md-height">
<div class="row row-md-height">
<div class="col-md-3 col-md-height">
<div class="panel panel-summary">
<div class="panel-body">
<span class="app-icon app-icon-lg app-icon-orange">EB</span>
<h3>Eligibility & Benefits</h3>
Get patient eligibility and benefit information along with co-pay and deductibles in real-time or batch.
</div>
</div>
</div>
</div>
</div>
Containers
To see full page examples for different container sizes please see our examples page
Small
...
<div class="container-sm">
...
</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>
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
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="#">
<img alt="Availity Logo" src="images/logo-availity.png">
</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="#">
<img alt="Availity Logo" src="images/logo-availity.png">
</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="#">
<img alt="Availity Logo" src="images/logo-availity.png">
</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="#">
<img alt="Availity Logo" src="images/logo-availity.png">
</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="#messages1" 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="messages1">
<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>
Nav Cards
Pharmacy Prior Authorization
Fee Schedule
Provider Management
<div role="tabpanel">
<div class="tab-content tab-bump">
<div role="tabpanel" class="tab-pane active" id="home7">
<p class="lead">Pharmacy Prior Authorization</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile7">
<p class="lead">Fee Schedule</p>
</div>
<div role="tabpanel" class="tab-pane" id="messages7">
<p class="lead">Provider Management</p>
</div>
</div>
<ul class="nav nav-cards nav-justified " role="tablist">
<li class="active">
<a href="#home7" role="tab" data-toggle="tab">
<h6 class="subheader">Humana</h6>
Pharmacy Prior Authorization
</a>
</li>
<li>
<a href="#profile7" role="tab" data-toggle="tab">
<h6 class="subheader">Wellpoint</h6>
Fee Schedule
</a>
</li>
<li>
<a href="#messages7" role="tab" data-toggle="tab">
<h6 class="subheader">Florida Blue</h6>
Provider Management
</a>
</li>
</ul>
</div>
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="#">
<img alt="Availity Logo" src="images/logo-availity.png">
</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>
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
<fieldset class="panel-body">
<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>
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.
List management
<div class="form-group">
<label for="">Diagnosis Code(s)</label>
<div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label for="input3">Item 1</label>
<input type="text" class="form-control" id="input3" placeholder="">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="input4">Item 2</label>
<input type="text" class="form-control" id="input4" placeholder="">
</div>
</div>
</div>
</div>
<a href="#">+ Add another code</a>
</div>
Basic Form
<form>
<div class="panel">
<fieldset class="panel-body">
<h2 class="subheader">Requesting Provider Information</h2>
<div class="form-group">
<label>Requesting Provider Type</label>
<div class="radio-group-vertical">
<label>
<input type="radio" name="group1" value="option1">Provider
</label>
<label>
<input type="radio" name="group1" value="option2">Payer
</label>
</div>
</div>
<div class="form-group">
<label for="input5">Express Entry - Requesting Provider
<span class="inline-help" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip stuff goes here">What’s this?</span>
</label>
<select class="form-control" id="input5">
<option>Select one</option>
<option>Option</option>
<option>Option</option>
<option>Option</option>
</select>
</div>
<div class="form-group">
<label for="input7">Zipcode (Optional)</label>
<div class="row">
<div class="col-sm-7">
<input type="text" class="form-control" id="input7" placeholder="">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" id="input8" placeholder="">
</div>
</div>
</div>
<div class="form-group">
<label for="input10">Service Quantity/Type</label>
<div class="row">
<div class="col-sm-4">
<input type="text" class="form-control" id="input10" placeholder="">
</div>
<div class="col-sm-8">
<select class="form-control" id="input11">
<option>Select one</option>
<option>Option</option>
<option>Option</option>
<option>Option</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="">Diagnosis Code(s)
<span class="inline-help" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip stuff goes here">What’s this?</span>
</label>
<div class="form-group-block">
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label for="input9">Code</label>
<input type="text" class="form-control" id="input9" placeholder="">
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="date">Date</label>
<input type="text" class="form-control" id="date" placeholder="mm/dd/yyyy">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label for="input14">Code</label>
<input type="text" class="form-control" id="input14" placeholder="">
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="date2">Date</label>
<input type="text" class="form-control" id="date2" placeholder="mm/dd/yyyy">
</div>
</div>
</div>
</div>
<a href="#">+ Add another code</a>
</div>
</fieldset>
</div>
<div class="form-controls">
<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>
Inline Form
<form class="form-inline" role="form">
<div class="form-group">
<label for="input20">Sort By:</label>
<select class="form-control" id="input20">
<option>Select one</option>
<option>Option</option>
<option>Option</option>
<option>Option</option>
</select>
</div>
<div class="form-group">
<label>Keyword Search:</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="icon icon-search"></i></button>
</span>
</div>
</div>
<div class="form-group">
<button id="filters-toggle" class="btn btn-default" data-toggle="button" data-original-title="" title="">
<span><i class="icon icon-filter"></i></span>
</button>
</div>
12 batches found
</form>
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>
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>
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>
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">©2014 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>
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>
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.
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.
<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>
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">
<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">
<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>
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>
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>
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>
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>
Wells
Large
Regular
Small
<div class="well well-lg">
...
</div>
<div class="well">
...
</div>
<div class="well well-sm">
...
</div>