• Share this article:

Twitter Bootstrap

All free and paid ThemeFlood RapidWeaver themes include support for the open source Bootstrap toolkit, by Twitter. ThemeFlood is proud to have been the very first RapidWeaver addon company to pioneer the use of Bootstrap in RapidWeaver. Bootstrap is a rival frontend framework to Zurb Foundation. We've generally found Bootstrap to be better suited for what we're using it for; backed by more online resources and lots of frequent updates. Without doubt, Bootstrap has been a major driving force in shaping the future web.

W3Schools have published a comprehensive free guide on using Bootstrap. Meanwhile Tiffany from udemy.com has got in contact with ThemeFlood and forwarded us a link to their free Bootstrap tutorial which you can view here. Both of these resources are very well written with up-to-date information, and are well worth adding to your Bootstrap reading list! Although you can readily copy and paste the Bootstrap code snippets as you see them, building a basic understanding of what Bootstrap actually is and how it works is of major advantage.

Introduction

Bootstrap is a free and open source web development framework. There are estimates suggesting that 1% of websites are now dependant on Bootstrap. What Bootstrap does is to provide website and app developers with a ready-made 'tried and tested' framework. This framework comprises of HTML, CSS and Javascript modules. Each module works as a building block, and the idea is to build strong websites and apps quicker and more reliably. Bootstrap cuts-out a lot of repetitive coding and testing; and in the process it provides a 'pick-n-mix' selection of quality style and layout options. Bootstrap also includes some vitally important elements like a CSS reset and flexible grid systems.

Bootstrap website

All this combined make Bootstrap absolutely ideal for use in RapidWeaver themes. Bootstrap is already built into all premium ThemeFlood themes and is working behind the scenes all the time. Although there are several other prominent web development frameworks available (many of which are just good), Bootstrap has the advantage of being immensely popular and has a strong future. Even if a web developer has never heard of RapidWeaver, chances are he or she has definitely heard of Bootstrap and has possibly used it too. So really there is nothing Bootstrap can do wrong and is an almost essential foundation of any modern website or app.

How Bootstrap works

We already include the 'core' Bootstrap files in the theme; those being the CSS and Javascript files. Minified versions are used for both, to keep file sizes and bandwidth down to an absolute minimum; in turn allowing your webpages to load faster. The CSS file is always loaded by default in the theme index.html file, because this includes some vital theme components like the CSS reset. Bootstrap Javascript is only ever called if a Bootstrap code snippet you're working with requests it.

It should be emphasised at this point that there is nothing else you need to download or install into the theme. Bootstrap is already waiting and available for you, should you choose to use it.

The Bootstrap CSS and Javascript files are called locally from within the theme, and not from an external CDN (content delivery network). We do this on purpose, to ensure that your website is still usable; even offline with no internet connection or behind a firewall. The links to the Bootstrap files in your source code are relative; to mean that they do not start with either 'http://' or 'https://' in the address. Relative links let you use Bootstrap on a normal website or one that has been secured / encrypted with an SSL certificate. Having everything 'self contained' within the theme ensures the web browser will not display any errors about insecure scripts or cross-domain calls for Bootstrap.

Once you have grasped the basics of how Bootstrap works and how you can use it to enhance your webpages, you can work towards more advanced things. For example, you can merge a Bootstrap Well with Thumbnails, a Grid and Buttons to create a beautiful product comparison table or charts. There is huge potential to mix things up and create some amazing page styles or layouts.

Advantages of using Bootstrap

Bootstrap goes wherever the sandwich file (project file) goes. So if you move your RapidWeaver sandwich file off onto another computer or send it to a colleague, all the Bootstrap code and content goes with it. No more dashing-around trying to install matching plugins, matching plugin versions, finding stacks or retrieving license codes! Bootstrap is always with you. Just ensure that the computers you open your RapidWeaver sandwich file on all have the same theme (and version) installed.

You can choose to use as much or as little as Bootstrap as you want. Some people choose to use none of it or just touch on the absolute basics (like buttons). Whereas others really max-out their projects with loads of Bootstrap modules. The choice is entirely yours; take what you want and leave the rest.

Almost everything you see listed on websites like Bootsnipp can also be incorporated into your projects 'as is'. There is a growing marketplace for free and paid Bootstrap addons, and many work perfectly with ThemeFlood RapidWeaver themes. Plus there are a growing number of help and support resources, covering setup and usage of Bootstrap; some links of which are provided a little later on in this chapter. However some snippets like the forms will require some sort of backend to handle form submissions and process them.

Skills required

Some of the Bootstrap code snippets are ridiculously simple to use. Even if you have never used HTML code ever before in your life, some snippets like tags, labels and buttons are super-easy to use. Just drag and drop them into the page. Delete what you don't want and customise the rest. Change labels to reflect the text you want to display and alter URL's for things like links:

<a href="http://www.example.com/" class="btn btn-primary">Click Me!</a>

Some of the more complex code snippets do require a bit more work. For example the carousel image slider and accordion require you to delete or duplicate blocks of HTML code, based on how many slides or panels you want to display. You sometimes have to look for patterns in the code and work out what each chunk of code does. The code snippets are commented and indented to try and make things as easy as possible for you. But ultimately, knowledge of HTML code would be a clear advantage, if you're working with the more complicated code snippets and trying to do tricky stuff.

Bootstrap versions

Bootstrap is frequently updated every couple of weeks. As you can imagine, trying to 'sync' theme updates to that sort of time frame would be pretty difficult, and also quite annoying for our theme users who would otherwise be bombarded with a constant flow of updates! Therefore we only tend to pull the major Bootstrap updates into themes, unless the theme is receiving an interim update anyway.

Sometimes Bootstrap might release an update (patch) to fix an obscure corner-case bug relating something in a distant version of a web browser. For that sort of Bootstrap update, we would probably tend to turn a blind eye and ignore it; as chances are it's not a problem exposed to many RapidWeaver users. But if a more significant Bootstrap update landed that provided new features or important browser compatibility improvements, then we definitely would work to get that merged into themes and rolled out as soon as possible.

An effort is made to keep the Bootstrap code snippets updated regularly, and try to match the snippets as close as possible to the version of Bootstrap being used in themes. Sometimes minor things in Bootstrap change or we find better ways of doing things. Therefore if you have recently updated a ThemeFlood theme or are about to embark on a new project, it's recommended that you re-download the snippets again and delete or overwrite any existing ones you already have installed in RapidWeaver. That way you can be assured you have the latest and greatest versions installed on your computer to work from. Just use any one of the Bootstrap code snippet download links on the ThemeFlood website. Updated code snippets do not effect code or content already in your pages.

Bootstrap code snippets

Bootstrap is already installed in the theme and aspects of it (like the CSS reset and grid system) are used by the theme permanently. If you have taken a look at the Twitter Bootstrap website, you may have acknowledged the wide variety of styling and special effects available. Just about every single one of these is available for you to use in your Bootstrap-enabled RapidWeaver theme. So suddenly a rather humble RapidWeaver theme traditionally used for simply styling pages takes on a whole new dimension and becomes as useful and as sophisticated as a plugin like Stacks or Blocks!

Most of these styling and layout effects you see showcased on the Bootstrap website are available for you to download and install into RapidWeaver as code snippets. You can find the download link for the 'bootstrap snippets pack' on most theme pages of the ThemeFlood website. Some people find the code snippets easier than copying code from the Bootstrap website; so the choice is entirely yours.

This snippet pack downloads as a .zip package, onto your computer. Opening the package reveals at least 40 code snippets for RapidWeaver. Double-clicking on these snippets installs them into RapidWeaver. The code snippets are then available for you to use in the RapidWeaver snippets window.

Bootstrap code snippets

The Bootstrap code snippet names are all prepended with the word 'Bootstrap'. So even if you already have a large number of snippets installed in RapidWeaver, you will always be able to quickly filter and find the snippets you want. Unused or unwanted snippets can be easily deleted at any time. Manage Bootstrap code snippets like you currently do with other standard RapidWeaver code snippets.

Using the Bootstrap code snippets

If you have looked at the Bootstrap website and decided you want to test some aspects of Bootstrap in your project, then the free code snippets are often the best place to start. Once installed, simply drag-and-drop a Bootstrap code snippet from the RapidWeaver Snippets window, down into your page.

Bootstrap code snippets can work in almost any Styled Text or HTML Code region, in RapidWeaver. However if you're putting a code snippet in a Styled Text region, it's advisable to highlight the entire code snippet and select Ignore Formatting from the RapidWeaver Format menu (pictured below). This will instruct RapidWeaver to ignore any line or paragraph breaks in the code.

RapidWeaver ignore formatting

Most of the code snippets include a title and comments at the start. These comments tell you what that particular snippet does, plus any special instructions essential to follow. If you choose to, titles and comments can be safely deleted, once you have read them.

Sometimes the code snippets (like labels or buttons) might include multiple variations of elements in different styles or colours. If there is one there that you want to use, simply delete the others. Or copy the code for the one you want to use, and delete the entire snippet afterwards. Again, pick and choose whatever you want to use.

HTML Bootstrap code snippets should not be entered into places like the Custom Header or Prefix box in the RapidWeaver Page Inspector, as these input boxes are reserved for other code. Also you should bare in mind that plugins like Stacks apply overflow:hidden on all stack elements within a page, and this may present difficulties in getting some of the code snippets (like the popups or tooltips) to work correctly.

Bootstrap Javascript

Some of the Bootstrap code snippets use Javascript code, for client-side animations and general functionality. The theme does not include this code for you, because generally it would be quite wasteful to call scripts which are not required, and ultimately increases the risk of conflicts with other RapidWeaver addons. Instead, Bootstrap snippets that require Javascript code will state this in the snippet.

Typically all Bootstrap code snippets with dependancy on Javascript will need the following added to a page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../../rw_common/themes/flood/bootstrap/js/bootstrap.min.js"></script>

The first line calls jQuery. This can either be a version of jQuery hosted on Google API's or alternatively you can use the version of jQuery in the theme contents:

<script src="%pathto(core/jquery-1.min.js)%"></script>

It's best to use a later version of jQuery 1 (like jquery 1.8), because this has the widest web browser compatibility (jQuery 2 drops support for Internet Explorer 7 and Internet Explorer 8). The second line calls the bootstrap.js file from the theme. This single compressed Javascript file contains all the basic functionality required for Bootstrap snippets with a Javascript dependency.

For basic Bootstrap snippets like the Accordion and Modal, this is all that you need to add to the page. It's best to put these two Javascript calls once somewhere on the page; the RapidWeaver Custom Header (pictured below) or at the bottom of your page content are good locations. Do not place these two Javascript calls in the Custom Javascript box. If you're building a custom RapidWeaver theme for a project, then you could quite easily add these two calls at the bottom of the theme index.html file, so they are included on all pages.

Bootstrap Javascript

More complex Bootstrap code snippets require additional Javascript code, in addition to the two calls discussed above. This extra Javascript is often needed, so that you can set variables and control what page elements a particular effect needs to take place on. Typically snippets like the image carousel, tooltips and popovers need this extra code. This extra Javascript code should be wrapped inside new script tags, and come immediately after your jQuery and Bootstrap calls like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../../rw_common/themes/flood/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.carousel').carousel({
        interval: 5000,
        pause: "hover"
    })
});
</script>

The picture below shows what this code would look like in the RapidWeaver Custom Header box, in the Page Inspector.

Bootstrap Javascript complete

We use the jQuery (document).ready() event handler, so that the code only fires once the page is loaded. Then typically you can just follow the same instructions provided on the Bootstrap website and adjust any variables you like. The example above is taken from the image carousel snippet, and as you can see, this is where you would be able to customise the interval (slider speed) and make the slider pause on hover.

On occasions, you may need to use multiple Bootstrap snippets on the same page and wire-them-up to the same Javascript calls. This is safe to do and the most efficient way is to wrap the extra Javascript code into the jQuery (document).ready() event handler like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../../rw_common/themes/flood/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
    $('#content').tooltip({
        html: true,
        selector: "a[data-toggle=tooltip]"
    })

    $("a[data-toggle=popover]")
    .popover({
        html: true,
        trigger: "hover"
    })

    $('.carousel').carousel({
        interval: 5000,
        pause: "hover"
    })
});
</script>

This method reduces the need for multiple jQuery and bootstrap.js calls, while still allowing the extra Javascript code for each Bootstrap component to run correctly.

The role of CSS resets in Bootstrap

For a couple of versions now, Bootstrap has included the Normalize.css CSS reset. What does a reset do? The basic idea of a reset is to make web browsers render all elements more consistently and in line with modern standards. If you create a webpage that has no styling, you'll often find Times New Roman is still applied as the font face, text will be black, links will be blue and underlined, headings will be shown in different sizes with bold text, and lists will have built points etc. This is web browser styling being applied to the page. The problem with this styling is that different web browsers apply different styling. A prime example of this would be the difference in list item spacing and indentation between Safari and Firefox. So the purpose of a reset is to target and reset the styling of many common elements back to a more neutralised, baseline format. From then on, Bootstrap itself or the theme can redefine these styles. Everything should appear almost identical in different web browsers, from then on. There's a good article here which discusses the topic of CSS resets in much more detail.

Provide Feedback

Please use this form to provide feedback about this particular knowledgebase article. For example; to report broken links, errors or things you think could be worded better. We welcome all constructive feedback. All fields are required.

 

Feedback is submitted anonymously (unless you otherwise provide your name or contact details). We don't promise to reply to every feedback message received; neither is this a good place to request technical support. You can continue to request one-to-one support through the ThemeFlood website. See getting in contact for details.