h1. Heading 1

<div class="alert alert-info fade in">
  <a class="close" data-dismiss="alert" href="#">×</a>
  <span class="icon-info-sign"> </span>
  messages goes here...
</div>

<a href="#">...<a>
<span class="underline">...<span>
<span class="highlight">...<span>

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

<ul class="styled">
  <li>...</li>
</ul>

<ol>
  <li>...</li>
</ol>

<span class="label [label-NAME]">Default</span>

<span class="badge [badge-NAME]">1</span>

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a data-toggle="tab" href="#tab1">tab name 1..</a></li>
  <li><a data-toggle="tab" href="#tab2">tab name 2..</a></li>
</ul>
<div class="tab-content" id="myTabContent">
  <div id="tab1" class="tab-pane fade in active">content 1...</div>
  <div id="tab1" class="tab-pane fade">content 2...</div>
</div>

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Content Area 1
        <i class="icon-chevron-down"></i>
      </a>
    </div>
  <div id="collapseOne" class="accordion-body collapse">
    <div class="accordion-inner">
      content 1...
    </div>
  </div>
</div>
<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Content Area 2
        <i class="icon-chevron-down"></i>
      </a>
    </div>
  <div id="collapseOne" class="accordion-body collapse">
    <div class="accordion-inner">
      content 2...
    </div>
  </div>
</div>

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>

<pre class="prettyprint linenums">
pre {
  width: 100%;
  margin: 0 0 15px 0;
  padding: 0 10px;
  background-color: #F2F2F2;
}</pre>

<p><span class="dropcap nocolor">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan.</p>
<p><span class="dropcap">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan.</p>
<p><span class="dropcap color">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan.</p>

Inline form

Horizontal form

• Add .form-horizontal to the form
• Wrap labels and controls in .control-group
• Add .control-label to the label
• Wrap any associated controls in .controls for proper alignment

Button classes

Button sizes

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

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

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

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
  </ol>
  
  <div class="carousel-inner">
    <div class="active item">
      <img src=".." />
      <div class="carousel-caption">caption 1...</div>
    </div>
    <div class="item">
      <img src=".." />
      <div class="carousel-caption">caption 2...</div>
    </div>
  </div>
  
  <a class="carousel-control left" href="#myCarousel" data-slide="prev"><i class="icon-chevron-left"> </i></a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="icon-chevron-right"> </i></a>
</div>

<iframe src="http://player.vimeo.com/video/70002703" height="361" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>