Bootstrap Tutorial for Beginners – Step by Step Guide!

bootstrap-tutorial-beginners-step-step

Bootstrap is a very useful front-end framework for faster and easier web development. You won’t have to worry about having a decent user interface when you use it.

I personally love this framework because I’m not into designing web app user interfaces, it solves a pain in me. That is why I made this Bootstrap tutorial for beginners.

In fact, you can see my download and online tools sites. They are using Bootstrap.

We are using Bootstrap for web application tutorials as well. One example is our PHP, MySQL and OOP CRUD Tutorial – Step By Step Guide!

Here are some good looking websites or web apps built with the help of bootstrap: http://expo.getbootstrap.com

Just a little history, Bootstrap is created in twitter, it was called Twitter Bootstrap to streamline their development. Thanks to these people, the framework is still in active development.

This Bootstrap tutorial for beginners will cover the following:

1.0 Download or Include Bootstrap
2.0 Write Basic HTML Code
3.0 Include Bootstrap CSS
4.0 Include jQuery Library
5.0 Include Bootstrap JavaScript
6.0 Add IE8 support for HTML5 and media queries
7.0 Add a Navigation Bar
8.0 Add Page Content Container.
9.0 Add a Heading
10.0 Add a Table
11.0 Add a Form Inside a Table
12.0 Add a Bootstrap Button with Glyphicon
13.0 Add a Good Looking Message Box
14.0 Final Code and Live Demo
15.0 Online Resources
16.0 What’s Next?
17.0 Related Tutorials
18.0 Some Notes

If you follow and complete the tutorial, you will achieve the following output:

The following sections will be your step by step guide to your first web development with Bootstrap.

1.0 Download or Include Bootstrap

There are two ways to use Bootstrap in a webpage.

The first way is to use a CDN or Content delivery network. Using bootstrap CDN means that we will not download and store the bootstrap files in our server or local machine. We will just include the bootstrap CSS and JavaScript links on our page.

The second way is downloading and storing a copy Bootstrap files in our web server or local machine. You can download bootstrap here.

I will show you how to use both in the next few sections below.

2.0 Write HTML5 Boilerplate

Create new index.html file. Open the file, place the following code and save it.

<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Live Demo of Bootstrap Tutorial for Beginners</title>

</head>
<body>

</body>
</html>

3.0 Include Bootstrap CSS

Place either of the following code between the “head” tags and under “closing title” tag.

If you want to use the Bootstrap CDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

If you want to use your own copy of Bootstrap:

<link rel="stylesheet" href="bootstrap-3.3.6/css/bootstrap.min.css">

Make sure you downloaded bootstrap and put it in the same directory as your index.html, in my case, it is in the “bootstrap-3.3.6” folder.

4.0 Include jQuery Library

Yes, we still have jQuery here. jQuery is necessary to make Bootstrap JavaScript features work.

If you want to learn more about jQuery, we have our useful jQuery Tutorial for Beginners here.

Place the either of the following code before the “closing body” tag.

If you want to use the jQuery CDN:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

If you want to use your own copy of jQuery:

<script src="jquery-3.0.0.min.js"></script>

Make sure you downloaded jQuery and put it in the same directory as your index.html, in my case, the jQuery filename is “jquery-3.0.0.min.js”.

5.0 Include Bootstrap JavaScript

Bootstrap features like the navigation bar need the Bootstrap JavaScript file. Place the following code after the previous section’s code.

If you want to use the Bootstrap CDN:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

If you want to use your own copy of Bootstrap:

<script src="bootstrap-3.3.6/js/bootstrap.min.js"></script>

6.0 Add IE8 support for HTML5 and media queries

Bootstrap 3 is also a framework that is highly concerned with the mobile arena. It is responsive to different devices and screen sizes. Place the following code after the previous section’s code.

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

7.0 Add a Navigation Bar

Navigation bars are so cool. Your users won’t get lost on your website if you use them properly. Place the following code under the “opening body” tag.

<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">

		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<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="http://yourwebsite.com/">Home</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">
				<li class="active">
					<a href="#">All</a>
				</li>
				<li>
					<a href="#">Demo</a>
				</li>
				<li>
					<a href="#">Contact</a>
				</li>
			</ul>
		</div><!--/.nav-collapse -->

	</div>
</div>

8.0 Add Page Content Container.

This “div” tag will contain and hold our web site’s content. It is important because it defines the width of our content page. Our content won’t be scattered when the visitor is using large screen size.

Place the following code under the previous section’s code.

<div class="container">

</div>

9.0 Add a Heading

The heading is important because it tells the user what page he was in. Place the following code between the “container div” tags of the previous section.

<div class="col-md-12">
	<div class="page-header">
		<h1>Bootstrap Sample Page with Form</h1>
	</div>
</div>

As you may have noticed, we used a “div” tag with a “col-md-12” class. This class enables the Bootstrap Grid System. Grid systems are used for creating page layouts through a series of rows and columns that house your content.

See examples of Bootstrap Grid here and here.

10.0 Add a Table

In this example, we have a table that will hold form elements like a text box. The bootstrap table looks good, has hover effect and is also responsive. Place the following code under the previous section’s code.

<div class="col-md-12">
<table class='table table-hover table-responsive table-bordered'>

	<tr>
		<td>Name</td>
		<td></td>
	</tr>

	<tr>
		<td>Contact Number</td>
		<td></td>
	</tr>

	<tr>
		<td>Address</td>
		<td></td>
	</tr>

	<tr>
		<td>List</td>
		<td>
		</td>
	</tr>

	<tr>
		<td></td>
		<td>

		</td>
	</tr>

</table>
</div>

11.0 Add a Form Inside a Table

Our form example will hold few text boxes, a text area and select drop-down list. Replace the previous section’s code with the following.

<div class="col-md-12">
<form action='http://demo.codeofaninja.com/tutorials/bootstrap-tutorial-for-beginners/' method='post'>

	<table class='table table-hover table-responsive table-bordered'>

		<tr>
			<td>Name</td>
			<td><input type='text' name='name' class='form-control' required></td>
		</tr>

		<tr>
			<td>Contact Number</td>
			<td><input type='text' name='contact_number' class='form-control' required></td>
		</tr>

		<tr>
			<td>Address</td>
			<td><textarea name='address' class='form-control'></textarea></td>
		</tr>

		<tr>
			<td>List</td>
			<td>
				<select name='list_id' class='form-control'>
					<option value='1'>List One</option>
					<option value='2'>List Two</option>
					<option value='3'>List Three</option>
				</select>
			</td>
		</tr>

		<tr>
			<td></td>
			<td>
			</td>
		</tr>

	</table>
</form>
</div>

12.0 Add a Bootstrap Button with Glyphicon

Glyphicons is a library of precisely prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation.

Buttons with icons look cute. Well, at least for me. It also signals the user what the button is for. Button icon and color can easily tell what the button does in your web app.

Place the following code between the “last td tags” of the previous section.

<button type="submit" class="btn btn-primary">
	<span class="glyphicon glyphicon-plus"></span> Create New Record
</button>

13.0 Add a Good Looking Message Box

You can also add some notes in a nice way using bootstrap. Place the following code before the “opening dev tag” of the previous section.

<div class="col-md-12">
	<div class="alert alert-info">
		<strong>Heads up!</strong> This bootstrap page example is from Mike Dalisay of <a href="https://codeofaninja.com/">codeofaninja.com</a>!
	</div>
</div>

14.0 Download Source Code

If you download the source code, aside from the complete source code of the tutorial above, you will get the following as well.

Item Description
index-cdn.html Makes use of Bootstrap framework in CDN. Will work if your computer is online only.
index-local.html Makes use of a Downloaded Bootstrap framework (no CDN). Works on your localhost. Will work even if your computer is offline.

You can download all the code used in this tutorial for only $9.99 $5.55!

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

15.0 Bootstrap Online Resources

16.0 What’s Next?

Up Next: Learn jQuery Tutorial for Beginners – Step By Step Guide!

17.0 Related Tutorials

18.0 Some Notes

#1 Found An Issue?

If you found a problem with this code, we can solve it faster via Email or FB message, please send me a message via email mike@codeofaninja.com, or via our official Facebook page!

Please be more detailed about your issue. Best if you can provide an error message and your test or page URL. Thanks!

Please feel free to comment if you have any questions, suggestions, found something wrong or want to contribute to this code.

#2 Become a true Ninja!

We constantly add new tutorials and improve our existing tutorials and source codes. Be one of the first to know an update by subscribing to our FREE newsletter. Get a FREE EBOOK as well. CLICK HERE TO SUBSCRIBE FOR FREE!

#3 Thank You!

If you have a friend who need help and is getting started to learn Bootstrap, please share this article with them.

Is there anything else I can do to improve this post? Please share your thoughts on the comments section below.

Thanks for reading our bootstrap tutorial for beginners!