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

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

<pre>Blocco semplice in evidenza</pre>

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

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>

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>

Sizes

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>

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

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

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

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