container-header

Typography

container-breadcrumb
Settings
Fixed sidebar
Fixed footer
Fixed top navbar
Collapse sidebar
Boxed
Background
Default
Dark
Light
Themes
Default
White Light
Blue Navy
Blue Sky
Lime Lemon
Star Dust
Green Tea
Orange Round
Yellow Sun
Deep Purple
Yummy Chocolate
Dark Night
Soft Green
Wheel Red

Headings

Headings
Define heading using next tags: <h1/>, <h2/>, <h3/>, <h4/>, <h5/>, <h6/>
<h6>  Strong Heading Normal Heading Small Heading
<h5>  Strong Heading Normal Heading Small Heading

<h4>  Strong Heading Normal Heading Small Heading

<h3>  Strong Heading Normal Heading Small Heading

<h2>  Strong Heading Normal Heading Small Heading

<h1>  Strong Heading Normal Heading Small Heading


To define small and strong headins use <small>and <strong>tags.
Bordered Headings
Define bordered headings using next classes: .bordered, .bordered-dark, .bordered-dotted, .bordered-dotted-dark, .bordered-dashedor .bordered-dashed-dark

Bordered heading example

Dark bordered heading example

Dotted bordered heading example

Dark dotted bordered heading example

Dashed bordered heading example

Dark dashed bordered heading example

Text styling

Small font
Define small fonts using next tag: <small/>
Text alignment
Define text alignment using next classes: .to-left, .to-center, .to-right, .to-justifyor .to-nowrap

Lefttext alignment .to-left

Centertext alignment .to-center

.to-right Righttext alignment

Justifiedtext alignment .to-justify

No wraptext alignment .to-nowrap

Text codeand highlight
Define font code or highlight using next tags: <code/>and <mark/>
Tag <code/> This is code example
Tag <mark/> This is marked text example
Font weight
Define font weight using next classes: .light, .normal, .boldor .extra-bold
.light

Light font example

.bold

Bold font example

.normal

Normal font example

.extra-bold

Extra-bold font example

.fw-300

300 Font Weight font example

.fw-400

400 Font Weight font example

.fw-600

600 Font Weight font example

.fw-700

700 Font Weight font example

.fw-800

800 Font Weight font example

Text uppercaseand lowercaseand capitalize
Define font uppercase, lowercase or capitalize using next classes: .uppercase.lowercase.capitalize.small-caps
.lowercase

lowercase example

.capitalize

capitalize example

.uppercase

uppercase example

.small-caps

Small caps example

Font Style
Define font style using next classes: .italic, .unselectableor tags: <u/>, <ins/>, <s/>or <del/>
.italic

Italic font example

.unselectable

Unselectable text example

<del/>

Deleted text example

<s/>

Strikethrough text example

<u/>

Underlined text example

<ins/>

Inserted text example

Miscellanous

Initial capital Dropped

Is a large dropped initial capital letter. Can be used to begin a document or a chapter, or to add interest to a newsletter or invitation. To drop the initial capital letter use the class .dropcap.

All boostrap colors .dropcap-primary.dropcap-info ... and their light and dark version .dropcap-warning-light.dropcap-warning-dark ...

All theme colors .dropcap-sky ... and their light version .dropcap-sky-light ...


Default bootstrap colors (Normal, light and dark)

Example: .dropcap-success, .dropcap-success-lightand .dropcap-success-dark

Theme colors

Example: .dropcap-greenand .dropcap-green-light

Block quotes

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation. (Wikipedia)

Define block quotes using <blockquote>tag. Add add footer defining <footer>child.
Someone famous in New York Times
Someone famous in New York Times
Abbreviations
The <abbr>tag defines an abbreviation or an acronym, like "Mr.", "Jan.", "WWW"...

An abbreviation of the word WWW.

Format Address
Deemble & Co.
603 Orchard Street
Gastonia, NC 28052
P:(987) 654-3210
F:(987) 654-3211

Peter Boussa
p.boussa@example.com

Descriptions

Descriptions
Use dltag to define description list.
Description list
Use it to define terms and conditions
Lorem
Lorem ipsum dolor sit amet
Ipsum
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Descriptions Horizontal
Use dltag with .dl-horizontalclass.
Horizontal description lists
Use it to define terms and conditions
Lorem
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Ipsum
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Dolor
Lorem ipsum dolor sit amet

Lists

Lists
RegularList

Create a list with <ul>tag.

  • Lorem ipsum 1
  • Lorem ipsum 2
  • Lorem ipsum 3
  • Lorem ipsum 4
OrderedList

Create an ordered list with <ol>tag.

  1. Lorem ipsum 1
  2. Lorem ipsum 2
  3. Lorem ipsum 3
  4. Lorem ipsum 4

Ordered List Type I

Create an ordered list with <ol>tag and add type="I"attribute.

  1. Lorem ipsum 1
  2. Lorem ipsum 2
  3. Lorem ipsum 3
  4. Lorem ipsum 4
UnstyledList
Create a list with .non-styled-listclass.

  • Lorem ipsum 1
  • Lorem ipsum 2
  • Lorem ipsum 3
  • Lorem ipsum 4

InlineList

Create a list with .inline-listclass.

  • Lorem ipsum 1
  • Lorem ipsum 2
  • Lorem ipsum 3
  • Lorem ipsum 4
Fontawesome IconList

Create a list with .faw-listclass and a fontawesome icon inside <li>tag.

  • Lorem ipsum 1
  • Lorem ipsum 2
  • Lorem ipsum 3
  • Lorem ipsum 4

Colors

Font colors
Font Bootstrapcolors

Default color.color-default

Default color light.color-default-light

Default color dark.color-default-dark

Info color.color-info

Info color light.color-info-light

Info color dark.color-info-dark

Primary color.color-primary

Primary color light.color-primary-light

Primary color dark.color-primary-dark

Success color.color-success

Success color light.color-success-light

Success color dark.color-success-dark

Danger color.color-danger

Danger color light.color-danger-light

Danger color dark.color-danger-dark

Warning color.color-warning

Warning color light.color-warning-light

Warning color dark.color-warning-dark


Font themecolors

Default color.color-default-t

Default color light.color-default-t-light

Default color dark.color-default-t-dark

White color.color-white

White color light.color-white-light

White color dark.color-white-dark

Navy color.color-navy

Navy color light.color-navy-light

Navy color dark.color-navy-dark

Sky color.color-sky

Sky color light.color-sky-light

Sky color dark.color-sky-dark

Lime color.color-lime

Lime color light.color-lime-light

Lime color dark.color-lime-dark

Dust color.color-dust

Dust color light.color-dust-light

Dust color dark.color-dust-dark

Green color.color-green

Green color light.color-green-light

Green color dark.color-green-dark

Orange color.color-orange

Orange color light.color-orange-light

Orange color dark.color-orange-dark

Yellow color.color-yellow

Yellow color light.color-yellow-light

Yellow color dark.color-yellow-dark

Red color.color-red

Red color light.color-red-light

Red color dark.color-red-dark

Chocolate color.color-chocolate

Chocolate color light.color-chocolate-light

Chocolate color dark.color-chocolate-dark

Dark color.color-dark

Dark color light.color-dark-light

Dark color dark.color-dark-dark