Previously, we learned how to run our first PHP script. Today we’ll learn our Bootstrap Tutorial for Beginners to make our application look presentable the fastest way possible.
Overview
Bootstrap is a CSS framework that will make your web application look good, fast, and responsive. 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 at designing web app user interfaces. That is why I made this Bootstrap tutorial for beginners.
As proof, you will see that we are using Bootstrap in most of our tutorials. 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 on Twitter. It was called Twitter Bootstrap to streamline their development. Thanks to these people, the library is still in active development.
The following sections will be your step-by-step guide to your first web development with Bootstrap.
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 on our server or the local machine. We will include the Bootstrap CSS and JavaScript links on our web page.
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>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!
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.
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.
Add a navigation bar
Bootstrap Navbar, also called navigation header, is so cool. They look good on the 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.
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.
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!
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.
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.
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.
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.
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.
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.
Bootstrap Online Resources
- The Bootstrap official website.
- Live websites built with bootstrap.
- Choose your Bootstrap themes.
- Yes, there are also Bootstrap plugins.
- Admin or dashboard themes will allow you to focus on developing the core functions of your web application. You can find Bootstrap dashboard themes here.
- If you decide to study more source codes about bootstrap and want to build a website using it, you can find Bootstrap website templates here.
What’s Next?
Now that we know how to make our web application look good and how to run a PHP script, we will learn how to create, read, update, delete, and search data from the MySQL database.
Click the following link to the next tutorial: PHP and MySQL CRUD Tutorial for Beginners – Step By Step Guide!
[adinserter block=”3″]
Leave a Reply