A post with everything in it

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.

Lead Text

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

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

Text Alignment

[raw]

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>

[/raw]

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>

Images

Text-Wrapped Image with a caption

Sample Image

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.

[raw]
[column size=”1/2″]

Thumbnail Image


[/column]
[column size=”1/2″]

Linked Thumbnail Image


[/column]
[/raw]

<!-- 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>

Lists

[raw]
[column size=”1/2″]

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>

[/column]

[column size=”1/2″]

Ordered List

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

[/column]
[/raw]

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>

An image post

Image

This is an image post. There’s isn’t really anthing special about it, other than selecting the “Image” post format. We’ve still just applied a featured image and set it to link to its enlarged version in a lightbox.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget dolor augue. Nam ac dolor in augue vehicula semper vulputate at turpis. Integer malesuada dui sit amet lorem ullamcorper imperdiet. Sed enim lacus, vulputate quis vehicula quis, tristique semper erat. Sed aliquet semper leo, auctor placerat ligula scelerisque sed. Nullam sed tempus magna. Praesent quis mauris quam.

Sed id mauris ut magna dignissim suscipit. Donec ut urna nunc, id molestie justo. Morbi a venenatis felis. Sed non ligula et urna tincidunt malesuada. Curabitur elementum nunc id ipsum facilisis vel accumsan metus semper. Mauris enim leo, venenatis et lacinia consequat, fringilla nec lectus. Donec eleifend mauris lacinia massa posuere blandit. Maecenas quis libero nisi, vitae egestas justo. Maecenas nec mi nibh, quis pellentesque magna.

Fusce iaculis vulputate neque, eget lacinia diam laoreet vitae. Pellentesque mauris dolor, egestas eu sagittis vitae, vulputate quis ante. Suspendisse ipsum dolor, venenatis sed porttitor sit amet, dapibus vitae tellus. Mauris sit amet mi arcu. Sed congue, massa consectetur cursus tempus, arcu orci tempor justo, et condimentum ante justo ac dolor. Maecenas at lorem eu dolor gravida dapibus. Pellentesque facilisis sem in ligula pellentesque mollis.

Maecenas nunc nisl, lacinia eget consectetur nec, euismod in eros. Pellentesque mollis posuere metus ut eleifend. Nulla dictum urna et magna scelerisque condimentum. Nullam vitae justo turpis, sit amet feugiat lectus. Curabitur sapien libero, ultricies vel ullamcorper id, sodales elementum augue. Integer ac dui eget justo tristique convallis sed sed tortor. Sed eget molestie diam. Vivamus viverra varius sodales.

Fusce sit amet ligula ut mi luctus hendrerit. Nam dapibus lobortis egestas. Ut vel cursus velit. Nulla sed viverra ipsum. In hac habitasse platea dictumst. Quisque venenatis laoreet leo ut consequat. Sed vulputate nisl a tortor blandit vel congue quam sollicitudin. In non ligula magna, eu tempor eros.

A post with pagination

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget dolor augue. Nam ac dolor in augue vehicula semper vulputate at turpis. Integer malesuada dui sit amet lorem ullamcorper imperdiet. Sed enim lacus, vulputate quis vehicula quis, tristique semper erat. Sed aliquet semper leo, auctor placerat ligula scelerisque sed. Nullam sed tempus magna. Praesent quis mauris quam.

Continue reading

The pups tend to frolik

Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget dolor augue. Nam ac dolor in augue vehicula semper vulputate at turpis. Integer malesuada dui sit amet lorem ullamcorper imperdiet. Sed enim lacus, vulputate quis vehicula quis, tristique semper erat. Sed aliquet semper leo, auctor placerat ligula scelerisque sed. Nullam sed tempus magna. Praesent quis mauris quam.

Sed id mauris ut magna dignissim suscipit. Donec ut urna nunc, id molestie justo. Morbi a venenatis felis. Sed non ligula et urna tincidunt malesuada. Curabitur elementum nunc id ipsum facilisis vel accumsan metus semper. Mauris enim leo, venenatis et lacinia consequat, fringilla nec lectus. Donec eleifend mauris lacinia massa posuere blandit. Maecenas quis libero nisi, vitae egestas justo. Maecenas nec mi nibh, quis pellentesque magna.

Fusce iaculis vulputate neque, eget lacinia diam laoreet vitae. Pellentesque mauris dolor, egestas eu sagittis vitae, vulputate quis ante. Suspendisse ipsum dolor, venenatis sed porttitor sit amet, dapibus vitae tellus. Mauris sit amet mi arcu. Sed congue, massa consectetur cursus tempus, arcu orci tempor justo, et condimentum ante justo ac dolor. Maecenas at lorem eu dolor gravida dapibus. Pellentesque facilisis sem in ligula pellentesque mollis.

Maecenas nunc nisl, lacinia eget consectetur nec, euismod in eros. Pellentesque mollis posuere metus ut eleifend. Nulla dictum urna et magna scelerisque condimentum. Nullam vitae justo turpis, sit amet feugiat lectus. Curabitur sapien libero, ultricies vel ullamcorper id, sodales elementum augue. Integer ac dui eget justo tristique convallis sed sed tortor. Sed eget molestie diam. Vivamus viverra varius sodales.

Fusce sit amet ligula ut mi luctus hendrerit. Nam dapibus lobortis egestas. Ut vel cursus velit. Nulla sed viverra ipsum. In hac habitasse platea dictumst. Quisque venenatis laoreet leo ut consequat. Sed vulputate nisl a tortor blandit vel congue quam sollicitudin. In non ligula magna, eu tempor eros.