General UI

Progress Bars Different Sizes

.progress

40% Complete (success)

Class: .sm

20% Complete

Class: .xs

60% Complete (warning)

Class: .xxs

60% Complete (warning)

Progress bars

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.

60% Complete (warning)

Vertical Progress Bars Different Sizes

By adding the class .vertical and .progress-sm, .progress-xs or .progress-xxs we achieve:

40%
100%
60%
60%

Vertical Progress bars

By adding the class .vertical we achieve:

40%
20%
60%
80%

Collapsible Accordion

Lorem ipsum Voluptate ad et culpa ad eu ex nulla voluptate nostrud consectetur nisi nisi incididunt voluptate enim labore occaecat qui laboris id sunt aute mollit reprehenderit aute non dolor labore tempor Duis ex deserunt proident elit enim culpa labore fugiat labore velit ut ea aute Ut laboris culpa consectetur ex tempor cillum consectetur enim do aute ut commodo mollit aute esse enim fugiat quis Excepteur enim in qui nostrud et ad nulla tempor cupidatat fugiat proident ut proident elit cupidatat laborum in fugiat amet elit mollit sit commodo reprehenderit enim minim sit Duis laboris dolor velit sed dolore consequat ea magna ut laborum incididunt nostrud do non nisi minim anim dolor anim ex adipisicing ut ex Ut cupidatat consectetur ut magna est minim proident occaecat aliquip consectetur adipisicing dolor ea nulla dolore commodo reprehenderit velit nulla eu dolor proident aliqua elit est aliqua labore eiusmod.
Laborum commodo cupidatat adipisicing aliqua qui in dolore occaecat labore nisi occaecat enim dolor sit exercitation sit Duis minim tempor est aliquip sit nostrud ea ea sit nostrud dolore cillum exercitation officia sunt pariatur consequat velit id nulla id Duis minim sunt sint culpa amet veniam commodo nisi reprehenderit tempor irure sunt enim in eu reprehenderit anim nulla tempor pariatur nisi fugiat consectetur sint deserunt elit voluptate in in labore eiusmod nostrud eiusmod est ullamco sit qui ut ut velit in veniam in Ut nulla pariatur reprehenderit deserunt laboris sed cupidatat est dolore adipisicing Duis in ut dolore dolor sunt aute ut Excepteur sint consectetur.
Lorem ipsum Esse pariatur sit reprehenderit non culpa sint ullamco qui in aliquip enim exercitation laborum ut eu voluptate exercitation Duis dolore amet pariatur id occaecat incididunt deserunt nulla esse proident.
Lorem ipsum Do cupidatat in culpa magna voluptate ullamco et anim nulla cupidatat dolor culpa consequat quis dolor eu aliqua Ut eiusmod ullamco sint reprehenderit commodo veniam ea irure sit reprehenderit sunt sed sed proident ea incididunt esse cillum cupidatat officia Duis.
Consecutus sicine hominum, artem conclusionemque patientia, omni fuerit intemperantiam efficeretur phaedrum minime obiecta constituam, motus mandamus perfunctio contra, imagines exquisitis reiciat.
Pluribus horum laetamur forensibus investigandi gravissimis quaeque possumus copulationesque. Sapientium interdictum, secutus servata expressas reici. Dixerit dixerit tantis conscientiam arbitramur reprehensa traditur propositum locos remotis, metus continent maledici attico sermo iucundius gerendarum. Bonarum incommoda afferrent iisque graeca perdiscere munere recordatione nos sapiens, perspexit, oderit nominata.
Acute ennius fuisset facile plena quem possim tribus antipatrum moveat, praestabiliorem geometria inportuno privamur, remissius habemus desperantes, nullas quas terrore modum uberius homine adiuvet, dissentio iudicabit ac, nullus molita foedus num. Circumcisaque nulla aut etenim doceat pecunias afferrent infinitis, propterea repellat epularum inveneris dissentiet meminerunt malivoli gloriosis, faciunt petat conscientia, nesciunt logikh fortunae, primos expedire aliquo putet aptissimum officiis naturalem.
Lorem ipsum Est dolore eiusmod sunt fugiat sunt minim qui ullamco incididunt mollit.
Solitudo per mox coerceri efficere vetuit exhorrescere, silano sitisque efficere iniurias adhaesiones agam dolores ponit multa. Exiguam ii genus libidinosarum scribere, hinc ipsius severitatem falsis desistemus praeteritas cogitemus delectu terentii, pedalis angusta scripserit sit iucundum mirari ipsi parta. Maluisti emolumento solido gravissimis amicitia ornatum eademque scribi terentianus tollit, tranquillitatem intellegentium persequeris ordiamur declinationem optio detrimenti inclusae, augendas semper.
Exeamus, frustra, imperitorum torquate artem efficeret talem vivendi, primum libidinem virtus apte incurrunt, appetendum utramque, oderis. Homines traditur loquerer fugiat sequitur gravitate nisi recordatione efflorescere. Primisque hostis prorsus praeda, solitudo labefactetur miserum chrysippi afficit deterret ipsam.
Malint docui o animos opus confidam isti animadvertat sententiae, imagines faciendumve varias dolemus detrimenti caritatem, interesse primos perfecto.
Lorem ipsum Aliquip aute ut tempor consectetur laboris ea aliqua Duis Excepteur laboris consequat enim dolore dolore ut officia esse sunt ut voluptate cupidatat.
Illo scribi depulsa atomus puto omnium legat, plus pater. Siculis voluptate repellendus debilitatem moderatio angatur careret, integre quale sollicitant, potest fallare attingere theophrasti gratiam quasi, vivendum solet metuamus declinare, elegans detractis. Loquuntur coerceri solitudo optabilem transferre malum. Desiderat. Didicisset. Timiditatem, aliena, tranquilli dicebas sicine. Conquirendae refugiendi desideret disserunt probaretur, brevis iure eidola intemperantiam dixisset quiete quaerenda ferae patria, dicemus declinabunt congressus, auctori referuntur, aliquod consumere consumeret quicquam mors, longinquitate tenebimus alienae sensu impeditur, uberius splendore, aegritudo rem cognitionem alienus quamvis.

Carousel

Headlines

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Text Emphasis

Lead to emphasize importance

Text green to emphasize success

Text aqua to emphasize info

Text purple to emphasize info

Text light blue to emphasize info (2)

Text red to emphasize danger

Text yellow to emphasize warning

Text muted to emphasize general

Block Quotes

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

Someone famous in Source Title

Block Quotes Pulled Right

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

Someone famous in Source Title

Unordered List

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered Lists

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Unstyled List

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Description

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Description Horizontal

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.