All HTML headings, <h1> through <h6> are available.
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.
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.
For emphasizing a snippet of text with a heavier font-weight.
The following snippet of text is rendered as bold text.For emphasizing a snippet of text with italics.
The following snippet of text is rendered as italicised text.Easily realign text to components with text alignment classes.
Left aligned text.
Center aligned text.
Right aligned text.
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.
Using the collapse plugin, we built a simple accordion by extending the panel component.
Simple message boxes with the ability to dismiss (close / hide) a message using a close button
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.
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.
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.
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.
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.
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
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.
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.
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.
.btn in .btn-group<div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.
<a> elements as the <button> doesn't pick up these styles.Creates a basic sliding image carousel effect, ideal for within a page content region, an ExtraContent container or a theme header / banner.
A simple box to put code in.
<p>Sample text here...</p>
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.
Perfect to display a big block of content on a page.
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.
Use labels to highlight important sections of content in your pages.
DefaultThe most basic list group available is simply an unordered list. Build upon it with the options that follow, or your own CSS as needed.
Add the badges component to any list group item and it will automatically be positioned on the right.
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.
Add nearly any HTML within, even for linked list groups like the one below.
Arrive at the camp. Setup tents and get the fire lit.
Team building exercises and parachute games.
Rock climbing and abseiling at North Ridge mountain.
Ferry trip down to Queens Quay and steam train ride back.
Kayaking on the Great East River.
Games day. Lots of fun competitions and an evening party.
30 mile cycle ride through the Dark Forest to West Peak.
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.
Or you can have the media object floating right instead like this:
Create a basic popup / modal window effect to display content within.
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.
Same as the one above, but with an inverted (light on dark) colour scheme, by adding navbar-inverse to the parent container.
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.
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 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 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.
Tab navigation with drop-down links that appear when you click or tap the parent link.
Pill navigation with drop-down links that appear when you click or tap the parent link.
Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
Alternatively, you can align each pager button to the side:
Alternatively, you can have one or both buttons disabled, by adding a disabled class:
By default, all the panel does is apply some basic border and padding to contain some content.
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.
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.
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
Useful little popovers to display extra information on links or buttons.
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.
Creates a bold title and subtitle.
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 are a superb way to frame your images and can also be used for videos, retail products, portfolios, and much more.
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.
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.
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 |
%)
%)
%)