Typography
Headings
All HTML headings, <h1>through <h6>, 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 loremipsumdolor. Sed ultrices pellentesque purus, vulputate.
Check the alternativefont 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 ultriciesnon faucibus ante gravida sed. Sed ultrices pellentesque purus, vulputate.
Check the alternativefont style.
Porto Admin isincrediblyespeciallyextremely beautiful and fully responsive.
Alignments
It's easy to align the text the way you want
left
center
JustifyLorem 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.
- 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.
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.