Bootstrap V.3.

Gliphicon

<button type="button" class="btn btn-default" aria-label="Left Align"> <span

class="glyphicon glyphicon-align-left" aria-hidden="true"></span> </button>
<button type="button" class="btn btn-default btn-lg"> <span class="glyphicon
glyphicon-star" aria-hidden="true"></span> Star </button>

Dropdowns

<div class="dropdown"> <button class="btn btn-default dropdown-toggle"

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

DropUp

<div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button"

id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false"> Dropup <span class="caret"></span> </button> <ul
class="dropdown-menu" aria-labelledby="dropdownMenu2"> <li><a
href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a
href="#">Something else here</a></li> <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li> </ul> </div>

Alignment

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

Headers

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3"> ... <li

class="dropdown-header">Dropdown header</li> ... </ul>
Single Button Dropdowns

<!-- Single button --> <div class="btn-group"> <button type="button" class="btn

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

Split Button Dropdowns

<!-- Split button --> <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-haspopup="true" aria-expanded="false"> <span
class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul
class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another
action</a></li> <li><a href="#">Something else here</a></li> <li role="separator"
class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>

Divider

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider"> ... <li

role="separator" class="divider"></li> ... </ul>
Input Group

Basic Example

<div class="input-group"> <span class="input-group-addon" id="basic-

addon1">@</span> <input type="text" class="form-control" placeholder="Username"
aria-describedby="basic-addon1"> </div> <div class="input-group"> <input
type="text" class="form-control" placeholder="Recipient's username" aria-
describedby="basic-addon2"> <span class="input-group-addon" id="basic-
addon2">@example.com</span> </div> <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> <label
for="basic-url">Your vanity URL</label> <div class="input-group"> <span
class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-
addon3"> </div>

Sizing

<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"> <span class="input-group-addon" id="sizing-addon2">@</span> <input
type="text" class="form-control" placeholder="Username" aria-describedby="sizing-
addon2"> </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>
CheckBox & Radio

<div class="row"> <div class="col-lg-6"> <div class="input-group"> <span

class="input-group-addon"> <input type="checkbox" aria-label="..."> </span> <input
type="text" class="form-control" aria-label="..."> </div><!-- /input-group -->
</div><!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="input-group"> <span
class="input-group-addon"> <input type="radio" aria-label="..."> </span> <input
type="text" class="form-control" aria-label="..."> </div><!-- /input-group -->
</div><!-- /.col-lg-6 --> </div><!-- /.row -->

Button Addons

<div class="row"> <div class="col-lg-6"> <div class="input-group"> <span

class="input-group-btn"> <button class="btn btn-default"
type="button">Go!</button> </span> <input type="text" class="form-control"
placeholder="Search for..."> </div><!-- /input-group --> </div><!-- /.col-lg-6 -->
<div class="col-lg-6"> <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><!-- /input-group
--> </div><!-- /.col-lg-6 --> </div><!-- /.row -->

Tabs

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

Pills
Default 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" aria-expanded="false"> <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-haspopup="true" aria-expanded="false">Dropdown <span
class="caret"></span></a> <ul class="dropdown-menu"> <li><a
href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a
href="#">Something else here</a></li> <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form
class="navbar-form navbar-left"> <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-haspopup="true" aria-
expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-
menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li> <li role="separator"
class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul>
</div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>

Brand Image (Logo)

<nav class="navbar navbar-default"> <div class="container-fluid"> <div

class="navbar-header"> <a class="navbar-brand" href="#"> <img alt="Brand"
src="..."> </a> </div> </div> </nav>

Forms

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

Buttons

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

Fixed To Top

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

</div> </nav>

Badges

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

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

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>

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

Thumbnail
<div class="row"> <div class="col-sm-6 col-md-4"> <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> </div> </div>

Video

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