Typography

Typography

Headings

H1. Bootstrap heading

H2. Bootstrap heading

H3. Bootstrap heading

H4. Bootstrap heading

H5. Bootstrap heading
H6. Bootstrap heading

H1. Bootstrap heading Secondary text

H2. Bootstrap heading Secondary text

H3. Bootstrap heading Secondary text

H4. Bootstrap heading Secondary text

H5. Bootstrap heading Secondary text
H6. Bootstrap heading Secondary text

Paragraph, Emphasis, Link, Code & Tooltip

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I am bold and i am strong, velit velit hendrerit ante, et mattis sem eros non lorem. Sed sit amet nibh eu nibh scelerisque vehicula sed non quam. Nunc ipsum dolor sit amet, consectetur euismod, orci a euismod venenatis, I am italic and i am stylish. Sed sit amet nibh eu nibh I am a tooltip sed non quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum Nunc euismod, orci a euismod venenatis, velit velit hendrerit ante, et mattis sem eros non lorem. Sed sit amet nibh eu nibh I am underline and i never fell down. Nunc euismod, orci a <meta charset="utf-8"> euismod venenatis, velit velit hendrerit ante, et mattis sem eros non lorem. Sed siteuismod, orci a euismod venenatis, velit velit hendrerit ante, et mattis sem eros non lorem. I am a link and you can click me. Sed sit amet nibh eu nibh scelerisque vehicula sed non quam.


Highlights

You need to use the class highlight-XXX (replace XXX with color name) to highlight text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum Nunc euis non lorem. Sed sit amet nibh eu nibh scelerisque vehicula sed non quam. Nunc euismod, orci a euismod venenatis, velit velit hendrerit ante, et mattis sem eros non lorem. Sed sit amet nibh eu nibh scelerisque vehicula sed non quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum Nunc euismod, orci a euismod venenatis, velit velit hendrerit ante, et mattis sem eros non lorem. Sed sit amet nibh eu nibh scelerisque vehicula sed non quam. Nunc euismod, orci a euismod venenatis, velit velit hendrerit ante, et mattis sem eros non lorem. Sed sit amet nibh eu nibh scelerisque vehicula sed non quam.


Dropcaps

Add span tag with the class dropcap-x (replace x with 1 or 2 or 3) to the first letter of the first word for dropcap.

Aorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt ligula eu blandit placerat. Cras lacinia erat non semper mattis. Nulla in congue tortor. Integer iaculis leo at porttitor molestie. Praesent ullamcorper interdum orci nec semper. Nulla condimentum at dolor nec rutrum. Nulla commodo egestas hendrerit.
Pellentesque in nibh mi. Suspendisse potenti. Pellentesque blandit dui eros, ut pharetra massa ornare eget. Donec vehicula nec purus a tempor. Nulla in congue tortor. Integer iaculis leo at porttitor molestie. Praesent ullamcorper interdum orci nec semper. Nulla condimentum at dolor nec rutrum.
Xellentesque in nibh mi. Suspendisse potenti. Pellentesque blandit dui eros, ut pharetra massa ornare eget. Donec vehicula nec purus a tempor. Nulla in congue tortor. Integer iaculis leo at porttitor molestie. Praesent ullamcorper interdum orci nec semper. Nulla condimentum at dolor nec rutrum.

BlockQuotes

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

Author Name

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

Author Name

List

Add the class list-XXX (replace XXX with 1 to 9) to ul tag.


  • Denounce 1with righteous indignation
  • Dislike so beguiled and demoralized
  • The charms of pleasure of the moment
  • That cannot foresee the pain trouble
  • Dislike so beguiled and demoralized
  • Denounce 1with righteous indignation
  • Dislike so beguiled and demoralized
  • The charms of pleasure of the moment
  • That cannot foresee the pain trouble
  • Dislike so beguiled and demoralized
  • Denounce 1with righteous indignation
  • Dislike so beguiled and demoralized
  • The charms of pleasure of the moment
  • That cannot foresee the pain trouble
  • Dislike so beguiled and demoralized
  • Denounce with righteous indignation
  • Dislike so beguiled and demoralized
  • The charms of pleasure of the moment
  • That cannot foresee the pain trouble
  • Dislike so beguiled and demoralized
  • Denounce with righteous indignation
  • Dislike so beguiled and demoralized
  • The charms of pleasure of the moment
  • That cannot foresee the pain trouble
  • Dislike so beguiled and demoralized
  • Denounce with righteous indignation
  • Dislike so beguiled and demoralized
  • The charms of pleasure of the moment
  • That cannot foresee the pain trouble
  • Dislike so beguiled and demoralized
  • Denounce with righteous indignation
  • Dislike so beguiled and demoralized
  • The charms of pleasure of the moment
  • That cannot foresee the pain trouble
  • Dislike so beguiled and demoralized
  • Denounce with righteous indignation
  • Dislike so beguiled and demoralized
  • The charms of pleasure of the moment
  • That cannot foresee the pain trouble
  • Dislike so beguiled and demoralized
  • Denounce with righteous indignation
  • Dislike so beguiled and demoralized
  • The charms of pleasure of the moment
  • That cannot foresee the pain trouble
  • Dislike so beguiled and demoralized

Grid System

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit sem sed felis volutpat feugiat. Vivamus vitae risus eu est facilisis euismod. Nulla sodales neque eu tincidunt egestas.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit sem sed felis volutpat feugiat. Vivamus vitae risus eu est facilisis euismod. Nulla sodales neque eu tincidunt egestas.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit sem sed felis volutpat feugiat. Vivamus vitae risus eu est facilisis euismod. Nulla sodales neque eu tincidunt egestas.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit sem sed felis volutpat feugiat. Vivamus vitae risus eu est facilisis euismod. Nulla sodales neque eu tincidunt egestas.


One Third

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit sem sed felis volutpat feugiat. Vivamus vitae risus eu est facilisis euismod. Nulla sodales neque eu tincidunt egestas.

One Third

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit sem sed felis volutpat feugiat. Vivamus vitae risus eu est facilisis euismod. Nulla sodales neque eu tincidunt egestas.

One Third

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit sem sed felis volutpat feugiat. Vivamus vitae risus eu est facilisis euismod. Nulla sodales neque eu tincidunt egestas.


One Half

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit sem sed felis volutpat feugiat. Vivamus vitae risus eu est facilisis euismod. Nulla sodales neque eu tincidunt egestas.

One Half

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit sem sed felis volutpat feugiat. Vivamus vitae risus eu est facilisis euismod. Nulla sodales neque eu tincidunt egestas.


One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit sem sed felis volutpat feugiat. Vivamus vitae risus eu est facilisis euismod. Nulla sodales neque eu tincidunt egestas.

Two Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit sem sed felis volutpat feugiat. Vivamus vitae risus eu est facilisis euismod. Nulla sodales neque eu tincidunt egestas. In suscipit sem sed felis volutpat feugiat. Vivamus vitae risus eu est facilisis euismod. Nulla sodales neque eu tincidunt egestas. In suscipit sem sed felis volutpat feugiat. Vivamus vitae risus eu est facilisis euismod. Nulla sodales neque eu tincidunt egestas.