Introduction

Bootstrap is an opensource HTML, CSS and Javascript framework, developed by Twitter. The core Bootstrap framework is included with this RapidWeaver theme, providing you with another layer of functionality. Bootstrap makes it easier to add a wide array of different interface embellishments to your websites and build-in further functionality. It really is a sweetshop for web developers who wish to improve their pages.

Many of the features Bootstrap supports are achieved through use of HTML code snippets. We have a pack of free Bootstrap code snippets available for download from the ThemeFlood website (which can be installed into RapidWeaver and show up in the snippets window). So if for example you wanted to add a nice zebra-striped table to your RapidWeaver website, you simply need to open the snippets window, drag and drop in the zebra-striped table snippet, and populate it with your own content. Even if you are not an HTML wizz-kid, most of the code snippets are easy to use and you can probably work out which content to replace and which code to customise. Snippets which are more complicated to use include comments (instructions) at the top. The other option of course, is that you can browse the Bootstrap website, read the presented information and copy any of the code examples given.

The great thing about Bootstrap code snippets is that once they have been added to your website, they are saved as part of the RapidWeaver sandwich file (project file). So if you reopen the project on another computer or forward it to a colleague, you're not in the tricky position of content missing (as a result of not having the correct stacks or plugins installed). Bootstrap is not exactly a Stacks replacement, but in some instances it may compliment existing workflows and provide solutions.

This page provides examples of some of the Bootstrap modules supported by this theme. All of these examples are available as code snippets which are ready to be dragged and dropped into your pages.

Accordion

Using the collapse plugin, we built a simple accordion style widget:

Alert Box

The alert box creates a simple and stylish message box, which a user can close:

Badges

Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications. Equally there are lots of other uses for them in websites:

Blockquote Boxes

Blockquotes are used to mark-up a block of text quoted directly from another person, organsiation or source. The quotation itself is presented with bolder styling to the body content, and the reference or citation is presented underneath against a hyphen. Adding a class attribute class="pull-right" lets you align the blockquote right:

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

Someone famous in Body of work

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

Someone famous in Body of work

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

Large Buttons

Small Buttons

Mini Buttons

Button Groups

Carousel image slider

This Bootstrap module provides you with a fully responsive image slider, complete with navigation buttons and captions. It can source images from your theme or from an image warehouse:

First Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

Code box

A very useful piece of mark-up if you need to display code snippets. If using it for HTML code, replace opening tags with HTML 'less-than' entities to prevent the code being rendered:

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

Glyphicons

<i class="icon-search icon-white"></i>

Available icons in this theme...

Hero unit

This is ideal to use at the top of a page, and creates a bold and stylish container to place important or introductory content within:

Labels

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

List (ordered)

Create a numbered list of items:

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)

Create a bulleted list of items:

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Modal window

Use the modal window to create basic popups and lighboxes within a page. Aspects like the header, body content and footer can be customised. Modal windows can be triggered from links and can be used to display different content types like text, images and video:

Open Model Window

Navigation styles

Bootstrap has options for you to manaully build several navigation structures. These can either be used for page navigation, tables of contents or as links to resources and file downloads:

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.

• Home
• About Us
• Blog
• Events
• Reviews
• Contact Us

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.

• Home
• About Us
• Blog
• Events
• Reviews
• Contact Us

Stacked Tabs

Stacked tabs are great 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.

• Home
• About Us
• Blog
• Events
• Reviews
• Contact Us

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.

• Home
• About Us
• Blog
• Events
• Reviews
• Contact Us

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.

• Page Links
• Home
• About Us
• Blog
• Events
• Reviews
• Contact Us
• Customer Support
• Part Numbers
• User Guides
• Help Sheets
• Diagrams
• Services
• Spares
• Repairs
• Accessories

Navigation tabs and drop-downs

This module can be used to build a simple horizontal line of links, with attractive drop-downs:

• Regular link
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 3
  • Action
  • Another action
  • Something else here
  • Separated link

Popovers

These are great for displaying vivid dialogue boxes against links and buttons. The position of the popover can be changed:

Responsive grid system

A completely fluid and responsive 12-point grid system, which can be used to construct complex page designs. On mobile devices, the RAFT system will automatically consolidate grids down to a single column:

Section header

Useful for breaking large chunks of content into seperate parts, complete with title, slogan and horizonatal rule:

Tabs

As the name suggests, this module allows you to build a simple set of tabs, which can be toggled to reveal different blocks of content:

• Home
• About Us
• Company Profile
• Information
• Events
• Feedback

Thumbnails

Thumbnails are a superb way to frame your images and can also be used for videos, retail products, portfolios, and much more. They can be links or static content. Thumbnail markup is simple - a ul (unordered list) with any number of li (list item) elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents. The thumbnails component can also use existing grid system classes for control of thumbnail dimensions and improved responsiveness:

Tooltips

A useful method of providing additional information on links:

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

This is just a simple box, suitable for extra information or messages:

Zebra-striped table

Creates a standard HTML table. Odd and even rows are different colours, and rows change colour when you hover over them. To make a larger table scroll horizontally on mobile devices, place the table inside a pair of <div class="scrollWrap"> and </div> tags: