Clone
---
title: Home page
published: true
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bootply.com - Bootstrap 3 Template</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
{{ 'bootstrap.css' | stylesheet_tag }}
{{ 'bootstrap-glyphicons.css' | stylesheet_tag }}
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="/samples/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/samples/apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/samples/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/samples/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/samples/apple-touch-icon-precomposed.png">
<!-- CSS code from Bootply.com editor -->
<style type="text/css">
@media screen and (min-width: 992px) {
.the-icons li {
width: 12.5%;
}
}
.the-buttons > li {
float: left;
height: 80px;
padding: 10px;
border: 1px solid #ddd;
font-size: 12px;
line-height: 1.25;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 -1px -1px 0;
}
.the-icons .glyphicon {
display: block;
margin: 5px auto;
vertical-align: middle;
margin-right: 3px;
font-size: 24px;
}
.the-icons li {
float: left;
width: 100px;
height: 110px;
padding: 10px;
border: 1px solid #ddd;
font-size: 12px;
line-height: 1.25;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 -1px -1px 0;
}
.the-icons, .the-buttons {
list-style:none;
}
</style>
</head>
<body>
<div class="container">
<h1>Bootstrap 3 Template</h1>
<p class="lead">A Full Featured Example</p>
<!-- Typography
================================================== -->
<section id="typography">
<div class="page-header">
</div>
<!-- Headings & Paragraph Copy -->
<div class="row">
<div class="col-lg-6">
<div class="well">
<h1>h1. Bootstrap 3</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>
</div>
</div>
<div class="col-lg-6">
<h3>Bootstrap Framework</h3>
<p>In simple terms, a responsive web design figures out what resolution of device it's being served on. Flexible grids then size correctly to fit the screen.</p>
<p>The new Bootstrap 3 promises to be a smaller build. The separate Bootstrap base and responsive.css files have now been merged into one. There is no more fixed grid, only fluid.</p>
<hr>
<blockquote class="pull-right">
<p>Have you ever had a project where you thought it would be so much better to just throw everything out and start over? I believe that’s what’s happening with BS3.</p>
<small><cite title="Source Title">Quasipickle</cite></small>
</blockquote>
</div>
</div>
</section>
<!-- Bootstrap 3 Navbar
================================================== -->
<section id="navbar">
<div class="page-header">
<h1>Bootstrap 3 Navbar</h1>
</div>
<div class="container">
<nav class="navbar" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="#">Title</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="#">Title</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</section>
<!--Bootstrap 3 Scaffolding
================================================== -->
<section>
<div class="page-header">
<h1>Grid</h1>
<p class="lead">Bootstrap 3 scaffolding has changed for improved display on mobile devices</p>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12"><div class="well"><p>col-lg-12</p></div></div>
</div>
<div class="row">
<div class="col-lg-4"><div class="well"><p>col-lg-4</p></div></div>
<div class="col-lg-4"><div class="well"><p>col-lg-4</p></div></div>
<div class="col-lg-4"><div class="well"><p>col-lg-4</p></div></div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-6"><div class="well"><p>col-lg-6</p></div></div>
<div class="col-lg-6 col-sm-6"><div class="well"><p>col-lg-6</p></div></div>
</div>
<div class="row">
<div class="col-lg-9 col-sm-6"><div class="well">col-lg-9 / col-sm-6</div></div>
<div class="col-lg-3 col-sm-6"><div class="well">col-lg-3 / col-sm-6</div></div>
</div>
</div>
</section>
<!-- Bootstrap 3 Buttons
================================================== -->
<section id="buttons">
<div class="page-header">
<h1>Bootstrap 3 Buttons</h1>
<p class="lead">With no gradients and borders, Bootstrap 3.0 buttons now have a flatter look</p>
</div>
<h2>Button Sizes (4)</h2>
<ul class="the-buttons clearfix">
<li><a class="btn btn-xs btn-primary" href="#">btn-xs</a></li>
<li><a class="btn btn-sm btn-primary" href="#">btn-sm</a></li>
<li><a class="btn btn-primary" href="#">btn</a></li>
<li><a class="btn btn-lg btn-primary" href="#">btn-lg</a></li>
</ul>
<h2>Button Classes</h2>
<ul class="the-buttons clearfix">
<li><a class="btn btn-default" href="#">Default</a></li>
<li><a class="btn btn-primary" href="#">Primary</a></li>
<li><a class="btn btn-success" href="#">Success</a></li>
<li><a class="btn btn-info" href="#">Info</a></li>
<li><a class="btn btn-warning" href="#">Warning</a></li>
<li><a class="btn btn-danger" href="#">Danger</a></li>
<li><a class="btn btn-primary disabled" href="#">Disabled</a></li>
<li><a class="btn btn-link" href="#">Link</a></li>
<li>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown <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 class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</li>
<li><a class="btn btn-info" href="#"><i class="glyphicon glyphicon-map-marker"></i> Icon</a></li>
</ul>
</section>
<!-- Icons
================================================== -->
<section id="icons">
<div class="page-header">
<h2>Bootstrap 3 Icons</h2>
<p class="lead">The 2.x icons are now replaced by glyphicons in BS3.</p>
</div>
<div class="row">
<ul class="the-icons clearfix">
<li><i class="glyphicon glyphicon-glass"></i> glyphicon-glass</li>
<li><i class="glyphicon glyphicon-music"></i> glyphicon-music</li>
<li><i class="glyphicon glyphicon-search"></i> glyphicon-search</li>
<li><i class="glyphicon glyphicon-envelope"></i> glyphicon-envelope</li>
<li><i class="glyphicon glyphicon-heart"></i> glyphicon-heart</li>
<li><i class="glyphicon glyphicon-star"></i> glyphicon-star</li>
<li><i class="glyphicon glyphicon-star-empty"></i> glyphicon-star-empty</li>
<li><i class="glyphicon glyphicon-user"></i> glyphicon-user</li>
<li><i class="glyphicon glyphicon-film"></i> glyphicon-film</li>
<li><i class="glyphicon glyphicon-th-large"></i> glyphicon-th-large</li>
<li><i class="glyphicon glyphicon-th"></i> glyphicon-th</li>
<li><i class="glyphicon glyphicon-th-list"></i> glyphicon-th-list</li>
<li><i class="glyphicon glyphicon-ok"></i> glyphicon-ok</li>
<li><i class="glyphicon glyphicon-remove"></i> glyphicon-remove</li>
<li><i class="glyphicon glyphicon-zoom-in"></i> glyphicon-zoom-in</li>
<li><i class="glyphicon glyphicon-zoom-out"></i> glyphicon-zoom-out</li>
<li><i class="glyphicon glyphicon-off"></i> glyphicon-off</li>
<li><i class="glyphicon glyphicon-signal"></i> glyphicon-signal</li>
<li><i class="glyphicon glyphicon-cog"></i> glyphicon-cog</li>
<li><i class="glyphicon glyphicon-trash"></i> glyphicon-trash</li>
<li><i class="glyphicon glyphicon-home"></i> glyphicon-home</li>
<li><i class="glyphicon glyphicon-file"></i> glyphicon-file</li>
<li><i class="glyphicon glyphicon-time"></i> glyphicon-time</li>
<li><i class="glyphicon glyphicon-road"></i> glyphicon-road</li>
<li><i class="glyphicon glyphicon-download-alt"></i> glyphicon-download-alt</li>
<li><i class="glyphicon glyphicon-download"></i> glyphicon-download</li>
<li><i class="glyphicon glyphicon-upload"></i> glyphicon-upload</li>
<li><i class="glyphicon glyphicon-inbox"></i> glyphicon-inbox</li>
<li><i class="glyphicon glyphicon-play-circle"></i> glyphicon-play-circle</li>
<li><i class="glyphicon glyphicon-repeat"></i> glyphicon-repeat</li>
<li><i class="glyphicon glyphicon-refresh"></i> glyphicon-refresh</li>
<li><i class="glyphicon glyphicon-list-alt"></i> glyphicon-list-alt</li>
<li><i class="glyphicon glyphicon-lock"></i> glyphicon-lock</li>
<li><i class="glyphicon glyphicon-flag"></i> glyphicon-flag</li>
<li><i class="glyphicon glyphicon-headphones"></i> glyphicon-headphones</li>
<li><i class="glyphicon glyphicon-volume-off"></i> glyphicon-volume-off</li>
<li><i class="glyphicon glyphicon-volume-down"></i> glyphicon-volume-down</li>
<li><i class="glyphicon glyphicon-volume-up"></i> glyphicon-volume-up</li>
<li><i class="glyphicon glyphicon-qrcode"></i> glyphicon-qrcode</li>
<li><i class="glyphicon glyphicon-barcode"></i> glyphicon-barcode</li>
<li><i class="glyphicon glyphicon-tag"></i> glyphicon-tag</li>
<li><i class="glyphicon glyphicon-tags"></i> glyphicon-tags</li>
<li><i class="glyphicon glyphicon-book"></i> glyphicon-book</li>
<li><i class="glyphicon glyphicon-bookmark"></i> glyphicon-bookmark</li>
<li><i class="glyphicon glyphicon-print"></i> glyphicon-print</li>
<li><i class="glyphicon glyphicon-camera"></i> glyphicon-camera</li>
<li><i class="glyphicon glyphicon-font"></i> glyphicon-font</li>
<li><i class="glyphicon glyphicon-bold"></i> glyphicon-bold</li>
<li><i class="glyphicon glyphicon-italic"></i> glyphicon-italic</li>
<li><i class="glyphicon glyphicon-text-height"></i> glyphicon-text-height</li>
<li><i class="glyphicon glyphicon-text-width"></i> glyphicon-text-width</li>
<li><i class="glyphicon glyphicon-align-left"></i> glyphicon-align-left</li>
<li><i class="glyphicon glyphicon-align-center"></i> glyphicon-align-center</li>
<li><i class="glyphicon glyphicon-align-right"></i> glyphicon-align-right</li>
<li><i class="glyphicon glyphicon-align-justify"></i> glyphicon-align-justify</li>
<li><i class="glyphicon glyphicon-list"></i> glyphicon-list</li>
<li><i class="glyphicon glyphicon-indent-left"></i> glyphicon-indent-left</li>
<li><i class="glyphicon glyphicon-indent-right"></i> glyphicon-indent-right</li>
<li><i class="glyphicon glyphicon-facetime-video"></i> glyphicon-facetime-video</li>
<li><i class="glyphicon glyphicon-picture"></i> glyphicon-picture</li>
<li><i class="glyphicon glyphicon-pencil"></i> glyphicon-pencil</li>
<li><i class="glyphicon glyphicon-map-marker"></i> glyphicon-map-marker</li>
<li><i class="glyphicon glyphicon-adjust"></i> glyphicon-adjust</li>
<li><i class="glyphicon glyphicon-tint"></i> glyphicon-tint</li>
<li><i class="glyphicon glyphicon-edit"></i> glyphicon-edit</li>
<li><i class="glyphicon glyphicon-share"></i> glyphicon-share</li>
<li><i class="glyphicon glyphicon-check"></i> glyphicon-check</li>
<li><i class="glyphicon glyphicon-move"></i> glyphicon-move</li>
<li><i class="glyphicon glyphicon-step-backward"></i> glyphicon-step-backward</li>
<li><i class="glyphicon glyphicon-fast-backward"></i> glyphicon-fast-backward</li>
<li><i class="glyphicon glyphicon-backward"></i> glyphicon-backward</li>
<li><i class="glyphicon glyphicon-play"></i> glyphicon-play</li>
<li><i class="glyphicon glyphicon-pause"></i> glyphicon-pause</li>
<li><i class="glyphicon glyphicon-stop"></i> glyphicon-stop</li>
<li><i class="glyphicon glyphicon-forward"></i> glyphicon-forward</li>
<li><i class="glyphicon glyphicon-fast-forward"></i> glyphicon-fast-forward</li>
<li><i class="glyphicon glyphicon-step-forward"></i> glyphicon-step-forward</li>
<li><i class="glyphicon glyphicon-eject"></i> glyphicon-eject</li>
<li><i class="glyphicon glyphicon-chevron-left"></i> glyphicon-chevron-left</li>
<li><i class="glyphicon glyphicon-chevron-right"></i> glyphicon-chevron-right</li>
<li><i class="glyphicon glyphicon-plus-sign"></i> glyphicon-plus-sign</li>
<li><i class="glyphicon glyphicon-minus-sign"></i> glyphicon-minus-sign</li>
<li><i class="glyphicon glyphicon-remove-sign"></i> glyphicon-remove-sign</li>
<li><i class="glyphicon glyphicon-ok-sign"></i> glyphicon-ok-sign</li>
<li><i class="glyphicon glyphicon-question-sign"></i> glyphicon-question-sign</li>
<li><i class="glyphicon glyphicon-info-sign"></i> glyphicon-info-sign</li>
<li><i class="glyphicon glyphicon-screenshot"></i> glyphicon-screenshot</li>
<li><i class="glyphicon glyphicon-remove-circle"></i> glyphicon-remove-circle</li>
<li><i class="glyphicon glyphicon-ok-circle"></i> glyphicon-ok-circle</li>
<li><i class="glyphicon glyphicon-ban-circle"></i> glyphicon-ban-circle</li>
<li><i class="glyphicon glyphicon-arrow-left"></i> glyphicon-arrow-left</li>
<li><i class="glyphicon glyphicon-arrow-right"></i> glyphicon-arrow-right</li>
<li><i class="glyphicon glyphicon-arrow-up"></i> glyphicon-arrow-up</li>
<li><i class="glyphicon glyphicon-arrow-down"></i> glyphicon-arrow-down</li>
<li><i class="glyphicon glyphicon-share-alt"></i> glyphicon-share-alt</li>
<li><i class="glyphicon glyphicon-resize-full"></i> glyphicon-resize-full</li>
<li><i class="glyphicon glyphicon-resize-small"></i> glyphicon-resize-small</li>
<li><i class="glyphicon glyphicon-plus"></i> glyphicon-plus</li>
<li><i class="glyphicon glyphicon-minus"></i> glyphicon-minus</li>
<li><i class="glyphicon glyphicon-asterisk"></i> glyphicon-asterisk</li>
<li><i class="glyphicon glyphicon-exclamation-sign"></i> glyphicon-exclamation-sign</li>
<li><i class="glyphicon glyphicon-gift"></i> glyphicon-gift</li>
<li><i class="glyphicon glyphicon-leaf"></i> glyphicon-leaf</li>
<li><i class="glyphicon glyphicon-fire"></i> glyphicon-fire</li>
<li><i class="glyphicon glyphicon-eye-open"></i> glyphicon-eye-open</li>
<li><i class="glyphicon glyphicon-eye-close"></i> glyphicon-eye-close</li>
<li><i class="glyphicon glyphicon-warning-sign"></i> glyphicon-warning-sign</li>
<li><i class="glyphicon glyphicon-plane"></i> glyphicon-plane</li>
<li><i class="glyphicon glyphicon-calendar"></i> glyphicon-calendar</li>
<li><i class="glyphicon glyphicon-random"></i> glyphicon-random</li>
<li><i class="glyphicon glyphicon-comment"></i> glyphicon-comment</li>
<li><i class="glyphicon glyphicon-magnet"></i> glyphicon-magnet</li>
<li><i class="glyphicon glyphicon-chevron-up"></i> glyphicon-chevron-up</li>
<li><i class="glyphicon glyphicon-chevron-down"></i> glyphicon-chevron-down</li>
<li><i class="glyphicon glyphicon-retweet"></i> glyphicon-retweet</li>
<li><i class="glyphicon glyphicon-shopping-cart"></i> glyphicon-shopping-cart</li>
<li><i class="glyphicon glyphicon-folder-close"></i> glyphicon-folder-close</li>
<li><i class="glyphicon glyphicon-folder-open"></i> glyphicon-folder-open</li>
<li><i class="glyphicon glyphicon-resize-vertical"></i> glyphicon-resize-vertical</li>
<li><i class="glyphicon glyphicon-resize-horizontal"></i> glyphicon-resize-horizontal</li>
<li><i class="glyphicon glyphicon-hdd"></i> glyphicon-hdd</li>
<li><i class="glyphicon glyphicon-bullhorn"></i> glyphicon-bullhorn</li>
<li><i class="glyphicon glyphicon-bell"></i> glyphicon-bell</li>
<li><i class="glyphicon glyphicon-certificate"></i> glyphicon-certificate</li>
<li><i class="glyphicon glyphicon-thumbs-up"></i> glyphicon-thumbs-up</li>
<li><i class="glyphicon glyphicon-thumbs-down"></i> glyphicon-thumbs-down</li>
<li><i class="glyphicon glyphicon-hand-right"></i> glyphicon-hand-right</li>
<li><i class="glyphicon glyphicon-hand-left"></i> glyphicon-hand-left</li>
<li><i class="glyphicon glyphicon-hand-up"></i> glyphicon-hand-up</li>
<li><i class="glyphicon glyphicon-hand-down"></i> glyphicon-hand-down</li>
<li><i class="glyphicon glyphicon-circle-arrow-right"></i> glyphicon-circle-arrow-right</li>
<li><i class="glyphicon glyphicon-circle-arrow-left"></i> glyphicon-circle-arrow-left</li>
<li><i class="glyphicon glyphicon-circle-arrow-up"></i> glyphicon-circle-arrow-up</li>
<li><i class="glyphicon glyphicon-circle-arrow-down"></i> glyphicon-circle-arrow-down</li>
<li><i class="glyphicon glyphicon-globe"></i> glyphicon-globe</li>
<li><i class="glyphicon glyphicon-wrench"></i> glyphicon-wrench</li>
<li><i class="glyphicon glyphicon-tasks"></i> glyphicon-tasks</li>
<li><i class="glyphicon glyphicon-filter"></i> glyphicon-filter</li>
<li><i class="glyphicon glyphicon-briefcase"></i> glyphicon-briefcase</li>
<li><i class="glyphicon glyphicon-fullscreen"></i> glyphicon-fullscreen</li>
<li><i class="glyphicon glyphicon-dashboard"></i> glyphicon-dashboard</li>
<li><i class="glyphicon glyphicon-paperclip"></i> glyphicon-paperclip</li>
<li><i class="glyphicon glyphicon-heart-empty"></i> glyphicon-heart-empty</li>
<li><i class="glyphicon glyphicon-link"></i> glyphicon-link</li>
<li><i class="glyphicon glyphicon-phone"></i> glyphicon-phone</li>
<li><i class="glyphicon glyphicon-pushpin"></i> glyphicon-pushpin</li>
<li><i class="glyphicon glyphicon-euro"></i> glyphicon-euro</li>
<li><i class="glyphicon glyphicon-usd"></i> glyphicon-usd</li>
<li><i class="glyphicon glyphicon-gbp"></i> glyphicon-gbp</li>
<li><i class="glyphicon glyphicon-sort"></i> glyphicon-sort</li>
<li><i class="glyphicon glyphicon-sort-by-alphabet"></i> glyphicon-sort-by-alphabet</li>
<li><i class="glyphicon glyphicon-sort-by-alphabet-alt"></i> glyphicon-sort-by-alphabet-alt</li>
<li><i class="glyphicon glyphicon-sort-by-order"></i> glyphicon-sort-by-order</li>
<li><i class="glyphicon glyphicon-sort-by-order-alt"></i> glyphicon-sort-by-order-alt</li>
<li><i class="glyphicon glyphicon-sort-by-attributes"></i> glyphicon-sort-by-attributes</li>
<li><i class="glyphicon glyphicon-sort-by-attributes-alt"></i> glyphicon-sort-by-attributes-alt</li>
<li><i class="glyphicon glyphicon-unchecked"></i> glyphicon-unchecked</li>
<li><i class="glyphicon glyphicon-expand"></i> glyphicon-expand</li>
<li><i class="glyphicon glyphicon-collapse"></i> glyphicon-collapse</li>
<li><i class="glyphicon glyphicon-collapse-top"></i> glyphicon-collapse-top</li>
</ul>
</div>
</section>
<!-- Forms
================================================== -->
<section id="forms">
<div class="page-header">
<h2>Forms</h2>
</div>
<div class="row">
<div class="col-lg-8">
<h3>Form Inline</h3>
<form class="form-inline well">
<div class="col-md-3">
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="col-md-3">
<input type="password" class="form-control" 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>
<h3>Form Horizontal</h3>
<form class="form-horizontal well">
<fieldset>
<legend>Bootstrap 3 Inputs</legend>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="form-control input-xlarge" id="input01">
<p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="optionsCheckbox">Checkbox</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="optionsCheckbox" value="option1">
Option one is this and that—be sure to include why it's great
</label>
</div>
</div>
<div class="control-group">
<label class="control-label" for="select01">Select list</label>
<div class="controls">
<select id="select01" class="form-control">
<option>something</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="multiSelect">Multicon-select</label>
<div class="controls">
<select multiple="multiple" id="multiSelect" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="fileInput">File input</label>
<div class="controls">
<input class="form-control input-file" id="fileInput" type="file">
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">Textarea</label>
<div class="controls">
<textarea class="form-control input-xlarge" id="textarea" rows="3"></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="optionsCheckbox2" value="option1" disabled="">
This is a disabled checkbox
</label>
</div>
</div>
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning" class="form-control">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>
<hr>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="reset" class="btn">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div>
</section>
<!-- Tables
================================================== -->
<section id="tables">
<div class="page-header">
<h1>Tables</h1>
</div>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</section>
<!-- Miscellaneous
================================================== -->
<section id="miscellaneous">
<div class="page-header">
<h1>Miscellaneous</h1>
</div>
<div class="row">
<div class="col-lg-4">
<h3 id="breadcrumbs">Breadcrumbs</h3>
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider"></span></li>
<li><a href="#">Library</a> <span class="divider"></span></li>
<li class="active">Data</li>
</ul>
</div>
<div class="col-lg-4">
<h3 id="pagination">Pagination</h3>
<ul class="pagination">
<li><a href="#">«</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="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
<div class="col-lg-4">
<h3 id="pager">Pagers</h3>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
<ul class="pager">
<li class="previous disabled"><a href="#">? Older</a></li>
<li class="next"><a href="#">Newer ?</a></li>
</ul>
</div>
</div>
<!-- Navs
================================================== -->
<div class="row">
<div class="col-lg-4">
<h3 id="tabs">Tabs</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
<li><a href="#B" data-toggle="tab">Section 2</a></li>
<li><a href="#C" data-toggle="tab">Section 3</a></li>
</ul>
<div class="tabbable">
<div class="tab-content">
<div class="tab-pane active" id="A">
<p>I'm in Section A.</p>
</div>
<div class="tab-pane" id="B">
<p>Howdy, I'm in Section B.</p>
</div>
<div class="tab-pane" id="C">
<p>What up girl, this is Section C.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<h3 id="pills">Pills</h3>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></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 class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="disabled"><a href="#">Disabled link</a></li>
</ul>
</div>
<div class="col-lg-4">
<h3 id="list">Nav Lists</h3>
<div class="well" style="padding: 8px 0;">
<ul class="nav nav-list">
<li class="nav-header">List header</li>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Applications</a></li>
<li class="divider"></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</div>
</div>
<!-- Labels
================================================== -->
<div class="row">
<div class="col-lg-4">
<h3 id="labels">Labels</h3>
<span class="label">Default</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<span class="label label-info">Info</span>
</div>
<div class="col-lg-4">
<h3 id="badges">Badges</h3>
<span class="badge">Default</span>
</div>
<div class="col-lg-4">
<h3 id="badges">Progress bars</h3>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div>
</div>
</div>
<br>
<!-- Panel & ListGroups
================================================== -->
<hr>
<h2 id="panels">Bootstrap 3 Panels</h2>
<div class="row">
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">Hello. This is the Panel content.</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-primary">
<div class="panel-heading">Panel primary</div>
<div class="panel-body">Panels are new in BS3.</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-success">
<div class="panel-heading">Panel success</div>
<div class="panel-body">You can use contextual classes.</div>
</div>
</div>
</div>
<!-- ListGroups
================================================== -->
<hr>
<h2 id="panels">Bootstrap 3 List Groups</h2>
<div class="row">
<div class="col-lg-4">
<ul class="list-group">
<li class="list-group-item">List item 1</li>
<li class="list-group-item">List item 2</li>
<li class="list-group-item">Mobile-first</li>
<li class="list-group-item">Responsive</li>
<li class="list-group-item">Lightweight</li>
</ul>
</div>
<div class="col-lg-4">
<ul class="list-group">
<li class="list-group-item"><span class="glyphicon glyphicon-chevron-right"></span> List item 1</li>
<li class="list-group-item"><span class="glyphicon glyphicon-chevron-right"></span> List item 2</li>
<li class="list-group-item"><span class="glyphicon glyphicon-chevron-right"></span> Mobile-first</li>
<li class="list-group-item"><span class="glyphicon glyphicon-chevron-right"></span> Responsive</li>
<li class="list-group-item"><span class="glyphicon glyphicon-chevron-right"></span> Lightweight</li>
</ul>
</div>
<div class="col-lg-4">
<div class="list-group">
<a href="#" class="list-group-item active">Linked list group<span class="glyphicon glyphicon-chevron-right"></span></a>
<a href="#" class="list-group-item">Dapibus ac facilisis in<span class="glyphicon glyphicon-chevron-right"></span></a>
<a href="#" class="list-group-item">Morbi leo risus<span class="glyphicon glyphicon-chevron-right"></span></a>
<a href="#" class="list-group-item">Porta ac consectetur ac<span class="glyphicon glyphicon-chevron-right"></span></a>
<a href="#" class="list-group-item">Vestibulum at eros<span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
<!-- Well Sizes
================================================== -->
<hr>
<h2>Well Sizes</h2>
<div class="row">
<div class="col-lg-12">
<div class="well well-sm">
.well-sm
</div>
<div class="well">
.well
</div>
<div class="well well-lg">
.well-lg
</div>
</div>
</div>
<hr>
</section>
<hr>
</div>
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
{{ 'bootstrap.min.js' | javascript_tag }}
<script type='text/javascript'>
$(document).ready(function() {
});
</script>
</body>
</html>