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 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 to 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 sections 3.0 to 5.0 below.

2.0 Write Basic HTML Code

Our basic HTML code will have the following. We name our file index.html

<!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

It will be inside the ‘head’ tag and under ‘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 for Bootstrap’s JavaScript plugins.

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

Include the jQuery library before the ending ‘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 has JavaScript source code for some reasons like animation and other functions for a better user experience.

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.

<!--[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 and can let your users know they won’t get lost on your website. It is also used for easy access of functions or commonly used pages and buttons.

<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’ will contain and hold our web site content. It is important because it defines the width of our content page so it won’t scatter the content when the user has large screen size.

under navigation

<div class="container">

</div>

9.0 Add a Heading

The heading is important since it tells the user what page he was in and what is it for.

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

10.0 Add a Table

In this example, we have a table that will hold form elements like a text box later. The bootstrap table looks good, has hover effect and is also responsive.

<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>

11.0 Add a Form Inside a Table

This is what I was talking about at section 10.0, our form example includes few text boxes, a text area and select drop-down list.

<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>

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.

<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.

<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>

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.

ItemDescription
index-cdn.htmlMakes use of Bootstrap framework in CDN. Will work if your computer is online only.
index-local.htmlMakes 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!

15.0 Bootstrap Online Resources

16.0 What’s Next?

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

17.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!