Drupal's messages

Sample status message. Page Typography has been updated.
Sample warning message. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Sample warning message. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Darth Maul
  • Luke Skywalker
  • General Grievous
  • Boba Fett
  • Leia Organa
  • Darth Maul
  • Luke Skywalker
  • General Grievous
  • Boba Fett
  • Leia Organa
  • Darth Maul
  • Luke Skywalker
  • General Grievous
  • Boba Fett
  • Leia Organa
  • Darth Maul
  • Luke Skywalker
  • General Grievous
  • Boba Fett
  • Leia Organa
  • Create your HTML list
  • Add your Font Awesome icons as bullets
  • Style your new custom bullet points!
  • Check List lorem ipsum aperia
  • Check List lorem ipsum aperia
  • Check List lorem ipsum aperia
  • Check List lorem ipsum aperia

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading
with muted text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Example body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following is rendered as bold text.

The following is rendered as italicized text.

An abbreviation of the word attribute is attr.

Emphasis classes

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Blockquotes

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

Someone famous in Source Title

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

Someone famous in Source Title

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

Someone famous in Source Title

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Unordered

  • Lorem ipsum dolor sit amet, consectetur
  • Nullam sed massa quis sagittis tempor
  • Ut rutrum sem vel augue rhoncus
  • Cras aliquam accumsan lorem ac cursus
  • Vestibulum lobortis enim felis, non sem
    • Lorem ipsum dolor sit amet, consectetur
    • Nullam sed massa quis sagittis tempor
  • Sed tristique blandit leo sed egestas
  • Phasellus quis pulvinar nibh semper

Ordered

  1. Lorem ipsum dolor sit amet, consectetur
  2. Nullam sed massa quis sagittis tempor
  3. Ut rutrum sem vel augue rhoncus
  4. Cras aliquam accumsan lorem ac cursus
  5. Vestibulum lobortis enim felis, non sem
    1. Lorem ipsum dolor sit amet, consectetur
    2. Nullam sed massa quis sagittis tempor
  6. Sed tristique blandit leo sed egestas
  7. Phasellus quis pulvinar nibh semper

With icons


  • Lorem ipsum dolor sit amet, consectetur

  • Nullam sed massa quis sagittis tempor

  • Ut rutrum sem vel augue rhoncus

  • Cras aliquam accumsan lorem ac cursus

  • Vestibulum lobortis enim felis, non sem

  • Lorem ipsum dolor sit amet, consectetur

  • Nullam sed massa quis sagittis tempor

  • Sed tristique blandit leo sed egestas

  • Phasellus quis pulvinar nibh semper

Unstyled

  • Lorem ipsum dolor sit amet, consectetur
  • Vestibulum lobortis enim felis, non sem
    • Lorem ipsum dolor sit amet, consectetur
  • Lorem ipsum dolor sit amet, consectetur

Inline

  • One
  • Two
  • Three

Description

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

Horizontal description

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Paragraphs using
.h*
classes


h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Display headings


.display-1|2|3|4
classes allows for enlarged & bolder headings for use as page titles for example.

Display 1

Display 2

Display 3

Display 4

Secondary heading text


To include secondary heading text you can include text wrapped in
small
tags. Use the
.d-block
class to make in show on the next line.

Fancy display heading
With faded secondary text


Fancy display heading
With faded secondary text


Lead Text

Add the
.lead
class to any
p
badge to enlarge the text and line height.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.


Inline text elements

Various text element/badge helpers.

mark
: You can use the mark badge to
highlight
text.

del
:
This line of text is meant to be treated as deleted text.

s
:
This line of text is meant to be treated as no longer accurate.

ins
:
This line of text is meant to be treated as an addition to the document.

u
:
This line of text will render as underlined

small
:
This line of text is meant to be treated as fine print.

strong
: This line rendered as bold text.

em
: This line rendered as italicized text.


Abbreviations

Use the
abbr
badge to hide text which is shown when any element is hovered.

attr

HTML


Blockquotes

Add the class
.blockquote
to
blockquote
elements to implment the default simnple styling, you can also use the
.blockquote-footer
class for citing the quote source.

Default

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


Someone famous in
Source Title


Default Align Right

Add the class
.text-right
to flip the quote to align right.

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


Someone famous in
Source Title


Bubble Style

Add the class
.blockquote-bubble
to the
blockquote
element and the class
.blockquote-bubble-content
to any inner element to make the quote display like a speach bubble.

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


Jimi Bloggs
Someone famous in
Source Title


Bubble Style Align Right

Add the class
.text-right
to flip the quote to align right.

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


Someone famous in
Source Title
Jimi Bloggs


Lists

Default Unordered Lists

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Default Ordered Lists

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Unstyled Lists

Add the class
.list-unstyled
to
ul
elements to remove all default styling from the list.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Inline Lists

Add the class
.list-inline
to the
ul
element and
.list-inline-item
to each list item.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Bordered Lists

Add the class
.list-bordered
to add a bottom border to each list item.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Large Lists

Add the class
.list-lg
to enlarge the font size and padding on list items.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Small Lists

Add the class
.list-sm
to decrease the font size and padding on list items.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Icons Lists

Add the class
.list-item-icon
to each icon in the list.

You can use all icons listed on the icons page.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Extras

Text alignment

.text-justify

Align justify text: Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.


.text-BREAKPOINT-ALIGN
Class

Adjust text alignment based on screenwidth using the format:
.text-BREAKPOINT-ALIGN
ie.
.text-sm|md|lg|xl-left|center|right

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Center aligned text on viewports sized SM (small) or wider.

Center aligned text on viewports sized MD (medium) or wider.

Center aligned text on viewports sized LG (large) or wider.

Center aligned text on viewports sized XL (extra-large) or wider.


Text case, weight & italics

Easily alter text case, weight & italics using these helper classes.

.text-lowercase
: Lowercased text.

.text-uppercase
: Uppercased text.

.text-capitalize
: CapiTaliZed text.

.font-weight-bold
: Bold text.

.font-weight-normal
: Normal weight text.

.font-italic
: Italic text.

.text-fancy
: Normal text with something a bit text-fancy can be nice!.

.text-shadow
: Text with shadow.


Responsive Text Size

Screen xs
.font-xs-x1
.font-xs-x2
.font-xs-x3
.font-xs-x4
.font-xs-x5
.font-xs-x6
.font-xs-x7
.font-xs-x8
.font-xs-x9
.font-xs-x10
Screen sm
.font-sm-x1
.font-sm-x2
.font-sm-x3
.font-sm-x4
.font-sm-x5
.font-sm-x6
.font-sm-x7
.font-sm-x8
.font-sm-x9
.font-sm-x10
Screen md
.font-md-x1
.font-md-x2
.font-md-x3
.font-md-x4
.font-md-x5
.font-md-x6
.font-md-x7
.font-md-x8
.font-md-x9
.font-md-x10
Screen lg
.font-lg-x1
.font-lg-x2
.font-lg-x3
.font-lg-x4
.font-lg-x5
.font-lg-x6
.font-lg-x7
.font-lg-x8
.font-lg-x9
.font-lg-x10