Style Guide



h1. Title Headings

h2. Title Headings

h3. Title Headings

h4. Title Headings

h5. Title Headings
h6. Title Headings

Helper Classes


#First NameLast NameUsername
3Larrythe Bird@test


Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Text Primary Class class="text-primary"

Text Secondary Class class="text-secondary"

Text Success Class class="text-success"

Text Info Class class="text-info"

Text Warning Class class="text-warning"

Text Danger Class class="text-danger"

Contextual backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Background Primary   class="bg-primary"

Background Secondary   class="bg-secondary"

Background Purple  class="bg-brand-purple"

Background Success   class="bg-success"

Background Info  class="bg-info"

Background Warning  class="bg-warning"

Background Danger  class="bg-danger"


Responsive images

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

To center images which use the .img-responsive class, use .center-block instead of .text-center. See the helper classes section for more details about .center-block usage.

< />< span="" /> src="..." class="img-responsive" alt="Responsive image">< />

Image shapes

140x140 140x140 140x140
< />< span="" /> src="..." alt="..." class="img-rounded">< />< span="" /> src="..." alt="..." class="img-circle">< />< span="" /> src="..." alt="..." class="img-thumbnail">< />< />< />


Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.


Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

No default class

Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.

<div class="alert alert-success" role="alert">...</div><div class="alert alert-info" role="alert">...</div><div class="alert alert-warning" role="alert">...</div><div class="alert alert-danger" role="alert">...</div>