Typography

Below you may find all available typographic elements. As you may know this WordPress Theme is based on Bootstrap 3 framework, so you may check the documentation available there as well. Bootstrap CSS


Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. Sample heading

h2. Sample heading

h3. Sample heading

h4. Sample heading

h5. Sample heading
h6. Sample heading

 

[html]
<h1>h1. Sample heading</h1>
<h2>h2. Sample heading</h2>
<h3>h3. Sample heading</h3>
<h4>h4. Sample heading</h4>
<h5>h5. Sample heading</h5>
<h6>h6. Sample heading</h6>
[/html]

 

Blockquotes

For quoting blocks of content from another source within your document.

I stumbled across OfficialTheme one day when I was looking for a fresh new look for my ecommerce theme. Their themes are released for Free and i immediately just said “why not try” and since them i have became a fan of their work. Some of the new themes are absolutely stunning, with responsive design perfect for mobile and tablet browsing.

Someone famous in Source Title

[html]
<blockquote>
I stumbled across OfficialTheme one day when I was looking for a fresh new look for my ecommerce theme. Their themes are released for Free and i immediately just said "why not try" and since them i have became a fan of their work. Some of the new themes are absolutely stunning, with responsive design perfect for mobile and tablet browsing.
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
[/html]

 

Tables

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. You may use this classes as well .table-striped, .table-bordered or .table-hover

Responsive Tables Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

# First Name Last Name Email
1 John Doe johndoe@mail.com
2 Peter Parker peterparker@mail.com
3 John Rambo johnrambo@mail.com

[html]
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
<td>johndoe@mail.com</td>
</tr>
</tbody>
</table>
</div>
[/html]

 

Buttons

Use the button classes on an <a>, <button>, or <input> element.
Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
 

[html]
<!– Standard button –>
<button type="button" class="btn btn-default">Default</button>

<!– Provides extra visual weight and identifies the primary action in a set of buttons –>
<button type="button" class="btn btn-primary">Primary</button>

<!– Indicates a successful or positive action –>
<button type="button" class="btn btn-success">Success</button>

<!– Contextual button for informational alert messages –>
<button type="button" class="btn btn-info">Info</button>

<!– Indicates caution should be taken with this action –>
<button type="button" class="btn btn-warning">Warning</button>

<!– Indicates a dangerous or potentially negative action –>
<button type="button" class="btn btn-danger">Danger</button>

<!– Deemphasize a button by making it look like a link while maintaining button behavior –>
<button type="button" class="btn btn-link">Link</button>
[/html]

 

Images

Responsive Images Images can be made responsive-friendly via the addition of the .img-responsive class. To center images which use the .img-responsive class, use .center-block instead of .text-center.

You may as well get some nice shapes like rounded or circled to your images, check below:
 

roundcirclethumbnail

[html]
<img src="…" alt="…" class="img-rounded">
<img src="…" alt="…" class="img-circle">
<img src="…" alt="…" class="img-thumbnail">
[/html]

 

Helper Classes

Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
Contextual backgrounds

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

[html]
<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>
[/html]

 

Contextual backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt …

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt …

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt …

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt …

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt …

[html]
<p class="bg-primary">…</p>
<p class="bg-success">…</p>
<p class="bg-info">…</p>
<p class="bg-warning">…</p>
<p class="bg-danger">…</p>
[/html]

 

Bootstrap default Icons

Includes over 250 glyphs in font format from the Glyphicon Halflings set. For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

Please check all available icons on Bootstrap default page
 
Heart

[html]
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Heart

<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
[/html]

 

Rows and Columns

Bootstrap framwork offers you some amazing possibilities to create columns and rows for your text. For more detailed information please visit default Bootstrap page

 

.row-decor-official {
margin-bottom: 15px;
}
.row-decor-official > div > div {
border: 1px solid #dcdcdc;
padding: 5px 10px;
text-align: center;
background: #f9f9f9;
}

.col-md-3
.col-md-9
.col-md-4
.col-md-4
.col-md-4

[html]
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-9">.col-md-9</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
[/html]