Lead text - ivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo.

Hello. I'm a little bit of body text. Plain and simple.

Paragraph - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Paragraph - In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.

Unordered List
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at

Paragraph - Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc blandit vel luctus pulvinar hendrerit id lorem.

Some text with an border around it. Check the border color!

Unordered List - dolor sit amet
Consectetur adipiscing elit
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc

Ordered list - dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit

Heading with DIVIDER

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

PRE / CODE default non-active

For example, <section> should be wrapped as inline.


        .example-element {
        margin-bottom: 1rem;
        }

h1. Bootstrap heading

Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor aenean massa cum sociis natoque penatibus et magnis dis parturient.

h2. Bootstrap heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor aenean massa cum sociis natoque penatibus et magnis dis parturient. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor aenean massa cum sociis natoque penatibus et magnis dis parturient.Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.

Display 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor aenean massa cum sociis natoque penatibus et magnis dis parturient.

Display 2

Display 3

Display 4

BLOCKQUOTES . docs

Blockquote - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

ICONS

icon-twitter icon-facebook icon-pinterest icon-linkedin icon-instagram icon-chevron-thin-left icon-chevron-thin-right icon-youtube icon-file-text2 icon-phone icon-location

IMAGE + CAPTION via <figure> . docs

Add extra padding or margin to an element.

COLORS

100

200

300

400

500

600

700

800

900

$black

.bg-brand

.bg-brand-accent

.bg-brand-accent-alt

.bg-primary

.bg-secondary

$brand-100

$brand-200

$brand-300

.bg-brand

$brand-700

$brand-800

$brand-900

$brand-accent-100

$brand-accent-200

$brand-accent-300

.bg-brand-accent

$brand-accent-700

$brand-accent-800

$brand-accent-900

$brand-accent-alt-100

$brand-accent-alt-200

$brand-accent-alt-300

.bg-brand-accent-alt

$brand-accent-alt-700

$brand-accent-alt-800

$brand-accent-alt-900

$blue

$indigo

$purple

$pink

$red

$orange

$yellow

$green

$teal

$cyan

BS Default colors

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

.bg-transparent

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

BADGES . docs

Primary Secondary Success Danger Warning Info Light Dark

BUTTONS . docs

FORMS . docs

CUSTOM FORMS . docs

Custom check

Custom radio

MODAL . docs

SHADOWS . docs

Set global var to TRUE

No shadow

Small shadow

Regular shadow

Larger shadow

ALERTS . docs

This is a primary alert with an example link.

This is a secondary alert with an example link.

This is a success alert with an example link.

This is a danger alert with an example link.

This is a warning alert with an example link.

This is a info alert with an example link.

This is a light alert with an example link.

This is a dark alert with an example link.

LIST GROUP . docs

List group - Dapibus ac facilisis in
Cras justo odio
Dapibus ac facilisis in
Porta ac consectetur ac
Vestibulum at eros
Cras justo odio
Dapibus ac facilisis in
Porta ac consectetur ac