Miscellaneous Lightweight utility components
Typographic components
Hero unit
A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
<div class="hero-unit">
<h1>Heading</h1>
<p>Tagline</p>
<p>
<a class="btn btn-primary btn-large">
Learn more
</a>
</p>
</div>
Page header
A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).
Example page header Subtext for header
<div class="page-header"> <h1>Example page header <small>Subtext for header</small></h1> </div>
Wells
Use the well as a simple effect on an element to give it an inset effect.
<div class="well"> ... </div>
Optional classes
Control padding and rounded corners with two optional modifier classes.
<div class="well well-large"> ... </div>
<div class="well well-small"> ... </div>
Helper classes
Simple, focused classes for small display or behavior tweaks.
.pull-left
Float an element left
class="pull-left"
.pull-left {
float: left;
marginr-right: 15px;
}
.pull-right
Float an element right
class="pull-right"
.pull-right {
float: right;
margin-left: 15px;
}
.muted
Change an element's color to #999
class="muted"
.muted {
color: #999;
}
.clearfix
Clear the float on any element
class="clearfix"
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}