Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Bootstrap 3 elements example"
Bootstrap 3.1.0 Snippet by
BhaumikPatel
3.1.0
Preview
HTML
CSS
View Full Screen
Fork
Fork this
25.5K
 
5 Fav
Post to Facebook
Tweet this
<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; }
Related:
See More
Template
Vue Black Dashboard Pro
126.3K
38
Filter elements, sidebar filter panel bootstrap 4
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76