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.

Learn more

 <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).

 <div class="page-header">   <h1>Example page header <small>Subtext for header</small></h1> </div> 


Use the well as a simple effect on an element to give it an inset effect.

Look, I’m in a well!

 <div class="well">   ... </div> 

Optional classes

Control padding and rounded corners with two optional modifier classes.

Look, I’m in a well!

 <div class="well well-large">   ... </div> 
Look, I’m in a well!

 <div class="well well-small">   ... </div> 

Helper classes

Simple, focused classes for small display or behavior tweaks.


Float an element left

 .pull-left {   float: left;   marginr-right: 15px; } 


Float an element right

 .pull-right {   float: right;   margin-left: 15px; } 


Change an element’s color to #999

 .muted {   color: #999; } 


Clear the float on any element

 .clearfix {   *zoom: 1;   &:before,   &:after {     display: table;     content: "";   }   &:after {     clear: both;   } }