<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <a href="#" class="navbar-brand">Bootstrap 3</a> <ul class="nav navbar-nav"> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">CSS <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#headings">Headings</a></li> <li><a href="#content-formatting">Content</a></li> <li><a href="#tables">Tables</a></li> <li><a href="#forms">Forms</a></li> <li><a href="#images">Images</a></li> </ul> </li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Components <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#dropdowns">Dropdowns</a></li> <li><a href="#input-groups">Input Groups</a></li> <li><a href="#navs">Navs</a></li> <li><a href="#navbar">Navbar</a></li> <li><a href="#pagination">Pagination</a></li> <li><a href="#alerts">Alerts</a></li> <li><a href="#labels">Labels</a></li> <li><a href="#progress">Progress</a></li> <li><a href="#media-object">Media Object</a></li> <li><a href="#list-groups">List Groups</a></li> <li><a href="#panels">Panels</a></li> <li><a href="#wells">Wells</a></li> </ul> </li> </ul> <p class="navbar-text pull-right"><a href="http://www.jquery2dotnet.com" target="_blank">jQuery2DotNet</a></p> </div> </div> <div class="container"> <div class="jumbotron"> <h1> Bootstrap 3 elements page example template</h1> <p> A quick preview of everything Bootstrap has to offer.</p> <p> <a class="btn btn-danger btn-large" href="http://getbootstrap.com/">GET Bootstrap NOW!</a></p> </div> <div class="row"> <div class="col-lg-6"> <div class="panel panel-default" id="headings"> <div class="panel-heading"> Headings </div> <div class="panel-body"> <h1 class="page-header"> Page Header <small>With Small Text</small></h1> <h1> This is an h1 heading</h1> <h2> This is an h2 heading</h2> <h3> This is an h3 heading</h3> <h4> This is an h4 heading</h4> <h5> This is an h5 heading</h5> <h6> This is an h6 heading</h6> </div> </div> <div class="panel panel-default" id="tables"> <div class="panel-heading"> Tables </div> <div class="panel-body"> <table class="table table-hover"> <thead> <tr> <th> # </th> <th> First Name </th> <th> Tables </th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> Michael </td> <td> Are formatted like this </td> </tr> <tr> <td> 2 </td> <td> Lucille </td> <td> Do you like them? </td> </tr> <tr class="success"> <td> 3 </td> <td> Success </td> <td> </td> </tr> <tr class="danger"> <td> 4 </td> <td> Danger </td> <td> </td> </tr> <tr class="warning"> <td> 5 </td> <td> Warning </td> <td> </td> </tr> <tr class="active"> <td> 6 </td> <td> Active </td> <td> </td> </tr> </tbody> </table> <table class="table table-striped table-bordered table-condensed"> <thead> <tr> <th> # </th> <th> First Name </th> <th> Tables </th> </tr> </thead> <tbody> <tr> <td> 1 </td> <td> Michael </td> <td> This one is bordered and condensed </td> </tr> <tr> <td> 2 </td> <td> Lucille </td> <td> Do you still like it? </td> </tr> </tbody> </table> </div> </div> </div> <div class="col-lg-6"> <div class="panel panel-default" id="content-formatting"> <div class="panel-heading"> Content Formatting </div> <div class="panel-body"> <p class="lead"> This is a lead paragraph.</p> <p> This is an <b>ordinary paragraph</b> that is <i>long enough</i> to wrap to <u>multiple lines</u> so that you can see how the line spacing looks.</p> <p class="text-muted"> Muted color paragraph.</p> <p class="text-warning"> Warning color paragraph.</p> <p class="text-danger"> Danger color paragraph.</p> <p class="text-info"> Info color paragraph.</p> <p class="text-success"> Success color paragraph.</p> <p> <small>This is text in a <code>small</code> wrapper. <abbr title="No Big Deal"> NBD</abbr>, right?</small></p> <hr> <address class="col-6"> <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 class="col-6"> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address> <hr> <blockquote> Here's what a blockquote looks like in Bootstrap. <small>Use <code>small</code> to identify the source.</small> </blockquote> <hr> <div class="row"> <div class="col-6"> <ul> <li>Normal Unordered List</li> <li>Can Also Work <ul> <li>With Nested Children</li> </ul> </li> <li>Adds Bullets to Page</li> </ul> </div> <div class="col-6"> <ol> <li>Normal Ordered List</li> <li>Can Also Work <ol> <li>With Nested Children</li> </ol> </li> <li>Adds Bullets to Page</li> </ol> </div> </div> <hr /> <pre>function preFormatting() { // looks like this; var something = somethingElse; return true;}</pre> </div> </div> </div> </div> <div class="panel panel-default" id="forms"> <div class="panel-heading"> Forms </div> <div class="panel-body"> <form> <fieldset> <legend>Legend</legend> <div class="form-group"> <label for="exampleInputEmail"> Email address</label> <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword"> Password</label> <input type="password" class="form-control" id="exampleInputPassword" 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> </fieldset> </form> <hr> <form class="form-inline"> <input type="text" class="form-control" placeholder="Email" style="width: 200px;"> <input type="password" class="form-control" placeholder="Password" style="width: 200px;"> <div class="checkbox"> <label> <input type="checkbox">Remember me</label> </div> <button type="submit" class="btn btn-default"> Sign in</button> </form> <hr> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail" class="col-lg-2 control-label"> Email</label> <div class="col-lg-10"> <input type="text" class="form-control" id="inputEmail" placeholder="Email"> </div> </div> <div class="form-group has-warning"> <label for="inputEmail" class="col-lg-2 control-label"> Email</label> <div class="col-lg-10"> <input type="text" class="form-control" id="inputEmail" placeholder="Email"> </div> </div> <div class="form-group has-error"> <label for="inputEmail" class="col-lg-2 control-label"> Email</label> <div class="col-lg-10"> <input type="text" class="form-control" id="inputEmail" placeholder="Email"> </div> </div> <div class="form-group has-success"> <label for="inputEmail" class="col-lg-2 control-label"> Email</label> <div class="col-lg-10"> <input type="text" class="form-control" id="inputEmail" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-lg-2 control-label"> Password</label> <div class="col-lg-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> <div class="checkbox"> <label> <input type="checkbox">Remember me</label> </div> <button type="submit" class="btn btn-default"> Sign in</button> </div> </div> </form> </div> </div> <div class="row"> <div class="col-lg-6"> <div class="panel panel-default" id="buttons"> <div class="panel-heading"> Buttons </div> <div class="panel-body"> <p> <!-- Standard gray button with gradient --> <button type="button" class="btn btn-default"> Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary"> Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success"> Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info"> Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning"> Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger"> Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link"> Link</button></p> <p> <button type="button" class="btn btn-primary btn-large"> Large button</button> <button type="button" class="btn btn-primary disabled"> Disabled</button> <button type="button" class="btn btn-primary"> Default button</button> <button type="button" class="btn btn-primary btn-small"> Small button</button> <button type="button" class="btn btn-primary btn-mini"> Mini button</button></p> </div> </div> </div> <div class="col-lg-6"> <div class="panel panel-default" id="images"> <div class="panel-heading"> Images </div> <div class="panel-body"> <p> <img src="http://placehold.it/120x100" class="img-rounded"> <img src="http://placehold.it/120x100" class="img-circle"> <img src="http://placehold.it/120x100" class="img-thumbnail"></p> </div> </div> </div> </div> <div class="row"> <div class="col-lg-3"> <div class="panel panel-default clearfix" id="dropdowns"> <div class="panel-heading"> Dropdowns </div> <div class="panel-body"> <p> </p> <div class="dropdown"> <!-- Link or button to toggle dropdown --> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static;"> <li class="dropdown-header">Dropdown header</li> <li class="disabled"><a tabindex="-1" href="#">Action</a> </li> <li><a tabindex="-1" href="#">Another action</a> </li> <li><a tabindex="-1" href="#">Something else here</a> </li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a> </li> </ul> </div> <p> </p> </div> </div> </div> <div class="col-lg-9"> <div class="panel panel-default" id="input-groups"> <div class="panel-heading"> Input Groups </div> <div class="panel-body"> <p> </p> <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="Username"> </div> <p> </p> <p> </p> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> <p> </p> <p> </p> <div class="input-group"> <span class="input-group-addon">$</span><input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> <p> </p> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6"> <div class="panel panel-default" id="navs"> <div class="panel-heading"> Navs </div> <div class="panel-body"> <p> </p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a> </li> <li><a href="#">About</a> </li> </ul> <p> </p> <p> </p> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a> </li> <li><a href="#">About</a> </li> </ul> <p> </p> <p> </p> <ul class="nav nav-stacked nav-pills"> <li class="active"><a href="#">Home</a> </li> <li><a href="#">About</a> </li> </ul> <p> </p> </div> </div> </div> <div class="col-lg-6" id="navbar"> <div class="panel panel-default"> <div class="panel-heading"> Navbar </div> <div class="panel-body"> <p> </p> <div class="navbar"> <a href="#" class="navbar-brand">Your Company</a> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Contact</a> </li> </ul> </div> <div class="navbar navbar-inverse"> <a href="#" class="navbar-brand">Your Company</a> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Contact</a> </li> </ul> </div> <div class="navbar"> <a class="btn btn-primary navbar-btn">Navbar Button</a> <p class="navbar-text pull-right"> Navbar Text</p> </div> <p> </p> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6"> <div class="panel panel-default" id="pagination"> <div class="panel-heading"> Pagination </div> <div class="panel-body"> <ul class="pagination" style="margin-right: 10px;"> <li><a href="#">Prev</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="#">Next</a> </li> </ul> <ul class="pagination pagination-large"> <li class="disabled"><a href="#">Prev</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="#">Next</a> </li> </ul> <ul class="pager"> <li><a href="#">Prev</a> </li> <li><a href="#">Next</a> </li> </ul> </div> </div> <div class="panel panel-default" id="labels"> <div class="panel-heading"> Labels and Badges </div> <div class="panel-body"> <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> <p class="lead"> <a href="#">Inbox <span class="badge">42</span></a></p> </div> </div> </div> <div class="col-lg-6"> <div class="panel panel-default" id="alerts"> <div class="panel-heading"> Alerts </div> <div class="panel-body"> <div> <div class="alert alert-danger"> <button type="button" class="close" data-dismiss="alert"> ×</button> <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. </div> <div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert"> ×</button> <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>. </div> <div class="alert alert-warning"> <button type="button" class="close" data-dismiss="alert"> ×</button> <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important. </div> <div class="alert alert-info"> <button type="button" class="close" data-dismiss="alert"> ×</button> <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important. </div> <div class="alert alert-block"> <button type="button" class="close" data-dismiss="alert"> ×</button> <h4> Warning!</h4> <p> This is a block style alert.</p> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6"> <div class="panel panel-default" id="progress"> <div class="panel-heading"> Progress Bars </div> <div class="panel-body"> <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 20%"> </div> </div> <div class="progress progress-striped active"> <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-warning" style="width: 60%"> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 80%"> </div> </div> </div> </div> </div> <div class="col-lg-6"> <div class="panel panel-default" id="media-object"> <div class="panel-heading"> Media Object </div> <div class="panel-body"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/64"> </a> <div class="media-body"> <h4 class="media-heading"> Media heading</h4> This is the content for your media. <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/64"> </a> <div class="media-body"> <h4 class="media-heading"> Nested media heading</h4> This is the content for your media. </div> </div> </div> </div> </div> </div> </div> </div> <div class="panel panel-default" id="list-groups"> <div class="panel-heading"> List Groups </div> <div class="panel-body"> <div class="row"> <div class="col-lg-4"> <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> <div class="col-lg-4"> <div class="list-group"> <a href="#" class="list-group-item active">Cras justo odio </a><a href="#" class="list-group-item"> Dapibus ac facilisis in </a><a href="#" class="list-group-item">Morbi leo risus </a><a href="#" class="list-group-item">Porta ac consectetur ac </a><a href="#" class="list-group-item"> Vestibulum at eros </a> </div> </div> <div class="col-lg-4"> <div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading"> List group item heading</h4> <p class="list-group-item-text"> Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a><a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> List group item heading</h4> <p class="list-group-item-text"> Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a><a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> List group item heading</h4> <p class="list-group-item-text"> Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-3"> <div class="panel panel-primary" id="panels"> <div class="panel-heading"> This is a header </div> <div class="panel-body"> <p> This is a panel</p> </div> <div class="panel-footer"> This is a footer </div> </div> </div> <div class="col-lg-3"> <div class="panel panel-success"> <div class="panel-heading"> This is a header </div> <div class="panel-body"> <p> This is a panel</p> </div> <div class="panel-footer"> This is a footer </div> </div> </div> <div class="col-lg-3"> <div class="panel panel-danger"> <div class="panel-heading"> This is a header </div> <div class="panel-body"> <p> This is a panel</p> </div> <div class="panel-footer"> This is a footer </div> </div> </div> <div class="col-lg-3"> <div class="panel panel-warning"> <div class="panel-heading"> This is a header </div> <div class="panel-body"> <p> This is a panel</p> </div> <div class="panel-footer"> This is a footer </div> </div> </div> </div> <div class="row"> <div class="col-lg-3"> <div class="panel panel-info"> <div class="panel-heading"> This is a header </div> <div class="panel-body"> <p> This is a panel</p> </div> <div class="panel-footer"> This is a footer </div> </div> </div> <div class="col-lg-3"> <div class="panel panel-default"> <div class="panel-heading"> This is a header </div> <div class="panel-body"> <p> This is a panel</p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item">First Item</li> <li class="list-group-item">Second Item</li> <li class="list-group-item">Third Item</li> </ul> <div class="panel-footer"> This is a footer </div> </div> </div> <div class="col-lg-3"> <div class="well" id="wells"> Default Well </div> <div class="well well-small"> Small Well </div> </div> <div class="col-lg-3"> <div class="well well-large"> Large Padding Well </div> </div> </div> </div>

body { padding-top: 70px; }