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.



.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


This is an alert - .alert.alert-success
This is an alert - .alert.alert-info"
This is an alert - .alert.alert-warning
This is an alert - .alert.alert-danger

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

.card-header
.card-body
card header
card body

<div class="card mb-3 bg-primary">
    <div class="card-header">...</div>
    <div class="card-body">...</div>
</div>
        
card header
card body

<div class="card mb-3 bg-red-200">
    <div class="card-header">...</div>
    <div class="card-body">...</div>
</div>
        
card header
card body

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

card header
card body

<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

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_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

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.

Section - .section.bg-primary - with link text included
Section - .section.bg-info - with link text included
Section - .section.bg-success - with link text included
Section - .section.bg-red-200 - with link text included
Section - .section.bg-red-300 - with link text included
Section - .section.bg-gray-500 - with link text included

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.

Section - .section.border.border-primary
Section - .section.border-right.border-primary
Section - .section.border.border-info
Section - .section.border.border-success
Section - .section.border.border-red-100
Section - .section.border.border-gray-300