Primjer

Preklopni, kontekstualni meni za prikaz lista veza. Interaktivan s padajućim JavaScript dodatkom .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Akcija </a></li>  
  <li><a tabindex = "-1" href = "#" > Još jedna radnja </a></li>  
  <li><a tabindex = "-1" href = "#" > Nešto drugo ovdje </a></li>  
  <li class = "razdjelnik" ></li> 
  <li><a tabindex = "-1" href = "#" > Odvojeni link </a></li>  
</ul>

Markup

Gledajući samo padajući meni, evo potrebnog HTML-a. Morate umotati okidač padajućeg menija i padajući meni unutar .dropdownili u drugi element koji deklariše position: relative;. Zatim samo kreirajte meni.

<div class = "padajući" > 
  <!-- Veza ili dugme za prebacivanje padajućeg menija -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Akcija </a></li>  
    <li><a tabindex = "-1" href = "#" > Još jedna radnja </a></li>  
    <li><a tabindex = "-1" href = "#" > Nešto drugo ovdje </a></li>  
    <li class = "razdjelnik" ></li> 
    <li><a tabindex = "-1" href = "#" > Odvojeni link </a></li>  
  </ul>
</div>

Opcije

Poravnajte menije udesno i dodajte dodatne nivoe padajućih menija.

Poravnavanje menija

Dodajte .pull-rightna .dropdown-menudesno poravnajte padajući meni.

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

Onemogućene opcije menija

Dodajte .disabledu a <li>u padajućem izborniku da onemogućite vezu.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Redovna veza </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Onemogućena veza </a></li>   
  <li><a tabindex = "-1" href = "#" > Još jedan link </a></li>  
</ul>

Podmeniji na padajućim menijima

Dodajte dodatni nivo padajućih menija, koji se pojavljuju pri lebdenju poput onih u OS X-u, uz neke jednostavne dodatke za označavanje. Dodajte .dropdown-submenuu bilo koji liu postojećem padajućem izborniku za automatsko oblikovanje.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "padajući-podmeni" > 
    <a tabindex = "-1" href = "#" > Više opcija </a>  
    <ul class = "padajući meni" > 
      ...
    </ul>
  </li>
</ul>

Primjeri

Dvije osnovne opcije, zajedno s još dvije specifične varijacije.

Grupa sa jednim dugmetom

Zamotajte niz dugmadi .btnu .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Lijevo </button> 
  <button class = "btn" > Srednja </button> 
  <button class = "btn" > Desno </button> 
</div>

Više grupa dugmadi

Kombinirajte skupove <div class="btn-group">u a <div class="btn-toolbar">za složenije komponente.

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

Vertikalne grupe dugmadi

Neka skup dugmadi izgleda vertikalno naslagano, a ne horizontalno.

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

Potvrdni okvir i radio okusi

Grupe dugmadi takođe mogu funkcionisati kao radio uređaji, gde samo jedno dugme može biti aktivno, ili potvrdni okviri, gde može biti aktivan bilo koji broj dugmadi. Pogledajte JavaScript dokumente za to.

Padajući meni u grupama dugmadi

Glavu gore!Dugmad s padajućim izbornikom moraju biti pojedinačno umotana u svoje .btn-groupunutar a .btn-toolbarradi pravilnog prikazivanja.

Pregled i primjeri

Koristite bilo koje dugme da pokrenete padajući meni tako što ćete ga postaviti unutar a .btn-groupi obezbediti odgovarajuću oznaku menija.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Akcija
    <span class = "caret" ></span> 
  </a>
  <ul class = "padajući meni" > 
    <!-- veze padajućeg menija -->
  </ul>
</div>

Radi sa svim veličinama dugmadi

Padajući meni gumba funkcionira u bilo kojoj veličini: .btn-large, .btn-small, ili .btn-mini.

Zahtijeva JavaScript

Padajući meni s gumbima zahtijeva da funkcionišu dodaci za padajući meni Bootstrap .

U nekim slučajevima – poput mobilnih – padajući meniji će se proširiti izvan okvira za prikaz. Poravnanje morate riješiti ručno ili pomoću prilagođenog JavaScripta.

Padajući meni dugmeta za razdvajanje

Nadovezujući se na stilove grupe dugmadi i oznake, lako možemo kreirati podijeljeno dugme. Dugmad za razdvajanje karakteriše standardna radnja sa leve strane i padajući prekidač na desnoj strani sa kontekstualnim vezama.

<div class = "btn-group" > 
  <button class = "btn" > Akcija </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "padajući meni" > 
    <!-- veze padajućeg menija -->
  </ul>
</div>

Veličine

Koristite dodatne klase dugmadi .btn-mini, .btn-smallili .btn-largeza određivanje veličine.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Akcija </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "padajući meni" > 
    <!-- veze padajućeg menija -->
  </ul>
</div>

Dropup meniji

Padajući meniji se takođe mogu prebacivati ​​odozdo prema gore dodavanjem jedne klase neposrednom roditelju .dropdown-menu. Preokrenut će smjer .careti pozicionirati sam meni tako da se kreće odozdo prema gore umjesto odozgo prema dolje.

<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 = "padajući meni" > 
    <!-- veze padajućeg menija -->
  </ul>
</div>

Lagane zadane postavke Ista oznaka, različite klase

Sve navigacijske komponente ovdje – kartice, tablete i liste – dijele istu osnovnu oznaku i stilove kroz .navklasu.

Osnovne kartice

Uzmite redovne <ul>linkove i dodajte .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "aktivan" > 
    <a href = "#" > Početna </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Osnovne tablete

Uzmite isti HTML, ali .nav-pillsumjesto toga koristite:

<ul class = "nav nav-pills" > 
  <li class = "aktivan" > 
    <a href = "#" > Početna </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Disabled state

Za bilo koju komponentu za navigaciju (kartice, tablete ili listu), dodajte .disabledza sive veze i bez efekata lebdenja . Međutim, veze će ostati na koje se može kliknuti, osim ako ne uklonite hrefatribut. Alternativno, možete implementirati prilagođeni JavaScript kako biste spriječili te klikove.

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

Poravnanje komponenti

Da biste poravnali navigacijske veze, koristite .pull-leftili .pull-rightuslužne klase. Obje klase će dodati CSS float u navedenom smjeru.

Stackable

Kako su tabovi i pilule prema zadanim postavkama horizontalni, samo dodajte drugu klasu, .nav-stacked, kako bi izgledali okomito naslagani.

Naslagane kartice

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

Naslagane tablete

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

Padajući meni

Dodajte padajuće menije sa malo dodatnog HTML-a i padajućim JavaScript dodacima .

Kartice sa padajućim menijima

<ul class = "nav nav-tabs" > 
  <li class = "padajući" > 
    <a class = "dropdown-toggle" 
       data-toggle = "padajući meni"
       href = "#" >
        Ispustiti
        <b class = "caret" ></b> 
      </a>
    <ul class = "padajući meni" > 
      <!-- linkovi -->
    </ul>
  </li>
</ul>

Tablete sa padajućim menijima

<ul class = "nav nav-pills" > 
  <li class = "padajući" > 
    <a class = "dropdown-toggle" 
       data-toggle = "padajući meni"
       href = "#" >
        Ispustiti
        <b class = "caret" ></b> 
      </a>
    <ul class = "padajući meni" > 
      <!-- linkovi -->
    </ul>
  </li>
</ul>

Nav liste

Jednostavan i lak način za izgradnju grupa navigacijskih veza s opcijskim zaglavljima. Najbolje ih je koristiti u bočnim trakama kao što je Finder u OS X.

Primjer navigacijske liste

Uzmite listu linkova i dodajte class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Zaglavlje liste </li> 
  <li class = "active" ><a href = "#" > Početna </a></li>  
  <li><a href = "#" > Biblioteka </a></li> 
  ...
</ul>

BilješkaZa ugniježđenje unutar navigacijske liste, uključite class="nav nav-list"u bilo koji ugniježđeni <ul>.

Horizontalni razdjelnici

Dodajte horizontalni razdjelnik kreiranjem prazne stavke liste s klasom .divider, na sljedeći način:

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

Tabbable nav

Oživite svoje kartice pomoću jednostavnog dodatka za prebacivanje između sadržaja putem kartica. Bootstrap integriše kartice sa karticama u četiri stila: gornji (podrazumevani), desni, donji i levi.

Tabable primjer

Da biste tabulatore učinili karticama, kreirajte .tab-panes jedinstvenim ID-om za svaku karticu i umotajte ih u .tab-content.

<div class = "tabbable" > <!-- Potrebno samo za lijeve/desne kartice -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Odjeljak 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Odjeljak 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Ja sam u Odjeljku 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Zdravo, ja sam u Odjeljku 2. </p>
    </div>
  </div>
</div>

Fade in tabs

Da biste učinili da kartice nestaju, dodajte .fadesvakom .tab-pane.

Zahtijeva jQuery dodatak

Sve kartice sa tabulatorima pokreću naš lagani jQuery dodatak. Pročitajte više o tome kako oživjeti kartice s tabulatorima na stranici JavaScript dokumenata .

Tabulator u bilo kojem smjeru

Kartice na dnu

Okrenite redoslijed HTML-a i dodajte klasu da stavite kartice na dno.

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

Kartice na lijevoj strani

Zamijenite klasu da stavite tabove s lijeve strane.

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

Kartice sa desne strane

Zamijenite klasu da stavite tabove s desne strane.

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

Osnovna navigacijska traka

Za početak, navigacijske trake su statične (nisu fiksirane na vrhu) i uključuju podršku za naziv projekta i osnovnu navigaciju. Postavite ga bilo gdje unutar .container, koji postavlja širinu vaše web stranice i sadržaja.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Naslov </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Početna </a></li>  
      <li><a href = "#" > Veza </a></li> 
      <li><a href = "#" > Veza </a></li> 
    </ul>
  </div>
</div>

Navbar komponente

Brand

Jednostavna veza za prikaz imena vašeg brenda ili projekta zahtijeva samo oznaku sidra.

<a class = "brand" href = "#" > Naziv projekta </a>  

Nav linkovi

Nav stavke se jednostavno dodaju preko neuređenih lista.

<ul class = "nav" > 
  <li class = "aktivan" > 
    <a href = "#" > Početna </a> 
  </li>
  <li><a href = "#" > Veza </a></li> 
  <li><a href = "#" > Veza </a></li> 
</ul>

Možete jednostavno dodati razdjelnike vašim navigacijskim vezama s praznom stavkom liste i jednostavnom klasom. Samo dodajte ovo između linkova:

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

Forms

Da biste pravilno stilizirali i pozicionirali obrazac unutar navigacijske trake, dodajte odgovarajuće klase kao što je prikazano ispod. Za zadani obrazac, uključite .navbar-formi ili .pull-leftili .pull-rightda ga pravilno poravnate.

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

Obrazac za pretragu

Za prilagođeniji obrazac za pretragu, dodajte .navbar-searchi formna .search-queryulaz za specijalizirane stilove na navigacijskoj traci.

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

Poravnanje komponenti

Poravnajte navigacijske veze, obrazac za pretragu ili tekst, koristite .pull-leftili .pull-rightuslužne klase. Obje klase će dodati CSS float u navedenom smjeru.

Korištenje padajućih menija

Dodajte padajuće i padajuće menije u navigaciju uz malo markupa i padajućeg JavaScript dodatka .

<ul class = "nav" > 
  <li class = "padajući" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      Račun
      <b class = "caret" ></b> 
    </a>
    <ul class = "padajući meni" > 
      ...
    </ul>
  </li>
</ul>

Posjetite dokumentaciju JavaScript padajućih menija za više oznaka i informacija o pozivanju padajućih menija.

Tekst

Zamotajte nizove teksta u element sa .navbar-text, obično na <p>oznaci za ispravan početak i boju.

Opcione varijacije prikaza

Popravite navigacijsku traku na vrh ili dno okvira za prikaz s dodatnom klasom na krajnjem div, .navbar.

Fiksirano na vrh

Dodajte .navbar-fixed-topi ne zaboravite da uzmete u obzir skriveno područje ispod njega dodavanjem najmanje 40px paddingu <body>. Obavezno dodajte ovo iza osnovnog Bootstrap CSS-a i prije opcionog responzivnog CSS-a.

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

Fiksirano na dno

Dodajte .navbar-fixed-bottomumjesto toga.

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

Statička gornja navigacijska traka

Kreirajte navigacijsku traku pune širine koja se pomiče sa stranice dodavanjem .navbar-static-top. Za razliku od .navbar-fixed-topklase, ne morate mijenjati bilo kakav padding na body.

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

Responsive Navbar

Da implementirate navigacijsku traku koja se sažima, umotajte sadržaj navigacijske trake u div koji sadrži .nav-collapse.collapsei dodajte dugme za prebacivanje navigacijske trake .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "kontejner" > 
 
      <!-- .btn-navbar se koristi kao prekidač za skupljeni sadržaj navigacijske trake -->
      <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>
 
      <!-- Obavezno ostavite marku ako želite da se prikaže -->
      <a class = "brand" href = "#" > Naziv projekta </a>  
 
      <!-- Sve što želite da bude skriveno na 940px ili manje, postavite ovde -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, itd -->
      </div>
 
    </div>
  </div>
</div>

Obrnuta varijacija

Izmijenite izgled navigacijske trake dodavanjem .navbar-inverse.

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

Primjeri

Prikazan jedan primjer kako bi se mogao prikazati na više stranica.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Početna </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Biblioteka </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Podaci </li> 
</ul>

Standardna paginacija

Jednostavna paginacija inspirirana Rdio-om, odlična za aplikacije i rezultate pretraživanja. Veliki blok je teško promašiti, lako je skalabilan i pruža velike površine klikova.

<div class = "paginacija" > 
  <ul>
    <li><a href = "#" > Prethodno </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 = "#" > Sljedeće </a></li> 
  </ul>
</div>

Opcije

Onemogućeno i aktivno stanje

Linkovi su prilagodljivi različitim okolnostima. Koristi .disabledse za veze na koje se ne može kliknuti i .activeza označavanje trenutne stranice.

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

Opciono možete zamijeniti aktivna ili onemogućena sidra za raspone kako biste uklonili funkcionalnost klika uz zadržavanje predviđenih stilova.

<div class = "paginacija" > 
  <ul>
    <li class = "onemogućeno" ><span> « </span></li> 
    <li class = "aktivan" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Veličine

Želite veću ili manju paginaciju? Dodajte .pagination-large, .pagination-small, ili .pagination-miniza dodatne veličine.

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

Poravnanje

Dodajte jednu od dvije neobavezne klase da promijenite poravnanje veza za paginaciju: .pagination-centeredi .pagination-right.

<div class = "paginacija centrirana na paginaciju" > 
  ...
</div>

<div class = "paginacija paginacija-desno" > 
  ...
</div>

Pejdžer

Brze prethodne i sljedeće veze za jednostavne implementacije paginacije s laganim oznakama i stilovima. Odličan je za jednostavne stranice poput blogova ili časopisa.

Zadani primjer

Podrazumevano, pejdžer centrira veze.

<ul class = "pager" > 
  <li><a href = "#" > Prethodno </a></li> 
  <li><a href = "#" > Sljedeće </a></li> 
</ul>

Poravnane veze

Alternativno, svaku vezu možete poravnati sa strane:

<ul class = "pager" > 
  <li class = "prethodni" > 
    <a href = "#" > ← Stariji </a> 
  </li>
  <li class = "sljedeća" > 
    <a href = "#" > Noviji → </a> 
  </li>
</ul>

Opciono onemogućeno stanje

Veze pejdžera takođe koriste opštu .disableduslužnu klasu iz paginacije.

<ul class = "pager" > 
  <li class = "prethodni onemogućen" > 
    <a href = "#" > ← Stariji </a> 
  </li>
  ...
</ul>

Etikete

Značke

Lako sklopivi

For easy implementation, labels and badges will simply collapse (via CSS's :empty selector) when no content exists within.

Hero unit

A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.

<div class="hero-unit">
  <h1>Heading</h1>
  <p>Tagline</p>
  <p>
    <a class="btn btn-primary btn-large">
      Learn more
    </a>
  </p>
</div>

Page header

A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

Highly customizable

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

Why use thumbnails

Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

Simple, flexible markup

Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

Uses grid column sizes

Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

Markup

As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

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

For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
      <h3>Thumbnail label</h3>
      <p>Thumbnail caption...</p>
    </div>
  </li>
  ...
</ul>

More examples

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

Clear the float on any element

class="clearfix"

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}