Adding jQuery and Bootstrap to Write a Mobile-Friendly and Responsive Web Application

In Part 1 of this series, we set up a basic HTML 5 project using Netbeans as our IDE, and we also presented a few elements that have been added in this new specification of the language.

Create Mobile-Friendly Responsive Websites

Create Mobile-Friendly Responsive Websites – Part 2

In few words, you can think of jQuery as a cross-browser and cross-platform Javascript library that can greatly simplify client-side scripting in HTML pages. On the other hand, Bootstrap can be described as a complete framework that integrates HTML, CSS, and Javascript tools to create mobile-friendly and responsive web pages.

In this article we will introduce you to jQuery and Bootstrap, two priceless utilities to write HTML 5 code more easily. Both jQuery and Bootstrap are licensed under the MIT and Apache 2.0 licenses, which are compatible with the GPL and are thus free software.

Please note that basic HTML, CSS, and Javascript concepts are not covered in any article of this series. If you feel you need to get up to speed with this topics first before proceeding, I highly recommend the HTML 5 tutorial in W3Schools.

Incorporating jQuery and Bootstrap into Our Project

To download jQuery, go to the project’s web site at http://jquery.com and click on the button that displays the notice for the latest stable version.

At the time of this writing it’s v1.11.3 for full-browser compatibility (including Internet Explorer versions 6, 7, and 8) or v2.1.4 if you’re sure that your visitors will not be using those versions of IE.

We will go with this second option in this guide. DO NOT click on the download link yet (the following illustration is only meant to indicate which is the right option).

Download JQuery

Download JQuery

You will notice that you can download either a compressed .min.js or an uncompressed .js version of jQuery. The first is meant specially for websites and helps reduce the load time of pages (and thus Google will rank your site better), while the second is targeted mostly at coders for development purposes.

For the sake of brevity and easiness of use, we will download the compressed (also known as minified) version to the scripts folder inside our site structure.

Right click on the link for the compressed, production version and choose Save Link As…, and then navigate to the indicated directory (you may want to refer to the path indicated where we chose to save our project in Part 1).

Finally, click Save on the bottom of the current dialog:

Save jQuery

Save jQuery

Now it’s time to add Bootstrap to our project. Go to http://getbootstrap.com and click on Download Bootstrap. On the next page, click on the highlighted option as indicated below to download the minified components, ready to use, in a zip file:

Download Bootstrap

Download Bootstrap

When the download completes, go to your Downloads folder, unzip the file, and copy the highlighted files to the indicated directories inside your project:

# cd ~/Downloads
# unzip -a bootstrap-3.3.5-dist.zip
# cd bootstrap-3.3.5-dist
Install Bootstrap

Install Bootstrap

# cp css/bootstrap.min.css /home/gabriel/NetBeansProjects/TecmintTest/public_html/styles
# cp fonts/* /home/gabriel/NetBeansProjects/TecmintTest/public_html/fonts
# cp js/bootstrap.min.js /home/gabriel/NetBeansProjects/TecmintTest/public_html/scripts

If you now expand the structure of your site in Netbeans, it should look as follows:

Site Structure in Netbeans

Site Structure in Netbeans

Best Affordable Linux and WordPress Services For Your Business
Outsource Your Linux and WordPress Project and Get it Promptly Completed Remotely and Delivered Online.

If You Appreciate What We Do Here On TecMint, You Should Consider:

  1. Stay Connected to: Twitter | Facebook | Google Plus
  2. Subscribe to our email updates: Sign Up Now
  3. Get your own self-hosted blog with a Free Domain at ($3.45/month).
  4. Become a Supporter - Make a contribution via PayPal
  5. Support us by purchasing our premium books in PDF format.
  6. Support us by taking our online Linux courses

We are thankful for your never ending support.

Gabriel Cánepa

Gabriel Cánepa is a GNU/Linux sysadmin and web developer from Villa Mercedes, San Luis, Argentina. He works for a worldwide leading consumer product company and takes great pleasure in using FOSS tools to increase productivity in all areas of his daily work.

Your name can also be listed here. Got a tip? Submit it here to become an TecMint author.

RedHat RHCE and RHCSA Certification Book
Linux Foundation LFCS and LFCE Certification Preparation Guide

You may also like...

2 Responses

  1. @Jose,
    I could not agree more! Bootstrap makes it SO easy to develop mobile-friendly and responsive web applications without the hassle of having to deal with tables and CSS. Best of luck!

  2. Greeeeat! Just what I was looking for! I was making a real mess with my website css layout, this seems pretty cool, easy to use (relatively, like the grid layout in the article) but configurable. Thanks!

Got something to say? Join the discussion.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.