Headings

All HTML headings,

through
, are available.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Paragraphs

Make a paragraph stand out by adding lead class, and check out the alternative font style.

Mauris aliquet ultricies ante, non lorem ipsumdolor. Sed ultrices pellentesque purus, vulputate.

Check the alternative font style.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed. Nullam convallis arcu nec imperdiet pharetra. Suspendisse sed pharetra orci. Integer elementum augue sed dui sollicitudin, eu molestie leo rutrum. Vestibulum sit amet ullamcorper nunc.

Mauris aliquet ultricies non faucibus ante gravida sed. Sed ultrices pellentesque purus, vulputate.

Check the alternative font style.

Porto Admin is incredibly especially extremely beautiful and fully responsive.

Alignments

It's easy to align the text the way you want

left

center

Justify Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed. Nullam convallis arcu nec imperdiet pharetra. Suspendisse sed pharetra orci. Integer elementum augue sed dui sollicitudin, eu molestie leo rutrum. Vestibulum sit amet ullamcorper nunc. Aliquam ligula dolor, feugiat sit amet nulla vitae, consequat ornare nunc. Proin scelerisque ligula purus, sed sodales tortor sodales non. Donec vel dolor cursus, ornare ipsum non, molestie neque. Quisque sed justo nunc. Sed tempus tellus nunc.

right

States

Text styles/states can be changed with css classes.

.text-muted
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed.

.text-primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed.

.text-success
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed.

.text-warning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed.

.text-danger
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed.

.text-info
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed.

.text-dark
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a adipiscing lectus. Aenean fermentum mauris erat, quis accumsan eros facilisis sed.

Drop Caps

Dropcaps styles can be changed with css classes.

Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.

Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.

Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.

Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Fusce lacinia tempor malesuada.

Blockquotes

Blockquote styles can be changed with css classes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Duis mollis, est non commodo luctus, nisi erat porttitor ligula integer posuere erat a ante.

A. Einstein, Magazine X
.b-thin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Duis mollis, est non commodo luctus, nisi erat porttitor ligula integer posuere erat a ante.

.b-thick

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Duis mollis, est non commodo luctus, nisi erat porttitor ligula integer posuere erat a ante.

.b-thin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Duis mollis, est non commodo luctus, nisi erat porttitor ligula integer posuere erat a ante.

.blockquote-reverse

Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.

A. Einstein, Magazine X
.primary

Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.

A. Einstein, Magazine X
.success

Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.

A. Einstein, Magazine X
.warning

Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.

A. Einstein, Magazine X
.danger

Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.

A. Einstein, Magazine X
.info

Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.

A. Einstein, Magazine X
.dark

Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.

A. Einstein, Magazine X

Wells

Use the well as a simple effect on an element to give it an inset effect.

Lorem ipsum dolor sit amet
.well-sm
Lorem ipsum dolor sit amet
.well-lg
Lorem ipsum dolor sit amet
.primary
Lorem ipsum dolor sit amet
.success
Lorem ipsum dolor sit amet
.warning
Lorem ipsum dolor sit amet
.danger
Lorem ipsum dolor sit amet
.info
Lorem ipsum dolor sit amet
.dark
Lorem ipsum dolor sit amet

Unordered List

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

Ordered List

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  3. Lorem ipsum dolor sit amet.
  4. Lorem ipsum dolor sit amet.
    1. Lorem ipsum dolor sit amet.
    2. Lorem ipsum dolor sit amet.
    3. Lorem ipsum dolor sit amet.
  5. Lorem ipsum dolor sit amet.
  6. Lorem ipsum dolor sit amet.
  7. Lorem ipsum dolor sit amet.
  8. Lorem ipsum dolor sit amet.

Unstyled List

Remove the default list-style and left margin on list items (immediate children only).

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

Inline List

Place all list items on a single line with display: inline-block; and some light padding.

  • 1 - Lorem ipsum dolor sit amet.
  • 2 - Lorem ipsum dolor sit amet.
  • 3 - Lorem ipsum dolor sit amet.
  • 4 - Lorem ipsum dolor sit amet.