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
  1. Ordered list - dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. 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

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.

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

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

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
Image Caption - Lorem ipsum dolor sit amet

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
Form Text - To give hints and things
CUSTOM FORMS . docs
MODAL . docs
SHADOWS . docs

Set global var to TRUE

No shadow
Small shadow
Regular shadow
Larger shadow
ALERTS . docs
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
CARDS . docs
Header

Brand card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

TABLES default non-active . docs
# Column Column Column Column
1 Content Content Content Content
2 Content Content Content Content
1 Content Content Content Content
2 Content Content Content Content