Bootstrap styleguides

This is a sample styleguide for Bootstrap that was generated using Styledown, a styleguide generator. They were taken from inline comments in the CSS.

About Styledown See sources

Buttons

Button

.btn- Buttons are the essence of life and the raison d'etre of UI design. Live it, love it.

<a class="btn btn-primary">Primary button</a>

Button group

.btn-group- Wrap a series of buttons in a group.

<div class="btn-group">
  <button class="btn btn-default">Left</button>
  <button class="btn btn-default">Middle</button>
  <button class="btn btn-default">Right</button>
</div>

Button toolbar

.btn-toolbar- Wrap a series of button groups in a toolbar for more complex components.

<div class="btn-toolbar">
  <div class="btn-group">
    <button class="btn btn-default">Cut</button>
    <button class="btn btn-default">Copy</button>
    <button class="btn btn-default">Paste</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-default">Undo</button>
    <button class="btn btn-default">Redo</button>
  </div>
</div>

Forms

Form group

.form-group- for grouping things. Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select>elements with .form-controlare set to width: 100%;by default. Wrap labels and controls in .form-group for optimum spacing.

<div class="form-group">
  <label>Email address</label>
  <input placeholder="hi@gmail.com" class="form-control" />
</div>
<div class="form-group">
  <label>Password</label>
  <input type="password" placeholder="Password" class="form-control" />
</div>

Form inline

.form-inline- Great for forms that only occupy one line for whatever reason.

@
<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">@</div>
      <input placeholder="Email" class="form-control" />
    </div>
  </div>
  <div class="form-group">
    <input placeholder="Password" type="password" class="form-control" />
  </div>
  <button class="btn btn-default">Sign in</button>
</form>

Input groups

.input-group- Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-groupwith an .input-group-addonto prepend or append elements to a single .form-control.

@

.00

$
.00
<div class="input-group">
  <div class="input-group-addon">@</div>
  <input placeholder="Username" class="form-control" />
</div>
<br/>
<div class="input-group">
  <input type="text" class="form-control" />
  <div class="input-group-addon">.00</div>
</div>
<br/>
<div class="input-group">
  <div class="input-group-addon">$</div>
  <input type="text" class="form-control" />
  <div class="input-group-addon">.00</div>
</div>

List group

Basic list group

.list-group- List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

  • Apple
  • Orange
  • Banana
  • Grape
<ul class="list-group">
  <li class="list-group-item">Apple</li>
  <li class="list-group-item">Orange</li>
  <li class="list-group-item">Banana</li>
  <li class="list-group-item">Grape</li>
</ul>

List group with badges

.list-groupwith span.badge- Add the badges component to any list group item and it will automatically be positioned on the right.

  • 14Apple
  • 8Orange
  • Banana
  • 1Grape
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>Apple</li>
  <li class="list-group-item">
    <span class="badge">8</span>Orange</li>
  <li class="list-group-item">Banana</li>
  <li class="list-group-item">
    <span class="badge">1</span>Grape</li>
</ul>

Panels

Basic panel

.panel- By default, all the .panel does is apply some basic border and padding to contain some content.

Basic panel example
<div class="panel panel-default">
  <div class="panel-body">Basic panel example</div>
</div>

Panel with heading

.panel-heading- Easily add a heading container to your panel with .panel-heading.

Without a title
Basic panel example

Panel title

Basic panel example
<div class="panel panel-default">
  <div class="panel-heading">Without a title</div>
  <div class="panel-body">Basic panel example</div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">Basic panel example</div>
</div>

Tabs

Basic tabs

.nav-tabs- Note that it requires a .navbase class.

<ul class="nav nav-tabs">
  <li class="active">
    <a>Home</a>
  </li>
  <li>
    <a>Messages</a>
  </li>
  <li>
    <a>Search</a>
  </li>
</ul>

Pill tabs

.nav-pills- Note that it requires a .navbase class.

<ul class="nav nav-pills">
  <li class="active">
    <a>Home</a>
  </li>
  <li>
    <a>Messages</a>
  </li>
  <li>
    <a>Search</a>
  </li>
</ul>

Verical pill tabs

.nav-pills.nav-stacked

<ul class="nav nav-pills nav-stacked">
  <li class="active">
    <a>Home</a>
  </li>
  <li>
    <a>Messages</a>
  </li>
  <li>
    <a>Search</a>
  </li>
</ul>

Progress bars

Basic progress bar

.progress- for progress bars. Set the widthCSS attribute.

30%
<div class="progress">
  <div style="width: 20%" class="progress-bar">
    <span class="sr-only">30%</span>
  </div>
</div>

Progress bar with label

.progress- remove the .sr-onlyclass from the span.

22%
<div class="progress">
  <div style="width: 22%" class="progress-bar">
    <span>22%</span>
  </div>
</div>

Low percentages

.progress- Progress bars representing low single digit percentages, as well as 0%, include a min-width: 20px;for legibility.

0%
2%
<div class="progress">
  <div style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="progress-bar">
    <span>0%</span>
  </div>
</div>
<div class="progress">
  <div style="width: 2%" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" class="progress-bar">
    <span>2%</span>
  </div>
</div>

Contextual alternatives

.progress-bar-*- Progress bars use some of the same button and alert classes for consistent styles.

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

Striped

.progress-bar-stripped- not available in IE8.

25%
<div class="progress">
  <div style="width: 25%" class="progress-bar progress-bar-striped">
    <span>25%</span>
  </div>
</div>

Components

Alerts

.alert- Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.

Well done!Things are going well.
Heads up!You're a wonderful person.
<div class="alert alert-success">
  <strong>Well done!</strong>Things are going well.</div>
<div class="alert alert-info">
  <strong>Heads up!</strong>You're a wonderful person.</div>

Pagination

.pagination- Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>
  <li>
    <a href="#">1</a>
  </li>
  <li>
    <a href="#">2</a>
  </li>
  <li>
    <a href="#">3</a>
  </li>
  <li>
    <a href="#">4</a>
  </li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

Pager

.pager- by default, it centers links.

<ul class="pager">
  <li>
    <a>Previous</a>
  </li>
  <li>
    <a>Next</a>
  </li>
</ul>

.breadcrumb- Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through :beforeand content.

<ol class="breadcrumb">
  <li>
    <a>Home</a>
  </li>
  <li>
    <a>Library</a>
  </li>
  <li class="active">Data</li>
</ol>