Headings

All HTML headings, <h1> through <h6> are available.

An H1 level heading

An H2 level heading

An H3 level heading

An H4 level heading

An H5 level heading
An H6 level heading

Lead body copy

Make a paragraph stand out by adding .lead to the paragraph tags.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.


Small text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

This line of text is meant to be treated as fine print.

Bold

For emphasizing a snippet of text with a heavier font-weight.

The following snippet of text is rendered as bold text.

Italics

For emphasizing a snippet of text with italics.

The following snippet of text is rendered as italicised text.

Alignment classes

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.


Emphasis classes

Convey meaning through color with a handful of emphasis utility classes.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.


Accordion

Using the collapse plugin, we built a simple accordion by extending the panel component.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Alert messages

Simple message boxes with the ability to dismiss (close / hide) a message using a close button

Danger!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Success!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Warning!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this

Info!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take this action Or do this


Badges

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more. Built-in styles are included for placing badges in active states in pill and list navigations.

Inbox 42

Blockquote boxes

Blockquotes are great for displaying important content quoted from another source. This first one is pulled right:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

Or a standard left-floating blockquote like this one:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.

Someone famous in Body of work

Breadcrumb trail

Indicate the current page's location within a navigational hierarchy, or just display a string of useful links. Separators are automatically added in CSS through :before and content.


Business card

Use the Bootstrap Business Card code snippet to create small online business cards and personal profiles. Using <address> tags is very good for SEO and you should find that elements of the card like the email address and telephone number are automatically detected by web browsers.

Mr. John Smith
Head of international operations

795 Folsom Ave, Suite 600
San Francisco, CA 94107

P: (123) 456-7890
E: first.last@example.com

Buttons

Any link can be turned into a button, to make it clearer for people to see and click. Just give the link a class="" attribute, and enter the button style in the quotes (look at this page in RapidWeaver edit mode to see the available selector names). Buttons come in various sizes and colours. The length of a button is governed by the amount of text or icons it contains. Blue and silver are the most common colours to use, but other colours may be used. Button groups are also available, which let you 'stitch' multiple buttons together.

Standard Buttons


My Button

My Button

My Button

My Button

My Button

My Button

Large Buttons


My Button

My Button

My Button

My Button

My Button

My Button

Small Buttons


My Button

My Button

My Button

My Button

My Button

My Button

Extra Small Buttons


My Button

My Button

My Button

My Button

My Button

My Button

Button Groups

Wrap a series of buttons with .btn in .btn-group

Multiple Button Groups

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

Vertical Button Groups

Make a set of buttons appear vertically stacked rather than horizontally.

Justified button groups

Make a group of buttons stretch at the same size to span the entire width of its parent. This only works with <a> elements as the <button> doesn't pick up these styles.
BMX Road Mountain Hybrid 29er's Folding Accessories

Image carousel

Creates a basic sliding image carousel effect, ideal for within a page content region, an ExtraContent container or a theme header / banner.


Code box

A simple box to put code in.

<p>Sample text here...</p>

Cookie cutter

Turns a collection of normal square images into rounded images. Works well on all newer web browsers. Images can be set as links to other pages, resources or URL's. Additional CSS code could be used to adjust the spacing around the images. Use as many or as few images as you want.


Hero unit

Perfect to display a big block of content on a page.

Hello World!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et erat ut lectus fermentum tincidunt. Donec sed leo risus. Sed ut eros mi, a pellentesque purus. Donec leo elit, facilisis euismod accumsan in, mollis vel massa. Donec at turpis massa, nec tincidunt erat. In venenatis dolor sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam euismod egestas facilisis. Aenean vestibulum sapien nec libero imperdiet semper. In risus nulla, eleifend at pharetra sodales, consectetur non justo. Phasellus faucibus, leo eget blandit semper, augue felis ullamcorper lectus, vel luctus urna quam quis nunc. Nullam vel nibh sit amet felis tincidunt convallis eu nec purus. Sed tempor velit ut nulla pretium sodales. Quisque dapibus massa non velit elementum quis aliquam nibh pharetra. In arcu mauris, bibendum eget laoreet at, congue vitae tortor.

Learn more


Labels

Use labels to highlight important sections of content in your pages.

Default
Success
Warning
Danger
Info

List (ordered)

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

List (unordered)


Basic list group

The most basic list group available is simply an unordered list. Build upon it with the options that follow, or your own CSS as needed.

List group with badges

Add the badges component to any list group item and it will automatically be positioned on the right.

Linked list group

Linkify list group items by using anchor tags instead of list items (that also means a parent <div> instead of an <ul>). No need for individual parents around each element.

Monday Tuesday Wednesday Thursday Friday Saturday Sunday

Custom content list group

Add nearly any HTML within, even for linked list groups like the one below.

Monday

Arrive at the camp. Setup tents and get the fire lit.

Tuesday

Team building exercises and parachute games.

Wednesday

Rock climbing and abseiling at North Ridge mountain.

Thursday

Ferry trip down to Queens Quay and steam train ride back.

Friday

Kayaking on the Great East River.

Saturday

Games day. Lots of fun competitions and an evening party.

Sunday

30 mile cycle ride through the Dark Forest to West Peak.


Media object

Media objects feature a left or right aligned media object (like images, video or audio) placed alongside textual content. Use as many or as few media objects as you prefer. Media objects are fully responsive, and you can provide any size of media you prefer.

Image alt attribute goes here

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Image alt attribute goes here

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Image alt attribute goes here

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.


Or you can have the media object floating right instead like this:

Image alt attribute goes here

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Image alt attribute goes here

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Image alt attribute goes here

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Modal window

Create a basic popup / modal window effect to display content within.

Open Model Window

Navbars

Navbars can comprise of a title (branding) and page navigation links. Place a navbar anywhere in your page. A Navbar has a fixed height and will extend to the same width of whatever element it's placed within.

Inverted navbar

Same as the one above, but with an inverted (light on dark) colour scheme, by adding navbar-inverse to the parent container.


Basic Tabs

These are ideal to place at the top of a page. Just customise the address and link title. Each link sits inside a standard pair of HTML <li> and </li> List Item tags. Optionally you can mark a navigation item as 'active' by adding a class="active" attribute to it.

Basic Pills

These are ideal to place at the top of a page. Just customise the address and link title. Each link sits inside a standard pair of HTML <li> and </li> List Item tags. Optionally you can mark a navigation item as 'active' by adding a class="active" attribute to it.

Stacked Pills

Stacked pills are perfect to place in a column, sidebar or ExtraContent area. Just customise the address and link title. Each link sits inside a standard pair of HTML <li> and </li> List Item tags. Optionally you can mark a navigation item as 'active' by adding a class="active" attribute to it.

Navigation Lists

Navigation lists are very useful for building a 'table of contents' and equally work just as well in a column, sidebar or ExtraContent area. Just customise the address and link title. Each link sits inside a standard pair of HTML <li> and </li> List Item tags. To create the section headings, insert <li class="nav-header">Section Heading</li> wherever you want a title shown.


Tabs with dropdowns

Tab navigation with drop-down links that appear when you click or tap the parent link.

Pills with dropdowns

Pill navigation with drop-down links that appear when you click or tap the parent link.


Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

Horizontally opposed

Alternatively, you can align each pager button to the side:

Disabled state

Alternatively, you can have one or both buttons disabled, by adding a disabled class:


Panels

By default, all the panel does is apply some basic border and padding to contain some content.

Hello World! This is some content in a panel.

Panel with heading

Easily add a heading container to your panel with panel-heading. You may also include any <h1> - <h6> with a panel-title class to add a pre-styled heading.

Panel heading
Hello World! This is some content in a panel.

Panel title

Hello World! This is some content in a panel.

Panel with footer

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Panel content

Coloured panels

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Popovers

Useful little popovers to display extra information on links or buttons.

Popover on top Popover on right Popover on bottom Popover on left

Progress indicators

Although commonly used by developers to indicate when a process is happening on a page (like a form submission or file upload) the progress indicator in Bootstrap is also great to use as a 'static' indicator on web pages. For example, if people are reading through pages sequentially on your website (like following a curriculum) you can display their progress at the top of the page like this:

Coloured progress bars

Progress bars use some of the same button and alert classes for consistent styles.

Striped progress bars

Uses a gradient to create a striped effect. Not available in IE8 or less.

Animated progress bars

Add active to progress-striped to animate the stripes right to left. Not available in any versions of IE or old versions of Firefox, Safari, etc.

Stacked progress bars

Place multiple bars into the same progress to stack them.


Section header

Creates a bold title and subtitle.


Tabs

Add quick, dynamic tab functionality to transition through panes of local content.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.


Thumbnails

Thumbnails are a superb way to frame your images and can also be used for videos, retail products, portfolios, and much more.

Alt Alt Alt Alt Alt Alt Alt Alt

Tooltips

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.Hover over the links below to see tooltips:

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy
Austin twitter handle freegan cred raw denim single-origin coffee viral.


Well placeholder

A simple rounded box to frame content within.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et erat ut lectus fermentum tincidunt. Donec sed leo risus. Sed ut eros mi, a pellentesque purus. Donec leo elit, facilisis euismod accumsan in, mollis vel massa. Donec at turpis massa, nec tincidunt erat. In venenatis dolor sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam euismod egestas facilisis. Aenean vestibulum sapien nec libero imperdiet semper. In risus nulla, eleifend at pharetra sodales, consectetur non justo. Phasellus faucibus, leo eget blandit semper, augue felis ullamcorper lectus, vel luctus urna quam quis nunc. Nullam vel nibh sit amet felis tincidunt convallis eu nec purus. Sed tempor velit ut nulla pretium sodales. Quisque dapibus massa non velit elementum quis aliquam nibh pharetra. In arcu mauris, bibendum eget laoreet at, congue vitae tortor.

Aenean sed lacus vitae ante sagittis pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam mattis velit sed odio sollicitudin dapibus. Aenean pellentesque lectus quis quam hendrerit vel rhoncus augue facilisis. Aenean tempus malesuada augue vitae commodo. Etiam sed lorem dolor, et congue mauris. Nullam sit amet erat nisl, ac imperdiet dolor. Donec vel ligula odio. Maecenas pretium leo sit amet libero vulputate molestie in at arcu. Suspendisse potenti. Maecenas pellentesque, dolor id scelerisque vehicula, magna dolor luctus lectus, ut ornare lectus ipsum ut ligula. Aenean ante libero, consectetur vel ultricies quis, feugiat sed lorem. Aenean sollicitudin erat quis massa imperdiet et malesuada dui malesuada. Ut id augue nisi, nec placerat ligula. Sed imperdiet neque eget nibh hendrerit accumsan. In eget dolor sem, quis volutpat urna. Proin tempor nunc vitae felis iaculis bibendum.


Zebra-striped table

An attractive table that is easier to read, and which supports both headings and rollover hover effects.

Table Cell Heading Table Cell Heading Table Cell Heading Table Cell Heading
Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell