Joomla! Typography Styles are a great way to customize the appearance of content elements such as buttons, images, icons, menus and many more that fully support Bootstrap and Font Awesome!

Font Awesome Icons

Font Awesome is the iconic font designed for use with Twitter Bootstrap. If you want to use these icons for the title of the modules, insert the name of the icon in the Module Variations tab using the Template Parameters.

To insert the icons in your articles or modules just type the following code in your text editor. Make sure the code is added in the html mode and turn on Editor None in Global Configuration.

<i class="fa fa-name"></i>
Favourite currently supports Font Awesome 4.0.3.

Image Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque.

Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue. Lorem ipsum dolor sit amet.

This is the .img-left element. 

To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<img class="img-left">

Image Polaroid

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque.

Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.

This is the .img-polaroid element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<img class="img-polaroid">

Image Rounded

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque.

Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.

This is the .img-rounded element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<img class="img-rounded">

Note that .img-rounded, .img-shadow and .img-circle do not work in IE7-8 due to lack of border-radius and box-shadow support.

Image Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque.

Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue. Lorem ipsum dolor sit amet.

This is the .img-right element. 

To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<img class="img-right">

Image Shadow

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque.

Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. Lorem ipsum dolor sit amet. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.

This is the .img-shadow element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<img class="img-shadow">

Image Circle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque.

Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.

This is the .img-circle element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<img class="img-circle">

Note that for a perfect circle the image's width has to be equal to its height (eg. width: 140px, height:140px)!

For an image that needs to be both rounded and floated to the right or left use both classes:

<class="img-rounded img-left">

Button

This is the .btnbutton element.

To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn">...</button>

or if you want to use the button with a link:

Button link

<a class="btn">Button link</a>

Insert the link using Joomla!'s editor and you're done.

Primary Button

This is the .btn-primary button element.

To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-primary">...</button>

or if you want to use the button with a link:

Button link

<a class="btn btn-primary">Button link</a>

Button Icons

To use Font Awesome Icons with the Bootstrap buttons, just type the following code in your text editor. Make sure the code is added in the html mode and turn on Editor None in Global Configuration.

Download

<a class="btn" href="#">
   <i class="fa fa-download"></i>Download</a>

Bootstrap Buttons

This is the .btn-info button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-info">...</button>

This is the .btn-success button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-success">...</button>

This is the .btn-warning button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-warning">...</button>

This is the .btn-danger button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-danger">...</button>

This is the .btn-inverse button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-inverse">...</button>

Button Sizes

For additional button sizes add .btn-large, .btn-small, or .btn-mini.

To use the button sizes just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-large">...</button>
<button class="btn btn-small">...</button>
<button class="btn btn-mini">...</button>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

Someone famous Source Title

This is the <blockquote> element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Add small tag for identifying the source. Wrap the name of the source work in cite.

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

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

To use the headings just type the following code in your text editor. Make sure the code is added in the html mode.

<h1>...</h1>

Drop Caps

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the .dropcap element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<p class="dropcap">...</div>

Lead Body Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis.

This is the .lead element from Bootstrap for making a paragraph stand out . To use it just type the following code in your text editor. Make sure the code is added in the html mode.

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

Content Boxes

This is the info box. To use it just type the following code in your text editor in the html mode:
 <div class="info-box"> ...Your content goes here... </div>
This is the success box. To use it just type the following code in your text editor in the html mode:
 <div class="success-box"> ...Your content goes here... </div>
This is the warning box. To use it just type the following code in your text editor in the html mode:
 <div class="warning-box"> ...Your content goes here... </div>
This is the error box. To use it just type the following code in your text editor in the html mode:
 <div class="error-box"> ...Your content goes here... </div>
This is the simple box. To use it just type the following code in your text editor in the html mode:
 <div class="simple-box"> ...Your content goes here... </div>

Inline Labels

Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the .label-red label. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<span class="label-red">...</span>

 

Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the .label-blue label. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<span class="label-blue">...</span>

 

Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the .label-green label. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<span class="label-green">...</span>

 

Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the .label-grey label. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<span class="label-grey">...</span>

 

Lorem ipsum dolor sit amet sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the .label-orange label. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<span class="label-orange">...</span>

Speech Bubbles

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Author - Lorem ipsum

This is the .bubble-red element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<p class="bubble-red">...</p>

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Author - Lorem ipsum

This is the .bubble-green element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<p class="bubble-green">...</p>

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Author - Lorem ipsum

This is the .bubble-blue element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<p class="bubble-blue">...</p>

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Author - Lorem ipsum

This is the .bubble-orange element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<p class="bubble-orange">...</p>

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Author - Lorem ipsum

This is the .bubble-grey element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<p class="bubble-grey">...</p>

Emphasis Classes

This is the .muted emphasis class.

This is the .text-warning emphasis class.

This is the .text-error emphasis class.

This is the .text-info emphasis class.

This is the .text-success emphasis class.

Convey meaning through color with a handful of emphasis utility classes. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<p class="muted"">This is the muted emphasis class.</p>
<p class="text-warning"">This is the text-warning emphasis class.</p>
<p class="text-error"">This is the text-error emphasis class.</p>
<p class="text-info"">This is the text-info emphasis class.</p>
<p class="text-success"">This is the text-success emphasis class.</p>

Code

Wrap inline snippets of code with code. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<code>...</code>

Use prefor multiple lines of code.

.class { 
background: #f1f1f1;  
}

Be sure to escape any angle brackets in the code for proper rendering. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<pre>...</pre>

Tables

Add the base class .table to any table.

#Table HeadingTable HeadingTable Heading
1 Table Data Table Data Table Data
2 Table Data Table Data Table Data
3 Table Data Table Data Table Data

To use the table just type the following code in your text editor. Make sure the code is added in the html mode.

<table class="table">
  …
</table>

 

Add borders and rounded corners to the table using the .table-bordered class.

#Table HeadingTable HeadingTable Heading
1 Table Data Table Data Table Data
2 Table Data Table Data Table Data
3 Table Data Table Data Table Data

To use the bordered table just type the following code in your text editor. Make sure the code is added in the html mode.

<table class="table table-bordered">
  …
</table>