Skip to content

Trigger Glossary

Jump to bottom Edit New page
Benjamin Sullivan edited this page Jan 31, 2015 · 9 revisions

Here is a glossary of triggers corresponding to the Bootstrap documentation.

Table of Contents

Getting started

Bootstrap CDN

bootstrapcdn

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Basic template

basictemplate

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CSS

HTML5 doctype

html5

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Mobile first

viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

viewportnozoom

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Containers

container

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

containerfluid

<div class="container-fluid">
  ...
</div>

Grid system

row

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

colxs, colsm, colmd, collg

<div class="col-xs-1">
  ...
</div>
<div class="col-sm-1">
  ...
</div>
<div class="col-md-1">
  ...
</div>
<div class="col-lg-1">
  ...
</div>

colxsoffset, colsmoffset, colmdoffset, collgoffset

<div class="col-xs-offset-1">
  ...
</div>
<div class="col-sm-offset-1">
  ...
</div>
<div class="col-md-offset-1">
  ...
</div>
<div class="col-lg-offset-1">
  ...
</div>

colxspush, colsmpush, colmdpush, collgpush

<div class="col-xs-push-1">
  ...
</div>
<div class="col-sm-push-1">
  ...
</div>
<div class="col-md-push-1">
  ...
</div>
<div class="col-lg-push-1">
  ...
</div>

colxspull, colsmpull, colmdpull, collgpull

<div class="col-xs-pull-1">
  ...
</div>
<div class="col-sm-pull-1">
  ...
</div>
<div class="col-md-pull-1">
  ...
</div>
<div class="col-lg-pull-1">
  ...
</div>

Typography

h1, h2, h3, h4, h5, h6

<h1>Bootstrap heading</h1>
<h2>Bootstrap heading</h2>
<h3>Bootstrap heading</h3>
<h4>Bootstrap heading</h4>
<h5>Bootstrap heading</h5>
<h6>Bootstrap heading</h6>

h1small, h2small, h3small, h4small, h5small, h6small

<h1>Bootstrap heading <small>Secondary text</small></h1>
<h2>Bootstrap heading <small>Secondary text</small></h2>
<h3>Bootstrap heading <small>Secondary text</small></h3>
<h4>Bootstrap heading <small>Secondary text</small></h4>
<h5>Bootstrap heading <small>Secondary text</small></h5>
<h6>Bootstrap heading <small>Secondary text</small></h6>

p

<p>...</p>

lead

<p class="lead">...</p>

mark

<mark>hightlight</mark>

del

<del>This line of text is meant to be treated as deleted text.</del>

s

<s>This line of text is meant to be treated as no longer accurate.</s>

ins

<ins>This line of text is meant to be treated as an addition to the document.</ins>

u

<u>This line of text will render as underlined</u>

small

<small>This line of text is meant to be treated as fine print.</small>

strong

<strong>bold text</strong>

em

<em>italicized text</em>

textleft, textcenter, textright

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

textjustify

<p class="text-justify">Justified text.</p>

textnowrap

<p class="text-nowrap">No wrap text.</p>

textlowercase, textuppercase, textcapitalize

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

abbr

<abbr title="attribute">attr</abbr>

initialism

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

address

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

blockquote

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

blockquotesource

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

blockquotereverse

<blockquote class="blockquote-reverse">
  ...
</blockquote>

ul

<ul>
  <li>...</li>
</ul>

ol

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

listunstyled

<ul class="list-unstyled">
  <li>...</li>
</ul>

listinline

<ul class="list-inline">
  <li>...</li>
</ul>

dl

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

dlhorizontal

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Code

code

<code>&lt;section&gt;</code>

kbd

<kbd>cd</kbd>

pre

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

var

<var>x</var>

samp

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Tables

table

<table class="table">
  ...
</table>

tablestriped

<table class="table table-striped">
  ...
</table>

tablebordered

<table class="table table-bordered">
  ...
</table>

tablehover

<table class="table table-hover">
  ...
</table>

tablecondensed

<table class="table table-condensed">
  ...
</table>

tractive, trsuccess, trwarning, trdanger, trinfo

<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

tdactive, tdsuccess, tdwarning, tddanger, tdinfo

<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>

thactive, thsuccess, thwarning, thdanger, thinfo

<th class="active">...</th>
<th class="success">...</th>
<th class="warning">...</th>
<th class="danger">...</th>
<th class="info">...</th>

tableresponsive

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Forms

form

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

forminline

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

formhorizontal

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

input

<input type="text" class="form-control" placeholder="Text input">

textarea

<textarea class="form-control" rows="3"></textarea>

checkbox

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

radio

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

checkboxinline

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

radioinline

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

select

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

selectmultiple

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

formcontrolstatic

<div class="form-group">
  <label class="col-sm-2 control-label">Email</label>
  <div class="col-sm-10">
    <p class="form-control-static">email@example.com</p>
  </div>
</div>

inputdisabled

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

fieldsetdisabled

<fieldset disabled>
  <div class="form-group">
    <label for="disabledTextInput">Disabled input</label>
    <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
  </div>
  <div class="form-group">
    <label for="disabledSelect">Disabled select menu</label>
    <select id="disabledSelect" class="form-control">
      <option>Disabled select</option>
    </select>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Can't check this
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</fieldset>

inputreadonly

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

formgrouphassuccess, formgrouphaswarning, formgrouphaserror

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>

checkboxhassuccess, checkboxhaswarning, checkboxhaserror

<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

formgrouphasfeedback

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

inputlg, inputsm

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

selectlg, selectsm

<select class="form-control input-lg">...</select>
<select class="form-control input-sm">...</select>

formgrouplg, formgroupsm

<div class="form-group form-group-lg">
  <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
  <div class="col-sm-10">
    <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
  </div>
</div>
<div class="form-group form-group-sm">
  <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
  <div class="col-sm-10">
    <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
  </div>
</div>

inputhelpblock

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Buttons

btn

<button class="btn btn-default" type="submit">Button</button>

abtn

<a class="btn btn-default" href="#" role="button">Link</a>

inputbtn

<input class="btn btn-default" type="button" value="Input">

submitbtn

<input class="btn btn-default" type="submit" value="Submit">

btndefault, btnprimary, btnsuccess, btninfo, btnwarning, btndanger

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>

abtndefault, abtnprimary, abtnsuccess, abtninfo, abtnwarning, abtndanger

<a href="#" class="btn btn-default" role="button">Default</a>
<a href="#" class="btn btn-primary" role="button">Primary</a>
<a href="#" class="btn btn-success" role="button">Success</a>
<a href="#" class="btn btn-info" role="button">Info</a>
<a href="#" class="btn btn-warning" role="button">Warning</a>
<a href="#" class="btn btn-danger" role="button">Danger</a>

btnlink, abtnlink

<button type="button" class="btn btn-link">Link</button>
<a href="#" class="btn btn-link" role="button">Link</a>

btnlg, btnsm, btnxs

<button type="button" class="btn btn-default btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>

abtnlg, abtnsm, abtnxs

<a href="#" class="btn btn-default btn-lg" role="button">Large button</a>
<a href="#" class="btn btn-default btn-sm" role="button">Small button</a>
<a href="#" class="btn btn-default btn-xs" role="button">Extra small button</a>

btnblock, abtnblock

<button type="button" class="btn btn-default btn-block">Block level button</button>
<a href="#" class="btn btn-default btn-block" role="button">Block level button</a>

btnactive, abtnactive

<button type="button" class="btn btn-default active">Button</button>
<a href="#" class="btn btn-default active" role="button">Link</a>

btndisabled, abtndisabled

<button type="button" class="btn btn-default" disabled="disabled">Button</button>
<a href="#" class="btn btn-default disabled" role="button">Link</a>

Images

imgresponsive

<img src="..." class="img-responsive" alt="Responsive image">

imgrounded, imgcircle, imgthumbnail

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Helper classes

textmuted

<p class="text-muted">...</p>

textprimary, textsuccess, textinfo, textwarning, textdanger

<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

bgprimary, bgsuccess, bginfo, bgwarning, bgdanger

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

close

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

caret

<span class="caret"></span>

pullleft, pullright

<div class="pull-left">...</div>
<div class="pull-right">...</div>

centerblock

<div class="center-block">...</div>

clearfix

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

show, hidden, invisible

<div class="show">...</div>
<div class="hidden">...</div>
<div class="invisible">...</div>

sronlyfocusable

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

texthide

<h1 class="text-hide">Custom heading</h1>

hiddenxs, hiddensm, hiddenmd, hiddenlg

<div class="hidden-xs"></div>
<div class="hidden-sm"></div>
<div class="hidden-md"></div>
<div class="hidden-lg"></div>

visiblexsblock, visiblexsinline, visiblexsinlineblock

<div class="visible-xs-block"></div>
<div class="visible-xs-inline"></div>
<div class="visible-xs-inline-block"></div>

visiblesmblock, visiblesminline, visiblesminlineblock

<div class="visible-sm-block"></div>
<div class="visible-sm-inline"></div>
<div class="visible-sm-inline-block"></div>

visiblemdblock, visiblemdinline, visiblemdinlineblock

<div class="visible-md-block"></div>
<div class="visible-md-inline"></div>
<div class="visible-md-inline-block"></div>

visiblelgblock, visiblelginline, visiblelginlineblock

<div class="visible-lg-block"></div>
<div class="visible-lg-inline"></div>
<div class="visible-lg-inline-block"></div>

visibleprintblock, visibleprintinline, visibleprintinlineblock

<div class="visible-print-block"></div>
<div class="visible-print-inline"></div>
<div class="visible-print-inline-block"></div>

hiddenprint

<div class="hidden-print"></div>

Components

Glyphicons

glyphicon

<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>

Dropdowns

dropdown

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

dropdownmenuright

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

dropdownheader

<li role="presentation" class="dropdown-header">...</li>

divider

<li role="presentation" class="divider"></li>

lidisabled

<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">...</a></li>

Button groups

btngroup, abtngroup

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group" role="group" aria-label="...">
  <a class="btn btn-default" href="#" role="button">Left</a>
  <a class="btn btn-default" href="#" role="button">Middle</a>
  <a class="btn btn-default" href="#" role="button">Right</a>
</div>

btntoolbar

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

btngrouplg, btngroupsm, btngroupxs

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

btngroupvertical

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

btngroupjustified, abtngroupjustified

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>
<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <a class="btn btn-default" href="#" role="button">Left</a>
  <a class="btn btn-default" href="#" role="button">Middle</a>
  <a class="btn btn-default" href="#" role="button">Right</a>
</div>

Button dropdowns

btndropdown

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

btndropdownsplit

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

btndropup

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Input groups

inputgroup

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

inputgrouplg, inputgroupsm

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

inputgroupcheckbox

<div class="input-group">
  <span class="input-group-addon">
    <input type="checkbox" aria-label="...">
  </span>
  <input type="text" class="form-control" aria-label="...">
</div>

inputgroupradio

<div class="input-group">
  <span class="input-group-addon">
    <input type="radio" aria-label="...">
  </span>
  <input type="text" class="form-control" aria-label="...">
</div>

inputgroupbtn

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search for...">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
</div>

inputgroupbtndropdown

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
</div>

Navs

navtabs, navpills

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>
<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

navpillsstacked

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

navtabsjustified, navpillsjustified

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

navtabsdropdown, navpillsdropdown

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
  </li>
  ...
</ul>
<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navbar

navbar

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

navbarform

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

navbarbtn

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

navbartext

<p class="navbar-text">Signed in as Mark Otto</p>

navbarlink

<a href="#" class="navbar-link">Mark Otto</a>

navbarfixedtop, navbarfixedbottom

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>
<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

navbarstatictop

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

navbarinverse

<nav class="navbar navbar-inverse">
  ...
</nav>

Breadcrumbs

breadcrumb

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

Pagination

pagination

<nav>
  <ul class="pagination">
    <li class="disabled">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="active"><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="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

paginationlg, paginationsm

<nav><ul class="pagination pagination-lg">...</ul></nav>
<nav><ul class="pagination pagination-sm">...</ul></nav>

pager

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

pageraligned

<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Labels

label

<span class="label label-default">Default</span>

labeldefault, labelprimary, labelsuccess, labelinfo, labelwarning, labeldanger

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Badges

badge

<a href="#">Inbox <span class="badge">42</span></a>

badgebtn

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

badgenav

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Jumbotron

jumbotron

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

jumbotroncontainer

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Page header

pageheader

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Thumbnails

thumbnail

<a href="#" class="thumbnail">
  <img src="..." alt="...">
</a>

thumbnailcontent

<div class="thumbnail">
  <img src="..." alt="...">
  <div class="caption">
    <h3>Thumbnail label</h3>
    <p>...</p>
    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>

Alerts

alert

<div class="alert alert-success" role="alert">...</div>

alertsuccess, alertinfo, alertwarning, alertdanger

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

alertdismissible

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

alertlink

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Progress bars

progress

<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>

progresssuccess, progressinfo, progresswarning, progressdanger

<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 (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

progressstriped

<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 (success)</span>
  </div>
</div>

progressstripedactive

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

progressstacked

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Media object

media

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

medialeft, mediaright

<div class="media-left">
  <a href="#">
    <img class="media-object" src="..." alt="...">
  </a>
</div>
<div class="media-right">
  <a href="#">
    <img class="media-object" src="..." alt="...">
  </a>
</div>

mediamiddle, mediabottom

<div class="media-left media-middle">
  <a href="#">
    <img class="media-object" src="..." alt="...">
  </a>
</div>
<div class="media-left media-bottom">
  <a href="#">
    <img class="media-object" src="..." alt="...">
  </a>
</div>

mediabody

<div class="media-body">
  <h4 class="media-heading">Media heading</h4>
  ...
</div>

medialist

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

List group

listgroup

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

listgroupitem

<li class="list-group-item">Cras justo odio</li>

listgroupitembadge

<li class="list-group-item">
  <span class="badge">14</span>
  Cras justo odio
</li>

alistgroupitem

<a href="#" class="list-group-item active">Cras justo odio</a>

listgroupitemdisabled

<a href="#" class="list-group-item disabled">Cras justo odio</a>

listgroupitemsuccess, listgroupiteminfo, listgroupitemwarning, listgroupitemdanger

<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>

alistgroupitemsuccess, alistgroupiteminfo, alistgroupitemwarning, alistgroupitemdanger

<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>

listgroupitemcontent, alistgroupitemcontent

<li class="list-group-item">
  <h4 class="list-group-item-heading">List group item heading</h4>
  <p class="list-group-item-text">...</p>
</li>
<a href="#" class="list-group-item active">
  <h4 class="list-group-item-heading">List group item heading</h4>
  <p class="list-group-item-text">...</p>
</a>

Panels

panel

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

panelheading, panelheadingtitle

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

panelbody

<div class="panel-body">
  Panel content
</div>

panelfooter

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

paneldefault, panelprimary, panelsuccess, panelinfo, panelwarning, paneldanger

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

paneltable

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

panellistgroup

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Responsive embed

embedresponsive

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Wells

well

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

welllg, wellsm

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

Javascript

Modal

modal

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

modallg, modalsm

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Scrollspy

scrollspy

<body data-spy="scroll" data-target=".navbar-example">
  ...
  <div class="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Tab

tabpanel

<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Tooltip

tooltip, atooltip

<button type="button" class="btn btn-default" data-toggle="tooltip" title="Tooltip on left">Tooltip on left</button>
<a href="#" data-toggle="tooltip" title="Tooltip on left">Tooltip on left</a>

tooltiptop, atooltiptop

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a>

tooltipleft, atooltipleft

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a>

tooltipbottom, atooltipbottom

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a>

tooltipright, atooltipright

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a>

Popover

popover, apopover

<button type="button" class="btn btn-default" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<a class="btn btn-default" role="button" data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

popovertop, apopovertop

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>
<a class="btn btn-default" role="button" data-toggle="popover" data-placement="top" title="Popover on top" data-content="And here's some amazing content. It's very engaging. Right?">Popover on top</a>

popoverleft, apopoverleft

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>
<a class="btn btn-default" role="button" data-toggle="popover" data-placement="left" title="Popover on left" data-content="And here's some amazing content. It's very engaging. Right?">Popover on left</a>

popoverbottom, apopoverbottom

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>
<a class="btn btn-default" role="button" data-toggle="popover" data-placement="bottom" title="Popover on bottom" data-content="And here's some amazing content. It's very engaging. Right?">Popover on bottom</a>

popoverright, apopoverright

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>
<a class="btn btn-default" role="button" data-toggle="popover" data-placement="right" title="Popover on right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover on right</a>

apopoverdismissible

<a tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Button

btnstatetext

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-default" autocomplete="off">
  Loading state
</button>

btnsingletoggle

<button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

btngroupcheckbox

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

btngroupradio

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Collapse

btncollapse, abtncollapse

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

accordian

<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" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </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" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </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" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Carousel

carousel

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Affix

affix

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>
Add a custom footer
Add a custom sidebar
Clone this wiki locally