Content

Accordion

div 1

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

div 2

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

div 3

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem

Tab

Ut suscipit quis mauris ut hendrerit. Proin pulvinar velit porta, porta leo bibendum, sodales risus. Aliquam erat volutpat. Morbi facilisis justo vitae sem pretium, nec imperdiet lacus tempus. Sed vulputate molestie massa, lobortis sagittis quam commodo in. Duis luctus, tellus nec varius aliquam, sem orci vehicula nisl, et convallis metus lectus non metus.

Divider


<hr />


<hr class="border-primary" />


<hr class="border-success" />


<hr class="border-info" />


<hr class="border-warning" />


<hr class="border-danger" />


<hr class="border-white" />

Alerts

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.

<div class="alert alert-success" role="alert"> <strong>...</strong>...</div>
<div class="alert alert-info" role="alert"> <strong>...</strong>...</div>
<div class="alert alert-warning" role="alert"> <strong>...</strong>...</div>
<div class="alert alert-danger" role="alert"> <strong>...</strong>...</div>

Message! Lorem ipsum dolor sit amet vestibulum eget!


<div class="alert alert-success alert-dismissable">

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

<strong>Message!</strong> Lorem ipsum dolor sit amet vestibulum eget!

</div>

Progress bars


<div class="progress">

  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

  <span class="sr-only">60% Complete</span>

  </div>

</div>

60%


<div class="progress">

  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

60%

  </div>

</div>


<div class="progress">

  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">

  <span class="sr-only">40% Complete</span>

  </div>

</div>


<div class="progress">

  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">

  <span class="sr-only">40% Complete</span>

  </div>

</div>

Add .active to .progress-bar-striped to animate the stripes right to left. Not available in IE9 and below.

Panels

Panel title

Panel content


<div class="panel panel-default">

  <div class="panel-heading">Panel title</div>

  <div class="panel-body">

  Panel content

  </div>

</div>

Panel title

Panel content


<div class="panel panel-primary">

  <div class="panel-heading">Panel title</div>

  <div class="panel-body">

  Panel content

  </div>

</div>

Panel title

Panel content


<div class="panel panel-success">

  <div class="panel-heading">Panel title</div>

  <div class="panel-body">

  Panel content

  </div>

</div>

Panel title

Panel content


<div class="panel panel-info">

  <div class="panel-heading">Panel title</div>

  <div class="panel-body">

  Panel content

  </div>

</div>

Panel title

Panel content


<div class="panel panel-warning">

  <div class="panel-heading">Panel title</div>

  <div class="panel-body">

  Panel content

  </div>

</div>

Panel title

Panel content


<div class="panel panel-danger">

  <div class="panel-heading">Panel title</div>

  <div class="panel-body">

  Panel content

  </div>

</div>

Panel content

Panel footer


<div class="panel panel-default">

  <div class="panel-body">

  ...

  </div>

<div class="panel-footer">Panel footer</div>

  </div>

Wells


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

Look, I'm in a well!


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

Look, I'm in a large well!


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

Look, I'm in a small well!