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; } }