Bootstrap Tutorial for Beginners – Step By Step Guide!

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.

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

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!

What students say?

Don't just take our word for it. See what our students have to say about our tutorials and source codes. We are proud to have helped many individuals and businesses to build their own applications. Here are a few of the testimonials from our satisfied students.

★★★★★ “Wow, I love you guys! The best web programming tutorial I’ve ever seen. So comprehensive, yet easy to follow. I love how you combine all necessary elements in such a neat structure.” ~ Olaug Nessa

★★★★★ “The fact that you’ve put it all together saves so much time and its worth buying the code. Makes me feel good supporting a developer like yourself. Keep up the good work!” ~ Dan Hudson

★★★★★ “Thanks for making these awesome tutorials! I bought your source codes. To be honest, it’s very readable code and helps me understand a lot of things and how it’s done in PHP. Thanks for that again.” ~ Michael Lammens

★★★★★ “Hey Mike, my name is Leonardo from Argentina. I’ve been reading your blog since like 4 months from now, and I really must say: your tutorials are very good, they has helped me in many of my works… Well, thank you very much man. I really admire your work.” ~ Leonardo

★★★★★ “Words can’t express how grateful I am for the work and the articles you post, had some troubles with doing somethings but your articles as per usual hit the hammer right on the head. They are a great way for expanding upon later too!” ~ Jeremy Smith

Got comments?

At codeofaninja.com, we strive to provide our readers with accurate and helpful Bootstrap Tutorial for Beginners – Step By Step Guide! Your feedback is essential in helping us achieve this goal.

If you have encountered any issues with the code, have suggestions for improvement, or wish to provide praise, we welcome you to leave a comment below. Please be as descriptive as possible to address your concerns effectively and include any relevant error messages, screenshots, or test URLs.

We request that comments remain on-topic and relevant to the article above. If your question or comment pertains to a different topic, we recommend seeking assistance elsewhere.

Furthermore, we ask that you review our code of conduct before commenting to ensure that your feedback is constructive and respectful.

Thank you for taking the time to provide feedback and for supporting codeofaninja.com. Your contributions help us improve our tutorials and serve the developer community better.

Subscribe for FREE!

Improve your web development skills and stay ahead of the competition by subscribing to our tutorial series. Sign up for FREE and access exclusive, cutting-edge content delivered straight to your inbox.

Take advantage of the chance to elevate your skills and advance your web development career. Subscribe now.

Thank You!

We hope you've found our Bootstrap Tutorial for Beginners – Step By Step Guide! helpful and informative. We understand that learning new programming concepts can be challenging, but we're glad we could make it easier for you.

Thank you for choosing to learn with us and for supporting codeofaninja.com! Consider sharing this tutorial with your friends and colleagues who may also be interested in learning about Bootstrap Tutorial for Beginners – Step By Step Guide!

The more people know about our tutorials, the more we can help the developer community grow. Keep learning, keep coding, and keep growing as a developer. We can't wait to see what you'll create next!

Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]

I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.