Bootstrap Tutorial for Beginners – Step by Step Guide!

bootstrap-tutorial-beginners-step-step

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

I love Bootstrap because it solves a problem that I have. I'm not good with designing web app user interfaces. That is why I made this Bootstrap tutorial for beginners.

As a proof, you can see that I'm using Bootstrap for my online tools site. We are using Bootstrap in many of our 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 was created in Twitter. It was called Twitter Bootstrap to streamline their development. Thanks to these people, the library is still in active development.

This Bootstrap tutorial for beginners will cover the following:

1.0 Include Bootstrap via CDN
2.0 Write HTML5 boilerplate
3.0 Include Bootstrap CSS
4.0 Include Bootstrap JavaScript
5.0 Add a navigation bar
6.0 Add navigation links
7.0 Add a dropdown
8.0 Add a search form
9.0 Add a content container
10.0 Add a heading
11.0 Add a table
12.0 Add form elements to a table
13.0 Add an alert message
14.0 Download source code
15.0 Bootstrap online resources
16.0 What's next?
17.0 Related tutorials
18.0 Some notes

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

1.0 Include Bootstrap via CDN

We will use a CDN or Content delivery network to enable Bootstrap on our page.

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

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>

	<!-- Bootstrap CSS will be here -->
</head>
<body>

<!-- navigation bar will be here -->
<!-- container bar will be here -->

<!-- Bootstrap JavaScript will be here -->

</body>
</html>

Our output on this section is a blank page. We do not have any contents inside the body tags. Comments are not displayed, of course.

But if we view the source, we actually made some progress!

3.0 Include Bootstrap CSS

On index.html file, replace <!-- Bootstrap CSS will be here --> with the following code.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

The integrity and crossorigin attributes are needed for security purposes. The answers in this question can explain it better.

Our output is still a blank page. All we can do for now is view the source to see if it was updated.

4.0 Include Bootstrap JavaScript

Bootstrap features like the navigation bar need the Bootstrap JavaScript file.

On index.html file, replace <!-- Bootstrap JavaScript will be here --> with the following code.

<!-- javascript for bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
	integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
	integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
	integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>

Output? Still a blank page. But let's view the source.

5.0 Add a navigation bar

Bootstrap Navbar, also called navigation header, is so cool. They look good on desktop and on any mobile device. Your users won't get lost on your website if you use them properly.

On index.html file, replace <!-- navigation bar will be here --> with the following code.

<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
	<a class="navbar-brand" href="#">Navbar</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
		aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>

	<!-- navigation links will be here -->
</nav>
<!-- /navbar -->

Output? Yes! This is the first time (in this tutorial) that we will see something on the page.

6.0 Add navigation links

On index.html file, replace <!-- navigation links will be here --> with the following code.

<div class="collapse navbar-collapse" id="navbarSupportedContent">
	<ul class="navbar-nav mr-auto">
		<li class="nav-item active">
			<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="https://www.codeofaninja.com/2014/05/bootstrap-tutorial-beginners-step-step.html" target="_blank">Tutorial</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="https://www.codeofaninja.com" target="_blank">Blog</a>
		</li>
		<!-- drop down will be here -->
	</ul>
	<!-- search form will be here -->
</div>

Our output shows navigation links on the Navbar.

7.0 Add a drop down

On index.html file, replace <!-- drop down will be here --> with the following code.

<li class="nav-item dropdown">
	<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
		data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropdown
	</a>
	<div class="dropdown-menu" aria-labelledby="navbarDropdown">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Something else here</a>
	</div>
</li>

Our output shows a drop down on the Navbar. Cool!

8.0 Add a search form

On index.html file, replace <!-- search form will be here --> with the following code.

<form class="form-inline my-2 my-lg-0">
	<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
	<button class="btn btn-primary my-2 my-sm-0" type="submit">Search</button>
</form>

Output shows an input box and a search button on the upper right side corner of our page.

9.0 Add content container

A Bootstrap Container is required to make our web page responsive.

On index.html file, replace <!-- container will be here --> with the following code.

<div class="container mt-5">
	<!-- heading will be here -->
	<!-- alert will be here -->
	<!-- table will be here -->
</div>

You can replace the class container with a container-fluid if you want the container to have a full width.

Nothing has changed on our output. But if you will view the source, you can see the div tag with container class.

10.0 Add a heading

A Bootstrap Heading is important because it tells the user what page he was in.

On index.html file, replace <!-- heading will be here --> with the following code.

<div class="row">
	<div class="col-sm">
		<h1>Bootstrap Sample Page with Form</h1>
	</div>
</div>

As you may have noticed, we used a div tag with a row and then col-sm 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.

Output shows our heading.

11.0 Add a table

Our Bootstrap Table will hold form elements like a text box. The Bootstrap table looks good and has hover effects as well.

On index.html file, replace <!-- table will be here --> with the following code.

<div class="row">
	<div class="col-sm">
		
		<table class='table table-hover'>

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

Our output shows a table with a few information.

12.0 Add form elements to a table

Our Bootstrap Form example will have a few text boxes, a text area, a select drop-down list and a submit button.

On index.html file, remove the code from opening <table> tag to closing </table> table. Replace it with the following code.

<form action='#' method='post'>
	<table class='table table-hover'>

		<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>
				<button type="submit" class="btn btn-primary">
					<span class="glyphicon glyphicon-plus"></span> Submit
				</button>
			</td>
		</tr>

	</table>
</form>

Our output shows our HTML form.

13.0 Add an alert message

Bootstrap Alerts are a nice way to get your user's attention. Here's how to add a good looking alert message.

On index.html file, replace <!-- alert will be here --> with the following code.

<div class="row">
	<div class="col-sm">
		<div class="alert alert-success">
			<strong>Good day!</strong> This is an example alert. Visit <a href="https://codeofaninja.com/" target="_blank">codeofaninja.com</a>!
		</div>
	</div>
</div>

Output below shows an alert message.

To change alert colors, you may replace alert-success with alert-info, alert-danger or alert-warning.

14.0 Download Source Code

We try to update our tutorials as frequently as possible. We try to answer all your questions as well. This job is not easy as you may think.

Support our site by downloading the source code. You can download the source 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!

18.0 Related Tutorials

18.0 Some Notes

#1 Found An Issue?

If you found a problem with this code, please write a comment below. Please be descriptive about your issue. Please provide the error messages, screenshots (or screencast) and your test URL. Thanks!

Before you write a comment, remember to read this guide and our code of conduct.

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

Before you write a comment, please read this guide and our code of conduct.
27 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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