Bootstrap styles

Hero-unit show code

<div class="hero-unit">
  <h1>I am a Hero unit</h1>
  <h3>I am a secondary headline</h3>
</div>

I am a Hero unit

I am a secondary headline

Buttons show code

<p>
  <a href="#" class="btn preventDefault">a.btn</a>
  <a href="#" class="btn btn-primary">a.btn-primary</a>
  <a href="#" class="btn btn-info">a.btn-info</a>
  <a href="#" class="btn btn-success">a.btn-success</a>
  <a href="#" class="btn btn-warning">a.btn-warning</a>
  <a href="#" class="btn btn-danger">a.btn-danger</a>
  <a href="#" class="btn btn-inverse">a.btn-inverse</a>
  <a href="#" class="btn btn-link">a.btn-link</a>
</p>
<p>
  <a href="#" class="btn btn-primary btn-mini">a.btn-mini</a>
  <a href="#" class="btn btn-primary btn-small">a.btn-small</a>
  <a href="#" class="btn btn-primary">a.btn</a>
  <a href="#" class="btn btn-primary btn-large">a.btn-large</a>
</p>
<p>
  <a href="#" class="btn btn-primary btn-block">a.btn-block</a>
  <a href="#" class="btn btn-block">a.btn-block</a>
</p>

a.btn a.btn-primary a.btn-info a.btn-success a.btn-warning a.btn-danger a.btn-inverse a.btn-link

a.btn-mini a.btn-small a.btn a.btn-large

a.btn-block a.btn-block

Well show code

<p class="well well-small">I am a small well</p>
<p class="well">I am a well</p>
<p class="well well-large">I am a large well</p>

I am a small well

I am a well

I am a large well

Scaffolding show code

<div class="row-fluid">
  <div class="span6">.span6</div>
  <div class="span6">.span6</div>
</div>
<div class="row-fluid">
  <div class="span4">.span4</div>
  <div class="span4">.span4</div>
  <div class="span4">.span4</div>
</div>
<div class="row-fluid">
  <div class="span3">.span3</div>
  <div class="span3">.span3</div>
  <div class="span3">.span3</div>
  <div class="span3">.span3</div>
</div>
<div class="row-fluid">
  <div class="span2">.span2</div>
  <div class="span2">.span2</div>
  <div class="span2">.span2</div>
  <div class="span2">.span2</div>
  <div class="span2">.span2</div>
  <div class="span2">.span2</div>
</div>
<div class="row-fluid">
  <div class="span1">1</div>
  <div class="span1">1</div>
  <div class="span1">1</div>
  <div class="span1">1</div>
  <div class="span1">1</div>
  <div class="span1">1</div>
  <div class="span1">1</div>
  <div class="span1">1</div>
  <div class="span1">1</div>
  <div class="span1">1</div>
  <div class="span1">1</div>
  <div class="span1">1</div>
</div>
<div class="row-fluid">
  <div class="span7 offset1">.span7 .offset1</div>
  <div class="span3 offset1">.span3 .offset1</div>
</div>
<div class="row-fluid">
  <div class="span12">.span12</div>
</div>
.span6
.span6
.span4
.span4
.span4
.span3
.span3
.span3
.span3
.span2
.span2
.span2
.span2
.span2
.span2
1
1
1
1
1
1
1
1
1
1
1
1
.span7 .offset1
.span3 .offset1
.span12

Tooltips show code

<a href="#" data-toggle="tooltip" title="demo text goes here">tooltip</a>
<a href="#" data-toggle="tooltip-down" title="demo text goes here">tooltip-down</a>
<a href="#" data-toggle="tooltip-right" title="demo text goes here">tooltip-right</a>
<a href="#" data-toggle="tooltip-left" title="demo text goes here">tooltip-left</a>

Cras sit amet magna nulla. Pellentesque quis urna urna, sit amet egestas elit. Ut ultricies, lacus id gravida scelerisque, nisi leo blandit neque, in auctor nunc urna ac dolor. Nam sodales iaculis diam. Aliquam ligula sem, dapibus sed sagittis quis, volutpat blandit ipsum. Integer ornare viverra lacinia. Pellentesque ac risus eget mauris laoreet vehicula sit amet eu lectus. Duis ac dapibus nibh. Nam ut tortor id enim congue imperdiet. Praesent a libero massa. Vivamus elementum pulvinar nisi, at rutrum odio faucibus ac. Integer sed magna lectus. Praesent adipiscing porta felis, vel imperdiet magna rhoncus pharetra. Ut ut magna velit, sed fringilla ante. Nullam accumsan elit in mauris aliquam suscipit non eget nisl. Vivamus massa augue, dignissim ut luctus accumsan, eleifend id nunc.

Popovers show code

<a href="#" data-toggle="popover" class="btn" title="Demo Title" data-content="Sample content">popover</a>
<a href="#" data-toggle="popover-down" class="btn" title="Demo Title" data-content="Sample content">popover-down</a>
<a href="#" data-toggle="popover-right" class="btn" title="Demo Title" data-content="Sample content">popover-right</a>
<a href="#" data-toggle="popover-left" class="btn" title="Demo Title" data-content="Sample content">popover-left</a>

Curabitur venenatis neque quis nisl malesuada lobortis. Proin interdum erat eu enim elementum sit amet accumsan augue pharetra. Curabitur blandit dolor ut lacus adipiscing eget fermentum nibh mattis. Quisque enim risus, ultricies quis vulputate sed, fringilla vel erat. Vestibulum ac massa nisl. Ut dignissim varius iaculis. Donec magna lorem, consectetur dictum adipiscing congue, aliquet a lacus. Etiam congue mattis quam, eu molestie massa semper nec. Quisque tempus, nunc ut aliquam blandit, sem dolor aliquam neque, at vulputate nulla tortor at est. Nam commodo ultricies dui vel ullamcorper. Donec viverra fringilla urna, in molestie enim cursus faucibus. Praesent sit amet erat in erat faucibus euismod at non lorem. Vivamus enim risus, consequat sit amet consequat eget, tristique id ligula. Pellentesque lobortis tincidunt est sed scelerisque.

Tabs show code

<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade in active" id="home">
    <p>Home content here</p>
  </div>
  <div class="tab-pane fade in" id="profile">
    <p>Profile content here</p>
  </div>
  <div class="tab-pane fade in" id="messages">
    <p>Messages content here</p>
  </div>
  <div class="tab-pane fade in" id="settings">
    <p>Settings content here</p>
  </div>
</div>

Pellentesque dignissim, neque eu tempus vestibulum, tortor purus vestibulum elit, vulputate laoreet nulla elit a mauris. In ligula dolor, tincidunt id eleifend ut, cursus nec lacus. Duis cursus viverra lorem quis condimentum.

Quisque vehicula nisl sit amet nisi aliquet tincidunt. Nullam ultrices, erat eget convallis congue, justo nunc condimentum dui, at adipiscing mauris leo ut lectus. Quisque accumsan mi eu odio vestibulum vel eleifend arcu pretium.

Curabitur adipiscing, lacus eu mollis vulputate, nibh arcu venenatis dui, non vulputate libero felis quis ante. Nunc eros justo, varius at pharetra ut, lacinia consequat diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Pellentesque dignissim, neque eu tempus vestibulum, tortor purus vestibulum elit, vulputate laoreet nulla elit a mauris. In ligula dolor, tincidunt id eleifend ut, cursus nec lacus. Duis cursus viverra lorem quis condimentum.

Quisque vehicula nisl sit amet nisi aliquet tincidunt. Nullam ultrices, erat eget convallis congue, justo nunc condimentum dui, at adipiscing mauris leo ut lectus. Quisque accumsan mi eu odio vestibulum vel eleifend arcu pretium.

Curabitur adipiscing, lacus eu mollis vulputate, nibh arcu venenatis dui, non vulputate libero felis quis ante. Nunc eros justo, varius at pharetra ut, lacinia consequat diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nunc vel massa nec nibh rutrum consequat. Curabitur tristique, nisi id mattis blandit, nibh massa rhoncus lacus, nec fermentum eros mi vitae mauris. Morbi fringilla dictum pulvinar.

Proin ac risus eros, laoreet aliquam sapien. Vestibulum blandit fermentum turpis, id auctor sapien lobortis nec. Phasellus condimentum cursus velit, ac malesuada nulla volutpat vitae. Morbi semper mi nulla. Nulla id fringilla augue.

Duis scelerisque egestas nunc, sit amet condimentum neque hendrerit vitae. Pellentesque pellentesque facilisis ultrices. Sed ac mi tellus, eget fringilla urna. Nunc id ipsum ut erat tempor ultrices vitae eu enim.

Nunc vel massa nec nibh rutrum consequat. Curabitur tristique, nisi id mattis blandit, nibh massa rhoncus lacus, nec fermentum eros mi vitae mauris. Morbi fringilla dictum pulvinar.

Proin ac risus eros, laoreet aliquam sapien. Vestibulum blandit fermentum turpis, id auctor sapien lobortis nec. Phasellus condimentum cursus velit, ac malesuada nulla volutpat vitae. Morbi semper mi nulla. Nulla id fringilla augue.

Duis scelerisque egestas nunc, sit amet condimentum neque hendrerit vitae. Pellentesque pellentesque facilisis ultrices. Sed ac mi tellus, eget fringilla urna. Nunc id ipsum ut erat tempor ultrices vitae eu enim.

Labels show code

<span class="label">Default</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-important">Important</span>
<span class="label label-info">Info</span>
<span class="label label-inverse">Inverse</span>

Default Success Warning Important Info Inverse

Badges show code

<span class="badge">Default</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-important">Important</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-inverse">Inverse</span>

Default Success Warning Important Info Inverse

Toggle show code

<p class="center">
  <a class="btn" data-toggle="collapse" data-target="#toggle-demo">Toggle Section</a>
</p>
<div id="toggle-demo" class="collapse">
  <div class="hero-unit">
    <h1 class="center">Toggle Demo</h1>
  </div>
</div>

Toggle Section

Toggle Demo

Modal show code

<p class="center" style="margin:20px auto;">
  <a href="#demo-modal" role="button" class="btn" data-toggle="modal">Launch Modal</a>
</p>
<div id="demo-modal" class="modal hide fade in" role="content" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h1 class="modal-h1-title">Demo Modal</h1>
  </div>
  <div class="modal-body search-modal row-fluid">
    <p>Oh hello!</p>				
  </div>
  <div class="modal-footer">
    <a href="#" class="btn btn-inverse" data-dismiss="modal" aria-hidden="true" title="Click to dismiss search">Close</a>
  </div>
</div>

Disabled show code

<a href="#" class="btn disabled">button</a>

button

Progress Bars show code

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

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

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

<div class="progress">
  <div class="bar bar-success" style="width: 30%;"></div>
  <div class="bar bar-warning" style="width: 25%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
  <div class="bar bar-info" style="width: 15%;"></div>
</div>

<div class="progress progress-info">
  <div class="bar" style="width: 35%"></div>
</div>

<div class="progress progress-success">
  <div class="bar" style="width: 70%"></div>
</div>

<div class="progress progress-warning">
  <div class="bar" style="width: 95%"></div>
</div>

<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>