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

Adding References

That sure looks good, but we still haven’t told our index.html file to use any of those files. For the sake of simplicity, we will replace the contents of that file with a barebones html file first:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery and Bootstrap</title>
</head>
<body>
 
   <!-- // Your code will appear here. -->

</body>
</html>

Then, just drag and drop each file from the project navigator section to the code, inside the </head> tags, as you can see in the following screencast. Make sure that the reference to jQuery appears before the reference to Bootstrap because the latter depends on the former:

That’s it – you have added the references to both jQuery and Bootstrap, and can now start writing code.

Writing Your First Responsive Code

Let’s now add a navigation bar and place it at the top of our page. Feel free to include 4-5 links with dummy text and don’t link it to any document for the time being – just insert the following code snippet inside the body of the document.

Don’t forget to spend some time become acquainted with the auto-completion feature in Netbeans, which will show you the classes made available by Bootstrap as you start typing.

At the heart of the code snippet below is the Bootstrap container class, which is used to place content inside of a horizontal container which will automatically resize depending on the size of the screen where it is being viewed. Not less important is the container-fluid class, which will ensure that the content within will occupy the entire width of the screen.

<div class="container">
  	<nav class="navbar navbar-default">
    	<div class="container-fluid">
      	<div class="navbar-header">
        	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          	<span class="sr-only">Toggle navigation</span>
          	<span class="icon-bar"></span>
          	<span class="icon-bar"></span>
          	<span class="icon-bar"></span>
        	</button>
        	<a class="navbar-brand" href="#">Project name</a>
      	</div>
      	<div id="navbar" class="navbar-collapse collapse">
        	<ul class="nav navbar-nav">
          	<li class="active"><a href="#">Home</a></li>
          	<li><a href="#">About</a></li>
          	<li><a href="#">Contact</a></li>
          	<li class="dropdown">
            	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            	<ul class="dropdown-menu">
              	<li><a href="#">Action</a></li>
              	<li><a href="#">Another action</a></li>
              	<li><a href="#">Something else here</a></li>
              	<li role="separator" class="divider"></li>
              	<li class="dropdown-header">Nav header</li>
              	<li><a href="#">Separated link</a></li>
              	<li><a href="#">One more separated link</a></li>
            	</ul>
          	</li>
        	</ul>
      	</div><!--/.nav-collapse -->
    	</div><!--/.container-fluid -->
  	</nav>
</div>

Another distinguishing feature of Bootstrap is that it eliminates the need for tables in HTML code. Instead, it uses a grid system to layout content and make it look properly both on large and small devices (from phones all the way to big desktop or laptop screens).

In Bootstrap’s grid system, the screen layout is divided in 12 columns:

Bootstrap Grid Layout
Bootstrap Grid Layout

A typical setup consists of using the 12-column layout divided into 3 groups of 4 columns each, as follows:

Bootstrap Column Layout
Bootstrap Column Layout

To indicate this fact in code, and in order to have it displayed that way starting in medium-size devices (such as laptops) and above, add the following code below the closing </nav> tag:

...
    </nav>
   	 <div class="row">
   	 	<div class="col-md-4">This is the text in GROUP 1</div>
   	 	<div class="col-md-4">This is the text in GROUP 2</div>
   	 	<div class="col-md-4">This is the text in GROUP 3</div>
   	 </div>
</div> <!--Closing tag of the container class -->

You must have probably noticed that the column classes in the Bootstrap grid indicate the starting layout for a specific device size and above, as md in this example stands for medium (which also covers lg, or large devices).

For smaller devices (sm and xs), the content divs gets stacked and appears one above the next.

In the following screencast you can see how your page should look by now. Note that you can resize your browser’s window to simulate different screen sizes after launching the project using the Run project button as we learned in Part 1.

Summary

Congratulations! You must have written a simple, yet functional, responsive page by now. Don’t forget to check the Bootstrap website in order to become more familiar with the almost-limitless functionality of this framework.

As always, in case you have a question or comment, feel free to contact us using the form below.

If you liked this article, then do subscribe to email alerts for Linux tutorials. If you have any questions or doubts? do ask for help in the comments section.

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

TecMint is the fastest growing and most trusted community site for any kind of Linux Articles, Guides and Books on the web. Millions of people visit TecMint! to search or browse the thousands of published articles available FREELY to all.

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Support Us

We are thankful for your never ending support.

2 thoughts on “Adding jQuery and Bootstrap to Write a Mobile-Friendly and Responsive Web Application”

  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!

    Reply

Got something to say? Join the discussion.

Have a question or suggestion? Please leave a comment to start the discussion. Please keep in mind that all comments are moderated and your email address will NOT be published.

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