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.

Body Copy

Nullam in dolor sed leo cursus posuere. Integer in blandit lorem. Curabitur iaculis ornare egestas. Vivamus imperdiet accumsan ipsum, sed convallis dolor imperdiet eget. Cras semper arcu ut est vehicula malesuada. Cras vitae augue nec erat accumsan varius. Sed euismod suscipit ultricies. Fusce sed dapibus elit. Mauris adipiscing turpis arcu, nec lacinia erat. Cras cursus scelerisque dui, vel facilisis lorem imperdiet sed. Integer et sapien augue, ac volutpat.

Lead Body Copy

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi.

<p class="lead">...</p>

Text Alignment

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>

Emphasis Text Classes

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi.


<p class="text-muted">...</p>

<p class="text-primary">...</p>

<p class="text-success">...</p>

<p class="text-info">...</p>

<p class="text-warning">...</p>

<p class="text-danger">...</p>

Text-Wrapped Image with a caption

This is an example of an image entered via WordPress and this is 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.

Thumbnail Image

Linked Thumbnail Image


<!-- Thumbnail Image -->

<img src="http://yoursite.com/uploads/image.jpg" class="thumbnail" />



<!-- Linked Thumbnail Image -->

<a href="http://google.com" class="thumbnail">
  <img src="http://yoursite.com/uploads/image.jpg" />
</a>

Headers

H1 Lorem ipsum dolor sit amet

<h1>H1 Lorem ipsum dolor sit amet</h1>

H2 Lorem ipsum dolor sit amet

<h2>H1 Lorem ipsum dolor sit amet</h2>

H3 Lorem ipsum dolor sit amet

<h3>H1 Lorem ipsum dolor sit amet</h3>

H4 Lorem ipsum dolor sit amet

<h4>H1 Lorem ipsum dolor sit amet</h4>

H5 Lorem ipsum dolor sit amet

<h5>H1 Lorem ipsum dolor sit amet</h5>

H6 Lorem ipsum dolor sit amet

<h6>H1 Lorem ipsum dolor sit amet</h6>

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 adipiscing elit. Vivamus lobortis dictum eros non laoreet.
John Smith


<blockquote>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis dictum eros non laoreet.</p>

  <small><cite>John Smith</cite></small>

</blockquote>

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>