Flat icons
All icons require an <span> tag with a unique class, prefixed with icons icon-. To use, place the following code just about anywhere:
Button skins
<a href="#" class="btn btn-default">Button default</a>
<a href="#" class="btn btn-blue">Button blue</a>
<a href="#" class="btn btn-cyan">Button cyan</a>
<a href="#" class="btn btn-indigo">Button indigo</a>
<a href="#" class="btn btn-teal">Button teal</a>
<a href="#" class="btn btn-green">Button green</a>
<a href="#" class="btn btn-yellow">Button yellow</a>
<a href="#" class="btn btn-orange">Button orange</a>
<a href="#" class="btn btn-deep-orange">Button deep-orange</a>
<a href="#" class="btn btn-red">Button red</a>
<a href="#" class="btn btn-pink">Button pink</a>
<a href="#" class="btn btn-purple">Button purple</a>
Button style
<a href="#" class="btn btn-blue">Button blue</a>
<a href="#" class="btn btn-red btn-rounded">Button rounded</a>
<a href="#" class="btn btn-teal btn-bordered">Button bordered</a>
<a href="#" class="btn btn-indigo btn-bordered btn-rounded">Button rounded</a>
Button size
<a href="#" class="btn btn-blue btn-sm">Button small</a>
<a href="#" class="btn btn-red btn-sm btn-rounded">Button small</a>
<a href="#" class="btn btn-teal btn-sm btn-bordered">Button small</a>
<a href="#" class="btn btn-indigo btn-sm btn-bordered btn-rounded">Button small</a>
<a href="#" class="btn btn-blue">Button default</a>
<a href="#" class="btn btn-red btn-rounded">Button default</a>
<a href="#" class="btn btn-teal btn-bordered">Button default</a>
<a href="#" class="btn btn-indigo btn-bordered btn-rounded">Button default</a>
<a href="#" class="btn btn-blue btn-lg">Button large</a>
<a href="#" class="btn btn-red btn-lg btn-rounded">Button large</a>
<a href="#" class="btn btn-teal btn-lg btn-bordered">Button large</a>
<a href="#" class="btn btn-indigo btn-lg btn-bordered btn-rounded">Button large</a>
Image style
<img src="..." class="img-rounded" alt="" />
<img src="..." class="img-circle" alt="" />
<img src="..." class="img-thumbnail" alt="" />
Title heading
Oratio accusamus percipitur te mel. Quodsi debitis blandit ne duo, putent disputando eos ad.
<div class="thumbnail">
<img src="img/components/img242x200.jpg" alt="" />
<div class="caption">
<h4>Title heading</h4>
<p>...</p>
<p><a href="#" class="btn btn-blue" role="button">Button</a></p>
</div>
</div>
Alert style
Alert warning
Qui et choro ubique denique, vim ei accumsan deseruisse argumentum. Usu cu dicant scripta dignissim, usu omnis paulo
<div class="alert alert-warning"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Example alert warning</strong><br /> [...] </div>
Alert info
Qui et choro ubique denique, vim ei accumsan deseruisse argumentum. Usu cu dicant scripta dignissim, usu omnis paulo
<div class="alert alert-info"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Example alert info</strong><br /> [...] </div>
Alert danger
Qui et choro ubique denique, vim ei accumsan deseruisse argumentum. Usu cu dicant scripta dignissim, usu omnis paulo
<div class="alert alert-danger"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Example alert danger</strong><br /> [...] </div>
Alert success
Qui et choro ubique denique, vim ei accumsan deseruisse argumentum. Usu cu dicant scripta dignissim, usu omnis paulo
<div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Example alert success</strong><br /> [...] </div>
Accordion & tabs
Nam at illum sensibus. Partem explicari his at, ne est error everti vituperatoribus, dictas voluptaria mel at. In mutat reformidans sed, vix ea cibo fastidii adipiscing. Ne eirmod electram vel, eum adhuc munere causae id. Sit nominati patrioque eu, id homero accusamus patrioque.
Purto nulla vocent ne est, an eos ignota labore deterruisset. Vix quidam argumentum in, at vis adhuc ocurreret, virtute perpetua accusamus an has. Vel an praesent constituto intellegam, usu te vide audire sadipscing. Erat ceteros has an, et case ignota inimicus usu sint detraxit.
Reque facete in sit, eum feugait placerat et, duo sint detraxit ne. Pro etiam decore senserit eu, justo salutandi interpretaris eum te. Nec argumentum omittantur ei, eu graece philosophia his. Ei lorem nemore aliquando vix. Pri nulla quaerendum ex, ea sea dicta omnium docendi.
Lorem ipsum dolor sit amet, ea officiis quaerendum cum, sed alterum recusabo in. Nisl voluptua eu his. Ornatus mnesarchum concludaturque vix an, nam ut posse nostrum verterem, eam timeam euismod platonem ut. Solum essent inimicus ea pri. Te sea patrioque inciderint, te mei saepe dolore salutandi.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> How to start a business cooperation with us </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel"> <div class="panel-body"> [...] </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> How to access premium account business </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel"> <div class="panel-body"> [...] </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Are there any additional tax for each transaction </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel"> <div class="panel-body"> [...] </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="collapsefour"> <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapsefour"> What is the fee charged for each service </a> </h4> </div> <div id="collapsefour" class="panel-collapse collapse" role="tabpanel"> <div class="panel-body"> [...] </div> </div> </div> </div>
Tab one
Eu eum cibo aliquam voluptaria. Vidit iudico voluptua his in, id sea dolores voluptaria sadipscing. At mei consul soleat corrumpit. Ne elit explicari disputationi eum, reque eloquentiam ad nam. Vel sale oportere philosophia ei, habeo everti scripta ei has, etiam probatus te vim. Usu essent patrioque dignissim ea, singulis principes eu pro.
Tab two
Percipit at tibique corrumpit cum, quo saepe constituto et. Eos singulis deseruisse ex. Vix cetero praesent no, ne novum ceteros consulatu qui. Mundi vocibus placerat at mel, facilisis consulatu constituto mea ut. Etiam dolore tractatos an quo, mei ex maiorum fuisset. Nibh necessitatibus mei ad, ei consequat definitiones per.
Tab three
Oratio accusamus percipitur te mel. Quodsi debitis blandit ne duo, putent disputando eos ad. Eu malorum aliquam eam, sea utinam conclusionemque ne, nam soluta aperiri id. Est id nulla impetus philosophia facilis fierent adolescens. Mea id utamur electram. Per at duis mazim omittam. Vim te verterem pertinacia ad brute persecuti.
Tab four
Lorem ipsum dolor sit amet, choro elaboraret vel no. At eum blandit phaedrum similique, an has populo aliquip assentior. An mentitum persecuti vis. Cu quo errem congue. Malis postulant abhorreant ne est, id dicit iriure ceteros mea. Diceret aliquam dolores ea mei dignissim ea, singulis principes eu pro malorum aliquam eam.
<div class="tabbable" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<liclass="active"><a href="#tab1" role="tab" data-toggle="tab">Tab one</a></li>
<li><a href="#tab2" role="tab" data-toggle="tab">Tab two</a></li>
<li><a href="#tab3" role="tab" data-toggle="tab">Tab three</a></li>
<li><a href="#tab4" role="tab" data-toggle="tab">Tab four</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">...</div>
<div role="tabpanel" class="tab-pane" id="tab2">...</div>
<div role="tabpanel" class="tab-pane" id="tab3">...</div>
<div role="tabpanel" class="tab-pane" id="tab4">...</div>
</div>
</div>