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.

.custom-select.custom-select

.custom-select.custom-select-sm.custom-select.custom-select-sm

.custom-select.custom-select-lg.custom-select.custom-select-lg

.custom-select.rounded.custom-select.rounded

.custom-select.bg-red-400.bg-red-400.border-red-400.text-gray-100.custom-select.bg-red-400.bg-red-400.border-red-400.text-gray-100

.btn.btn-sm

.btn.btn-lg

.btn.rounded

.btn.rounded-sm

.btn.rounded-lg

.btn.btn-primary

.btn.btn-success

.btn.btn-info

.btn.btn-warning

.btn.btn-danger

.btn.btn-light

.btn.btn-dark

.btn.btn-blue

.btn.btn-red

.btn.btn-orange

.btn.btn-green

.btn.btn-red-100

.btn.btn-red-200

.btn.btn-red-300

.btn.btn-red-400

.btn.btn-red-500

.btn.btn-gray-100

.btn.btn-gray-200

.btn.btn-gray-300

.btn.btn-gray-400

.btn.btn-gray-500

.btn.btn-gray-600

.btn.btn-gray-700

.btn.btn-gray-800

.btn.btn-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.