Joomla 3 and this template integrates the Bootstrap framework for fast and easy deployment of web design. Insert formatted text or icons is easy with the following examples (Typography) valid on any template that supports Bootstrap and jQuery present in Joomla.

Tooltip example

<p>Example Tooltip on the word <abbr class="hasTooltip" title="This is a simple Tooltip">Joomla</abbr></p>

Example Tooltip on the word Joomla

Formatted block

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous Source Title

Simple Block

<pre>Blocco semplice in evidenza</pre>

Typography

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>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

<h1>h1  Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Buttons

Button tags

Use the button classes on an ,button , or input element.

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input" />
<input class="btn btn-default" type="submit" value="Submit" />

Insert buttons

<p><a href="#"  class="btn btn-large btn-primary">Inizio</a></p>

Inizio

Buttons with different color and size

<!-- 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 -->
<buttontype="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>

Buttons with icons

    <a href="#" class="btn"><i class="glyphicon glyphicon-edit"></i> <strong>Edit</strong></a>
    <a href="#" class="btn btn-inverse"><i class="glyphicon glyphicon-remove-circle"></i> <strong>Delete</strong></a>
    <a href="#" class="btn"><i class="glyphicon glyphicon-hand-left"></i> <strong>Share</strong></a>

Edit Delete Share

Use one of hundreds of vector icons available (see list)

<i class="icon-thumbs-up"></i>

Example of modal

<div class="modal fade" id="myModalin" tabindex="-1" role="dialog" aria-labelledby="myModalinLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Launch demo modal

Sizes

Large button Large button

Default button Default button

Small button Small button

Extra small button Extra small button

Fancy larger or smaller buttons? Add .btn-lg , .btn-sm , or .btn-xs for additional sizes.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

Block level button Block level button

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For elements, this is done via :active . For elements, it's done with .active . However, you may use .active ons (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.

Button element

No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active .

Primary button Button

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Anchor element

Add the .active class to buttons.

Primary link Link

 

<a class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a class="btn btn-default btn-lg active" role="button">Link</a>

Disabled state

Make buttons look unclickable by fading them back with opacity .

Button element

Add the disabled attribute to buttons.

Primary button Button

 

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Images

Responsive images

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; , height: auto; and display: block; to the image so that it scales nicely to the parent element.

To center images which use the .img-responsive class, use .center-block instead of .text-center . See the helper classes section for more details about .center-block usage.

<img src="/..." class="img-responsive" alt="Responsive image">

Image shapes

Add classes to an element to easily style images in any project.

Cross-browser compatibility

Keep in mind that Internet Explorer 8 lacks support for rounded corners.

<img src="/images/fotocamera.jpg" alt="..." class="img-rounded">
<img src="/images/fotocamera.jpg" alt="..." class="img-circle">
<img src="/images/fotocamera.jpg" alt="..." class="img-thumbnail">

Glyphicons Icons

Available glyphs

Includes over 250 glyphs in font format from the Glyphicon Halflings set.

How to use

 <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
 <span class="glyphicon glyphicon-object-align-bottom" aria-hidden="true"></span>

• glyphicon glyphicon-asterisk
• glyphicon glyphicon-euro
• glyphicon glyphicon-plus
• glyphicon glyphicon-eur
• glyphicon glyphicon-minus
• glyphicon glyphicon-cloud
• glyphicon glyphicon-envelope
• glyphicon glyphicon-pencil
• glyphicon glyphicon-glass
• glyphicon glyphicon-music
• glyphicon glyphicon-search
• glyphicon glyphicon-heart
• glyphicon glyphicon-star
• glyphicon glyphicon-star-empty
• glyphicon glyphicon-user
• glyphicon glyphicon-film
• glyphicon glyphicon-th-large
• glyphicon glyphicon-th
• glyphicon glyphicon-th-list
• glyphicon glyphicon-ok
• glyphicon glyphicon-remove
• glyphicon glyphicon-zoom-in
• glyphicon glyphicon-zoom-out
• glyphicon glyphicon-off
• glyphicon glyphicon-signal
• glyphicon glyphicon-cog
• glyphicon glyphicon-trash
• glyphicon glyphicon-home
• glyphicon glyphicon-file
• glyphicon glyphicon-time
• glyphicon glyphicon-road
• glyphicon glyphicon-download-alt
• glyphicon glyphicon-download
• glyphicon glyphicon-upload
• glyphicon glyphicon-inbox
• glyphicon glyphicon-play-circle
• glyphicon glyphicon-repeat
• glyphicon glyphicon-refresh
• glyphicon glyphicon-list-alt
• glyphicon glyphicon-lock
• glyphicon glyphicon-flag
• glyphicon glyphicon-headphones
• glyphicon glyphicon-volume-off
• glyphicon glyphicon-volume-down
• glyphicon glyphicon-volume-up
• glyphicon glyphicon-qrcode
• glyphicon glyphicon-barcode
• glyphicon glyphicon-tag
• glyphicon glyphicon-tags
• glyphicon glyphicon-book
• glyphicon glyphicon-bookmark
• glyphicon glyphicon-print
• glyphicon glyphicon-camera
• glyphicon glyphicon-font
• glyphicon glyphicon-bold
• glyphicon glyphicon-italic
• glyphicon glyphicon-text-height
• glyphicon glyphicon-text-width
• glyphicon glyphicon-align-left
• glyphicon glyphicon-align-center
• glyphicon glyphicon-align-right
• glyphicon glyphicon-align-justify
• glyphicon glyphicon-list
• glyphicon glyphicon-indent-left
• glyphicon glyphicon-indent-right
• glyphicon glyphicon-facetime-video
• glyphicon glyphicon-picture

• glyphicon glyphicon-map-marker
• glyphicon glyphicon-adjust
• glyphicon glyphicon-tint
• glyphicon glyphicon-edit
• glyphicon glyphicon-share
• glyphicon glyphicon-check
• glyphicon glyphicon-move
• glyphicon glyphicon-step-backward
• glyphicon glyphicon-fast-backward
• glyphicon glyphicon-backward
• glyphicon glyphicon-play
• glyphicon glyphicon-pause
• glyphicon glyphicon-stop
• glyphicon glyphicon-forward
• glyphicon glyphicon-fast-forward
• glyphicon glyphicon-step-forward
• glyphicon glyphicon-eject
• glyphicon glyphicon-chevron-left
• glyphicon glyphicon-chevron-right
• glyphicon glyphicon-plus-sign
• glyphicon glyphicon-minus-sign
• glyphicon glyphicon-remove-sign
• glyphicon glyphicon-ok-sign
• glyphicon glyphicon-question-sign
• glyphicon glyphicon-info-sign
• glyphicon glyphicon-screenshot
• glyphicon glyphicon-remove-circle
• glyphicon glyphicon-ok-circle
• glyphicon glyphicon-ban-circle
• glyphicon glyphicon-arrow-left
• glyphicon glyphicon-arrow-right
• glyphicon glyphicon-arrow-up
• glyphicon glyphicon-arrow-down
• glyphicon glyphicon-share-alt
• glyphicon glyphicon-resize-full
• glyphicon glyphicon-resize-small
• glyphicon glyphicon-exclamation-sign
• glyphicon glyphicon-gift
• glyphicon glyphicon-leaf
• glyphicon glyphicon-fire
• glyphicon glyphicon-eye-open
• glyphicon glyphicon-eye-close
• glyphicon glyphicon-warning-sign
• glyphicon glyphicon-plane
• glyphicon glyphicon-calendar
• glyphicon glyphicon-random
• glyphicon glyphicon-comment
• glyphicon glyphicon-magnet
• glyphicon glyphicon-chevron-up
• glyphicon glyphicon-chevron-down
• glyphicon glyphicon-retweet
• glyphicon glyphicon-shopping-cart
• glyphicon glyphicon-folder-close
• glyphicon glyphicon-folder-open
• glyphicon glyphicon-resize-vertical
• glyphicon glyphicon-resize-horizontal
• glyphicon glyphicon-hdd
• glyphicon glyphicon-bullhorn
• glyphicon glyphicon-bell
• glyphicon glyphicon-certificate
• glyphicon glyphicon-thumbs-up
• glyphicon glyphicon-thumbs-down
• glyphicon glyphicon-hand-right
• glyphicon glyphicon-hand-left
• glyphicon glyphicon-hand-up
• glyphicon glyphicon-hand-down
• glyphicon glyphicon-circle-arrow-right
• glyphicon glyphicon-circle-arrow-left
• glyphicon glyphicon-circle-arrow-up
• glyphicon glyphicon-circle-arrow-down
• glyphicon glyphicon-globe
• glyphicon glyphicon-wrench
• glyphicon glyphicon-tasks
• glyphicon glyphicon-filter
• glyphicon glyphicon-briefcase