Below you can get an idea of how the theme’s default CSS
will effect your images and typography when you’re creating pages and blog posts.
Headers
H1 Lorem ipsum dolor sit amet
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.
H2 Lorem ipsum dolor sit amet
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.
H3 Lorem ipsum dolor sit amet
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.
H4 Lorem ipsum dolor sit amet
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.
H5 Lorem ipsum dolor sit amet
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.
H6 Lorem ipsum dolor sit amet
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.
Images
When working with full-width posts in this theme, you can do some special things with your images. Keep in mind that if you’re not a fan giant images in your posts and pages, this behavior you see below with full-sized images can be disabled from your Theme Options.
Full-size image with no alignment
Full-size image with center alignment
Text-wrapped Image with a caption
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis. Nullam in dolor sed leo cursus posuere sit amet non tortor. Sed facilisis risus sed massa pellentesque sagittis. Quisque felis leo, commodo eu sagittis ut, suscipit nec lectus.
Nullam viverra interdum nunc, vitae malesuada orci dignissim vitae. Etiam bibendum, urna non eleifend adipiscing, est tellus convallis leo, et dignissim justo arcu non dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque in tellus eu odio iaculis ultricies. Sed ac dapibus mi.
Sed congue quam non ante pharetra id aliquam nunc elementum. Donec et purus id dui pellentesque porta. Nam imperdiet fringilla nunc non malesuada. Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis. Nullam in dolor sed leo cursus posuere.
WordPress Gallery
WordPress Gallery With Captions
Lead Text
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Sed congue quam non ante pharetra id aliquam nunc elementum.
<p class="lead">...</p>
[lead]...[/lead]
Text Alignment
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.
<p class="text-left">Left aligned text.</p>
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.
<p class="text-center">Center aligned text.</p>
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.
<p class="text-right">Right aligned text.</p>
Contextual colors
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.
<p class="text-muted">...</p>
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.
<p class="text-primary">...</p>
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.
<p class="text-success">...</p>
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.
<p class="text-info">...</p>
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.
<p class="text-warning">...</p>
Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.
<p class="text-danger">...</p>
Lists
Unordered List
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Eget porttitor lorem
<ul> <li>...</li> </ol>
Ordered List
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ol> <li>...</li> </ol>
Blockquote
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
John Smith
<blockquote> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <small><cite>John Smith</cite></small> </blockquote>
[blockquote quote="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." source="John Smith"]
Tables
The integration of basic HTML tables comes straight from Bootstrap. Below are some examples, but for more of a detailed explanation checkout the Tables section of the Bootstrap documentation.
Table with class „table” and „table-responsive”
Header 1 | Header 2 | Header 3 | Header 4 |
---|---|---|---|
Cell 1 | Cell 2 | Cell 3 | Cell 4 |
Cell 1 | Cell 2 | Cell 3 | Cell 4 |
Cell 1 | Cell 2 | Cell 3 | Cell 4 |
<table class="table table-responsive"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> ... </tbody> </table>
Table with classes „table,” „table-striped” and „table-responsive”
Header 1 | Header 2 | Header 3 | Header 4 |
---|---|---|---|
Cell 1 | Cell 2 | Cell 3 | Cell 4 |
Cell 1 | Cell 2 | Cell 3 | Cell 4 |
Cell 1 | Cell 2 | Cell 3 | Cell 4 |
<table class="table table-striped table-responsive"> ... </table>
Table with classes „table,” „table-bordered” and „table-responsive”
Header 1 | Header 2 | Header 3 | Header 4 |
---|---|---|---|
Cell 1 | Cell 2 | Cell 3 | Cell 4 |
Cell 1 | Cell 2 | Cell 3 | Cell 4 |
Cell 1 | Cell 2 | Cell 3 | Cell 4 |
<table class="table table-bordered table-responsive"> ... </table>