Table of Contents
Version 1.1
This page features useful documentation on how to understand Bootstrap, how to add styling, and how to add content to your website. Check back often for any changes.
Example Usage
<div class="row"> <div class="col-sm-12"> </div> </div>
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
Example Usage
<h1>Text goes here</h1>
Example Usage
<div class="v1">Text goes here</div>
| Button | Class | Example Usage |
|---|---|---|
btn |
<button type="button" class="btn">Default</button> | |
btn btn-primary |
<button type="button" class="btn btn-primary">Primary</button> | |
btn btn-info |
<button type="button" class="btn btn-info">Info</button> | |
btn btn-success |
<button type="button" class="btn btn-success">Success</button> | |
btn btn-warning |
<button type="button" class="btn btn-warning">Warning</button> | |
btn btn-danger |
<button type="button" class="btn btn-danger">Danger</button> | |
btn btn-link |
<button type="button" class="btn btn-link">Link</button> | |
btn btn-default |
<button type="button" class="btn btn-default" disabled="disabled">Default Disabled</button> | |
btn btn-primary |
<button type="button" class="btn btn-primary" disabled="disabled">Primary Disabled</button> | |
btn btn-info |
<button type="button" class="btn btn-info" disabled="disabled">Info Disabled</button> | |
btn btn-success |
<button type="button" class="btn btn-success" disabled="disabled">Success Disabled</button> | |
btn btn-warning |
<button type="button" class="btn btn-warning" disabled="disabled">Warning Disabled</button> | |
btn btn-danger |
<button type="button" class="btn btn-danger" disabled="disabled">Danger Disabled</button> | |
btn btn-fire |
<button type="button" class="btn btn-fire">Fire</button> | |
btn btn-lake |
<button type="button" class="btn btn-lake">Lake</button> | |
btn btn-grass |
<button type="button" class="btn btn-grass">Grass</button> | |
btn btn-sun |
<button type="button" class="btn btn-sun">Sun</button> | |
btn btn-amethyst |
<button type="button" class="btn btn-amethyst">Amethyst</button> | |
btn btn-light |
<button type="button" class="btn btn-light">Light</button> | |
btn btn-dark |
<button type="button" class="btn btn-dark">Dark</button> |
Example Usage
<a href="http://www.example.com"><img src="images/img.jpg" class="img-thumbnail"></a>
Example Usage
Click here to view the code.
Change navbar-light to navbar-default or navbar-dark for different styles. If you're using navbar-dark, add dark-dropdown inside each ul class="dropdown-menu" - Here is the example code for a justified navbar.
Jusitified navbars are a little more tricky, heres the example code:
<div class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav nav-justified"> <li><a href="#">Justified</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="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> </ul> </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="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> </div> </div>
Example Usage
<i class="fa-camera fa-2x"></i>
You can adjust icon size by adding fa-2x, fa-3x, or fa-4x next to the icon name.
Check out the entire list of icons here.
Example Usage
<input type="checkbox" id="c1">
<label for="c1"><span></span>Checkbox</label>
<input type="radio" id="r1">
<label for="r1"><span></span>Radio</label>
Fire Slate
Example Usage
<div class="slate-medium fire">
<p>Fire Slate</p>
</div>