Samples
Headline Level 1
This is paragraph text. Etiam im
Headline Level 1
This is paragraph text. Etiam imperdiet ligula lacus, sollicitudin venenatis sem sagittis vel. In lacus diam, scelerisque non risus at, semper volutpat purus. Nunc lobortis nisi ipsum, ornare euismod urna pulvinar in.
Headline Level 2
This is paragraph text. Etiam imperdiet ligula lacus, sollicitudin venenatis sem sagittis vel. In lacus diam, scelerisque non risus at, semper volutpat purus. Nunc lobortis nisi ipsum, ornare euismod urna pulvinar in.
Headline Level 3
This is paragraph text. Etiam imperdiet ligula lacus, sollicitudin venenatis sem sagittis vel. In lacus diam, scelerisque non risus at, semper volutpat purus. Nunc lobortis nisi ipsum, ornare euismod urna pulvinar in.
Headline Level 4
This is paragraph text. Donec velit quam, scelerisque nec iaculis pharetra, posuere eu lectus. Nam vel dui augue. Proin nec odio ut ipsum imperdiet dictum. Donec varius justo sed metus cursus, id mattis libero tincidunt.
Headline Level 5
- Unordered list. Phasellus ac mauris tincidunt, malesuada massa nec, tempor nisl.
- Praesent nec tortor eget odio vestibulum consectetur sit amet sed metus.
- Donec iaculis urna quis imperdiet commodo.
- Etiam accumsan turpis nec tortor ultricies consectetur.
Headline Level 6
This is sample text, .text-condensed.
This is sample text, .text-weight-light.
This is sample text, .text-weight-normal.
This is sample text, .text-weight-bold.
This is sample text, .text-12.
This is sample text, .text-14.
This is sample text, .text-16.
This is sample text, .text-18.
This is sample text, .text-20.
This is sample text, .text-24.
This is sample text, .text-28.
This is sample text, .text-32.
This is sample text, .text-muted.
This is sample text, .text-primary.
This is sample text, .text-success.
This is sample text, .text-info.
This is sample text, .text-warning.
This is sample text, .text-danger.
This is sample text, .text-light.
This is sample text, .text-dark.
This is sample text, .text-blue.
This is sample text, .text-red.
This is sample text, .text-orange.
This is sample text, .text-green.
This is sample text, .text-red-100.
This is sample text, .text-red-200.
This is sample text, .text-red-300.
This is sample text, .text-red-400.
This is sample text, .text-red-500.
This is sample text, .text-gray-100.
This is sample text, .text-gray-200.
This is sample text, .text-gray-300.
This is sample text, .text-gray-400.
This is sample text, .text-gray-500.
This is sample text, .text-gray-600.
This is sample text, .text-gray-700.
This is sample text, .text-gray-800.
This is sample text, .text-gray-900.
Cards
Cards can use all the usual utility classes: text-*, border-*, bg-*, etc
Background set on card, the card-header will be slightly darker automatically
<div class="card mb-3 bg-primary">
<div class="card-header">...</div>
<div class="card-body">...</div>
</div>
<div class="card mb-3 bg-red-200">
<div class="card-header">...</div>
<div class="card-body">...</div>
</div>
<div class="card mb-3 bg-gray-200">
<div class="card-header">...</div>
<div class="card-body">...</div>
</div>
Remove borders with .border-0 set on .card as well as .card-header.
<div class="card mb-3 border-0">
<div class="card-header border-0 bg-black text-white">...</div>
<div class="card-body bg-gray-100">...</div>
</div>
Card with collapsing body
<div class="card mb-3 border-0 card-collapse">
<div class="card-header border-0 bg-black text-white">
<a href="#sample_card_1"
data-toggle="collapse"
role="button"
aria-expanded="false"
aria-controls="sample_card_1"
id="sample_card_1_button"
class="text-white dropdown-toggle collapsed"
>...</a>
</div>
<div id="sample_card_1" class="card-body bg-gray-100 collapse" aria-labeledby="sample_card_1_button">...</div>
</div>
Card with collapsing body, open to start -- remove class .collapsed and set aria-expanded="true" on anchor, set class of .show on card-body
<div class="card mb-3 border-0 card-collapse">
<div class="card-header border-0 bg-black text-white">
<a href="#sample_card_2"
data-toggle="collapse"
role="button"
aria-expanded="true"
aria-controls="sample_card_2"
id="sample_card_2_button"
class="text-white dropdown-toggle"
>...</a>
</div>
<div id="sample_card_2" class="card-body bg-gray-100 collapse show" aria-labeledby="sample_card_2_button">...</div>
</div>
Backgrounds
Set backgrounds: .bg-primary, .bg-warning, .bg-dark, .bg-red-300, .bg-gray-800, etc.
Borders
Set borders: .border, .border-top, .border-right, .border-bottom, .border-left
Set border colors: .border-primary, .border-info, .border-red-100, .border-gray-300, etc.