Style Guide

Headings

h1. Title Headings

h2. Title Headings

h3. Title Headings

h4. Title Headings

h5. Title Headings

h6. Title Headings

#	First Name	Last Name	Username
1	Mark	Otto	@test
2	Jacob	Thornton	@test
3	Larry	the Bird	@test

Buttons

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

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

Examples

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.

Alert Well - Success Message

Alert Well - Information Message

Alert Well - Warning Message

Alert Well - Danger Message

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