Esempiu

Menu contestuale toggleable per vede liste di ligami. Fattu interattivu cù u plugin JavaScript dropdown .

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Azzione</a></li>
  <li><a tabindex="-1" href="#">Una altra azione</a></li>
  <li><a tabindex="-1" href="#">Qualcosa di più quì</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">Ligame separatu</a></li>
</ul>

Marcatura

Fighjendu solu u menù drop-down, quì hè u HTML necessariu. Avete bisognu di imballà u trigger di u menù drop-down è u menù dropdown in .dropdown, o un altru elementu chì dichjara position: relative;. Allora basta à creà u menu.

<div class="dropdown">
  <!-- Ligame o buttone per cambià u menù drop-down -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Azzione</a></li>
    <li><a tabindex="-1" href="#">Una altra azione</a></li>
    <li><a tabindex="-1" href="#">Qualcosa di più quì</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Ligame separatu</a></li>
  </ul>
</div>

Opzioni

Allineate i menu à a diritta è aghjunghje include livelli supplementari di menu a tendina.

Allineamentu di i menu

Aghjunghjite .pull-rightà .dropdown-menua destra allineate u menù a tendina.

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

Opzioni di menu disabilitate

Aghjunghjite .disabledà un <li>in u menù dropdown per disattivà u ligame.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Ligame rigulari</a></li>
  <li class="disabled"><a tabindex="-1" href="#">Ligame disattivatu</a></li>
  <li><a tabindex="-1" href="#">Un altru ligame</a></li>
</ul>

Sottomenu in menu a discesa

Aghjunghjite un livellu extra di menu drop-down, apparsu nantu à u passaghju cum'è quelli di OS X, cù qualchi aggiunte di marcatura simplici. Aghjunghjite .dropdown-submenuà qualsiasi liin un menù dropdown esistente per u stilu automaticu.

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">Più opzioni</a>
    <ul class="menu a discesa">
      ...
    </ul>
  </li>
</ul>

Esempii

Dui opzioni basi, cù duie varianti più specifiche.

Un gruppu di buttone unicu

Avvolgi una seria di buttoni cù .btnin .btn-group.

<div class="btn-group">
  <button class="btn">Left</button>
  <button class="btn">Media</button>
  <button class="btn">Right</button>
</div>

Diversi gruppi di buttone

Unisce seti di <div class="btn-group">in un <div class="btn-toolbar">per cumpunenti più cumplessi.

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

Gruppi di buttone verticali

Fate chì un inseme di buttuni apparisce verticalmente in pila invece di orizontali.

<div class="btn-group btn-group-vertical">
  ...
</div>

Casella di spunta è sapori radio

I gruppi di buttone pò ancu funziunà cum'è radiu, induve solu un buttone pò esse attivu, o caselle di spunta, induve ogni numeru di buttoni pò esse attivu. Vede i documenti JavaScript per quessa.

Dropdowns in gruppi di buttone

A testa alta ! I buttoni cù menu dropdown devenu esse imballati individualmente in u so propiu per .btn-groupun .btn-toolbarrendering propiu.

Panoramica è esempii

Aduprate qualsiasi buttone per attivà un menu a tendina mettendulu in un .btn-groupè furnisce u marcatu di menu propiu.

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Azzione
    <span class="caret"></span>
  </a>
  <ul class="menu a discesa">
    <!-- links menu a tendina -->
  </ul>
</div>

Funziona cù tutte e dimensioni di buttone

I menu dropdown di i buttoni funzionanu in ogni dimensione: .btn-large, .btn-small, o .btn-mini.

Richiede JavaScript

I dropdown di i buttoni necessitanu u plugin Bootstrap dropdown per funziunà.

In certi casi, cum'è u telefuninu, i menu a tendina si estenderanu fora di a vista. Avete bisognu di risolve l'allineamentu manualmente o cù JavaScript persunalizatu.

Dividete i menu a tendina di u buttone

Basendu nantu à i stili di u gruppu di buttone è u marcatu, pudemu creà facilmente un buttone split. I buttuni divisi presentanu una azione standard à manca è un toggle dropdown à a diritta cù ligami contextuali.

<div class="btn-group">
  <button class="btn">Azzione</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="menu a discesa">
    <!-- links menu a tendina -->
  </ul>
</div>

Taglie

Utilizà e classi di buttone extra .btn-mini, .btn-small, o .btn-largeper dimensionà.

<div class="btn-group">
  <button class="btn btn-mini">Azzione</button>
  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="menu a discesa">
    <!-- links menu a tendina -->
  </ul>
</div>

Menu a tendina

I menu a tendina ponu ancu esse attivati ​​da u fondu in sopra aghjunghjendu una sola classe à u parent immediatu di .dropdown-menu. Invertirà a direzzione di .caretu menu è riposizionarà u menù stessu per passà da u fondu in l'altu invece di l'altu in sopra.

<div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="menu a discesa">
    <!-- links menu a tendina -->
  </ul>
</div>

Predefiniti leggeri Stessa marcatura, diverse classi

Tutti i cumpunenti di navigazione quì-tabulazioni, pillole è listi- sparte u listessu marcatu di basa è stili attraversu a .navclasse.

Tabs basi

Pigliate un regulare <ul>di ligami è aghjunghje .nav-tabs:

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">Casa</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Pills basi

Pigliate u listessu HTML, ma utilizate .nav-pillsinvece:

<ul class="nav nav-pills">
  <li class="active">
    <a href="#">Casa</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Statu disattivatu

Per qualsiasi cumpunente di navigazione (tabulazioni, pillole, o lista), aghjunghje .disabledper ligami grigi è senza effetti di hover . I ligami fermanu clicchendu, però, salvu chì ùn sguassate l' hrefattributu. In alternativa, pudete implementà JavaScript persunalizatu per prevene quelli clics.

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">Casa</a></li>
  ...
</ul>

Allineamentu di cumpunenti

Per allineà i ligami di navigazione, aduprate .pull-lefto .pull-rightclassi di utilità. E duie classi aghjunghjenu un float CSS in a direzzione specifica.

Impilabile

Siccomu i tabulazioni è i pills sò orizontali per difettu, aghjunghje solu una seconda classa, .nav-stacked, per fà apparisce verticalmente stacked.

Tabulature impilate

<ul class="nav nav-tabs nav-stacked">
  ...
</ul>

Pilule impilate

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Dropdowns

Aghjunghjite menu dropdown cù un pocu HTML extra è u plugin JavaScript dropdowns .

Tabulazioni cù menu a tendina

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Dropdown
        <b class="caret"></b>
      </a>
    <ul class="menu a discesa">
      <!-- ligami -->
    </ul>
  </li>
</ul>

Pills cù dropdowns

<ul class="nav nav-pills">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Dropdown
        <b class="caret"></b>
      </a>
    <ul class="menu a discesa">
      <!-- ligami -->
    </ul>
  </li>
</ul>

liste di navigazione

Un modu simplice è faciule per custruisce gruppi di ligami di navigazione cù intestazioni opzionali. Sò megliu utilizati in sidebars cum'è u Finder in OS X.

Esempiu di lista di navigazione

Pigliate una lista di ligami è aghjunghje class="nav nav-list":

<ul class="nav nav-list">
  <li class="nav-header">Intestazione di a lista</li>
  <li class="active"><a href="#">Casa</a></li>
  <li><a href="#">Biblioteca</a></li>
  ...
</ul>

Nota Per nidificà in una lista di navigazione, include class="nav nav-list"nantu à qualsiasi <ul>.

Divisori orizontali

Aghjunghjite un divisore horizontale creendu un articulu di lista viotu cù a classa .divider, cum'è cusì:

<ul class="nav nav-list">
  ...
  <li class="divider"></li>
  ...
</ul>

Navigazione à tabulazione

Fate vita à e vostre tabulazioni cù un plugin simplice per bascà trà u cuntenutu via tabulazioni. Bootstrap integra tabulazioni tabulabili in quattru stili: cima (predeterminata), right, bottom, and left.

Esempiu di tabulazione

Per fà e tabulazioni tabulabili, creanu un .tab-paneID unicu per ogni tabulazione è imbulighjate in .tab-content.

<div class="tabbable"> <!-- Necessaria solu per e tabulazioni di sinistra/destra -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Sezione 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Sezione 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>Sò in a Sezione 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Ciau, sò in a Sezione 2.</p>
    </div>
  </div>
</div>

Fade in tabulazioni

Per fà chì e tabulazioni svaniscenu, aghjunghje .fadeà ognunu .tab-pane.

Richiede un plugin jQuery

Tutte e tabulazioni di tabulazione sò alimentate da u nostru plugin jQuery ligeru. Leghjite più nantu à cumu dà vita à e tabulazioni di tabulazione nantu à a pagina di documenti JavaScript .

Tabulabile in ogni direzzione

Tabs nantu à u fondu

Flip l'ordine di l'HTML è aghjunghje una classa per mette tabulazioni in u fondu.

<div class="tabbable tabs-below">
  <div class="tab-content">
    ...
  </div>
  <ul class="nav nav-tabs">
    ...
  </ul>
</div>

Tabs à a manca

Scambià a classe per mette tabulazioni à a manca.

<div class="tabbable tabs-left">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

Tabs à a diritta

Scambià a classe per mette tabulazioni à a diritta.

<div class="tabbable tabs-right">
  <ul class="nav nav-tabs">
    ...
  </ul>
  <div class="tab-content">
    ...
  </div>
</div>

Navbar di basa

Per principià, i navbars sò statici (micca fissati à a cima) è includenu supportu per un nome di prughjettu è a navigazione basica. Pone unu in ogni locu in un .container, chì stabilisce a larghezza di u vostru situ è ​​u cuntenutu.

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Tìtulu</a>
    <ul class="nav">
      <li class="active"><a href="#">Casa</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

Cumpunenti Navbar

Marca

Un ligame simplice per mostrà a vostra marca o u nome di u prugettu richiede solu un tag d'ancora.

<a class="brand" href="#">Nome di u prugettu</a>

Ligami di navigazione

L'articuli di navigazione sò simplici per aghjunghje via listi senza ordine.

<ul class="nav">
  <li class="active">
    <a href="#">Casa</a>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

Pudete facilmente aghjunghje divisori à i vostri ligami di navigazione cun un articulu di lista viotu è una classa simplice. Basta aghjunghje questu trà i ligami:

<ul class="nav">
  ...
  <li class="divider-vertical"></li>
  ...
</ul>

Forme

Per stilà bè è pusà una forma in a barra di navigazione, aghjunghje e classi appropritate cum'è mostra quì sottu. Per una forma predeterminata, include .navbar-formè o .pull-lefto .pull-rightper allineà bè.

<form class="navbar-form pull-left">
  <input type="text" class="span2">
  <button type="submit" class="btn">Invia</button>
</form>

Forma di ricerca

Per una forma di ricerca più persunalizata, aghjunghje .navbar-searchà l' forme .search-queryà l'input per stili specializati in a barra di navigazione.

<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Ricerca">
</form>

Allineamentu di cumpunenti

Align ligami nav, forma di ricerca, o testu, aduprà u .pull-lefto .pull-rightclassi di utilità. E duie classi aghjunghjenu un float CSS in a direzzione specifica.

Utilizà i dropdowns

Aghjunghjite dropdowns è dropups à u navigatore cù un pocu di marcatura è u plugin JavaScript dropdowns .

<ul class="nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      contu
      <b class="caret"></b>
    </a>
    <ul class="menu a discesa">
      ...
    </ul>
  </li>
</ul>

Visita a documentazione di i dropdown JavaScript per più marcatu è infurmazione nantu à chjamate dropdowns.

Testu

Imbulighjate e stringhe di testu in un elementu cù .navbar-text, di solitu nantu à un <p>tag per u culore è u culore propiu.

Variazioni di display opzionali

Fix a navbar à a cima o in fondu di u viewport cù una classa supplementu nantu à u div più esterno, .navbar.

Fissu in cima

Aghjunghjite .navbar-fixed-topè ricordate di cuntà l'area oculta sottu aghjunghjendu almenu 40px paddingà u <body>. Assicuratevi di aghjunghje questu dopu à u core Bootstrap CSS è prima di u CSS responsive optional.

<div class="navbar navbar-fixed-top">
  ...
</div>

Fissu in fondu

Aghjunghjite .navbar-fixed-bottominvece.

<div class="navbar navbar-fixed-bottom">
  ...
</div>

Barra di navigazione superiore statica

Crea una barra di navigazione di larghezza completa chì scorri cù a pagina aghjunghjendu .navbar-static-top. A cuntrariu di a .navbar-fixed-topclasse, ùn avete micca bisognu di cambià alcuna padding in u body.

<div class="navbar navbar-static-top">
  ...
</div>

Navbar responsive

Per implementà una navbar responsive colapsante, imbulighjate u vostru cuntenutu di navbar in un div chì cuntene .nav-collapse.collapse, è aghjunghje u buttone di toggle navbar, .btn-navbar.

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar hè utilizatu cum'è basculante per u cuntenutu di navbar colapsatu -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Assicuratevi di lascià a marca fora, se vulete vede -->
      <a class="brand" href="#">Nome di u prugettu</a>

      <!-- Tuttu ciò chì vulete ammucciatu à 940px o menu, postu quì -->
      <div class="nav-collapse collapse">
        <!-- .nav, .navbar-search, .navbar-form, ecc -->
      </div>

    </div>
  </div>
</div>

Variazione invertita

Mudificà l'aspettu di a barra di navigazione aghjunghjendu .navbar-inverse.

<div class="navbar navbar-inverse">
  ...
</div>

Esempii

Un unicu esempiu mostratu cumu pò esse affissatu in parechje pagine.

<ul class="breadcrumb">
  <li><a href="#">Casa</a> <span class="divider">/</span></li>
  <li><a href="#">Biblioteca</a> <span class="divider">/</span></li>
  <li class="active">Dati</li>
</ul>

Pagina standard

Semplice paginazione inspirata da Rdio, fantastica per app è risultati di ricerca. U grande bloccu hè difficiule di missu, facilmente scalabile, è furnisce grandi spazii di clic.

<div class="paginazione">
  <ul>
    <li><a href="#">Prec</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>

Opzioni

Stati disattivati ​​è attivi

I ligami sò persunalizabili per diverse circustanze. Aduprà .disabledper i ligami incliccabili è .activeper indicà a pagina attuale.

<div class="paginazione">
  <ul>
    <li class="disabled"><a href="#">«</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

Pudete eventualmente scambià l'ancore attive o disattivate per spazii per sguassà a funziunalità di clic, mantenendu i stili previsti.

<div class="paginazione">
  <ul>
    <li class="disabled"><span>«</span></li>
    <li class="active"><span>1</span></li>
    ...
  </ul>
</div>

Taglie

Vulete una paginazione più grande o più chjuca? Aggiungi .pagination-large, .pagination-small, o .pagination-miniper dimensioni supplementari.

<div class="paginazione paginazione-large">
  <ul>
    ...
  </ul>
</div>
<div class="paginazione">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-small">
  <ul>
    ...
  </ul>
</div>
<div class="paginazione paginazione-mini">
  <ul>
    ...
  </ul>
</div>

Allineamentu

Aghjunghjite una di duie classi opzionali per cambià l'alineazione di i ligami di paginazione: .pagination-centeredè .pagination-right.

<div class="paginazione centrata in paginazione">
  ...
</div>

<div class="pagination pagination-right">
  ...
</div>

paginar

Ligami rapidi precedenti è prossimi per implementazioni di paginazione simplici cù marcatura è stili di luce. Hè grande per i siti simplici cum'è i blog o riviste.

Esempiu predeterminatu

Per automaticamente, u pager centra i ligami.

<ul class="pager">
  <li><a href="#">Precedente</a></li>
  <li><a href="#">Next</a></li>
</ul>

Ligami allineati

In alternativa, pudete allineà ogni ligame à i lati:

<ul class="pager">
  <li class="previous">
    <a href="#">← Anzianu</a>
  </li>
  <li class="next">
    <a href="#">Più novu →</a>
  </li>
</ul>

Statu disattivatu opzionale

I ligami di pager utilizanu ancu a .disabledclassa di utilità generale da a paginazione.

<ul class="pager">
  <li class="previous disabled">
    <a href="#">← Anzianu</a>
  </li>
  ...
</ul>

Etichette

Badges

Facilmente colapsable

Per una implementazione faciule, l'etichette è i badge colapsanu solu (via u :emptyselettore di CSS) quandu ùn ci hè micca cuntenutu.

Unità eroe

Un cumpunente ligeru è flessibile per mostrà u cuntenutu chjave in u vostru situ. Funziona bè nantu à i siti di marketing è di cuntenutu.

<div class="hero-unit">
  <h1>Intestazione</h1>
  <p>Slogan</p>
  <p>
    <a class="btn btn-primary btn-large">
      Sapè ne di più
    </a>
  </p>
</div>

Intestazione di a pagina

Una cunchiglia simplice per un h1spaziu adattatu è segmentà e sezioni di cuntenutu in una pagina. Pò aduprà l' elementu h1predeterminatu small, è ancu a maiò parte di l'altri cumpunenti (cù stili supplementari).

<div class="page-header">
  <h1>Esempiu di l'intestazione di a pagina <small>Subtext per l'intestazione</small></h1>
</div>

Miniature predefinite

Per automaticamente, e miniature di Bootstrap sò pensate per mostrà l'imaghjini ligati cù un marcatu minimu necessariu.

Altamente persunalizabile

Cù un pocu di marcatura extra, hè pussibule aghjunghje ogni tipu di cuntenutu HTML cum'è intestazioni, paragrafi, o buttoni in miniature.

Perchè aduprà miniature

Miniature (precedentemente .media-gridfinu à a v1.4) sò grandi per griglie di foto o video, risultati di ricerca d'imaghjini, prudutti di vendita, portafogli, è assai di più. Puderanu esse ligami o cuntenutu staticu.

Marcatura simplice è flessibile

A marcatura in miniatura hè simplice - una ulcù qualsiasi quantità di lielementi hè tuttu ciò chì hè necessariu. Hè ancu super flessibile, chì permette ogni tipu di cuntenutu cù un pocu più marcatu per imballà u vostru cuntenutu.

Utiliza dimensioni di e colonne di griglia

Infine, u cumpunente di miniature utilizza classi di sistema di griglia esistenti - cum'è .span2o .span3- per u cuntrollu di dimensioni di miniatura.

Marcatura

Comu diciatu prima, a marcatura necessaria per e miniature hè ligera è diretta. Eccu un ochju à a cunfigurazione predeterminata per l'imaghjini ligati :

<ul class="miniature">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

Per u cuntenutu HTML persunalizatu in miniature, u marcatu cambia ligeramente. Per permettà u cuntenutu di u nivellu di bloccu in ogni locu, scambiemu <a>per un <div>cum'è cusì:

<ul class="miniature">
  <li class="span4">
    <div class="miniatura">
      <img data-src="holder.js/300x200" alt="">
      <h3>Etichetta in miniatura</h3>
      <p>Didascalia in miniatura...</p>
    </div>
  </li>
  ...
</ul>

Più esempii

Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

Default alert

Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

<div class="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Dismiss buttons

Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

<a href="#" class="close" data-dismiss="alert">&times;</a>

Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

<button type="button" class="close" data-dismiss="alert">&times;</button>

Dismiss alerts via JavaScript

Use the alerts jQuery plugin for quick and easy dismissal of alerts.

Options

For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <h4>Warning!</h4>
  Best check yo self, you're not...
</div>

Contextual alternatives

Add optional classes to change an alert's connotation.

Error or danger

<div class="alert alert-error">
  ...
</div>

Success

<div class="alert alert-success">
  ...
</div>

Information

<div class="alert alert-info">
  ...
</div>

Examples and markup

Basic

Default progress bar with a vertical gradient.

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

Striped

Uses a gradient to create a striped effect. Not available in IE7-8.

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

Stacked

Place multiple bars into the same .progress to stack them.

<div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

Options

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Striped bars

Similar to the solid colors, we have varied striped progress bars.

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

Default example

The default media allow to float a media object (images, video, audio) to the left or right of a content block.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...

    <!-- Nested media object -->
    <div class="media">
      ...
    </div>
  </div>
</div>

Media list

With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...

      <!-- Nested media object -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Use the well as a simple effect on an element to give it an inset effect.

<div class="well">
  ...
</div>

Optional classes

Control padding and rounded corners with two optional modifier classes.

<div class="well well-large">
  ...
</div>

<div class="well well-small">
  ...
</div>

Close icon

Use the generic close icon for dismissing content like modals and alerts.

<button class="close">&times;</button>

iOS devices require an href="#" for click events if you would rather use an anchor.

<a class="close" href="#">&times;</a>

Helper classes

Simple, focused classes for small display or behavior tweaks.

.pull-left

Float an element left

class="pull-left"

.pull-left {
  float: left;
}

.pull-right

Float an element right

class="pull-right"

.pull-right {
  float: right;
}

.muted

Change an element's color to #999

class="muted"

.muted {
  color: #999;
}

.clearfix

Pulisce ufloat on any element

class="clearfix"

.clearfix {
  *zoom: 1;
  &: prima,
  &: dopu à {
    visualizazione : table ;
    cuntenutu: "";
  }
  &: dopu à {
    chiaru: tramindui;
  }
}