Bootstrap Login Form Page Template Example

by Vincy. Last modified on July 19th, 2022.

The login system is for authenticating users before letting them access the application services. It authorizes users to access the privileged pages of the applications.

There are two important things to keep in mind while implementing login authentication.

  1. Follow familiar mechanism and login flow
  2. Present form UI elements with clarity

Authentication can be done in various ways. Some of them are listed below.

  1. Username/email and password
  2. Mobile number based OTP authentication
  3. 2FA authentication
  4. Face detection authentication
  5. Voice recognition based authentication
  6. Code dictation based authentication

It’s preferable to implement the most familiar way followed across the world. In the above list, the first one is the most common method to collect the username and password from users. So, this way gives more familiarity and clarity to the users.

As an entry point, the login page should present the UI as simple as possible to let users sign in easily. I prefer to use a front-end tool like Bootstrap to present a good-looking login form.

This article will give you 3 awesome Bootstrap login form templates. It also has created the backend code in PHP to process login. The login page is responsive to fit into various devices’ viewport. There are more templates online to provide the HTML script for a Bootstrap login form.

Login form components

A login form may contain the following elements. Bootstrap is a suitable tool to fit these elements into a login form template with a good look and feel.

This example will show only two input fields to get the username and password. It uses external CSS to handle media queries to add responsiveness to the UI.

About the Bootstrap login form example

This Bootstrap login form example provides 3 alternative templates for the login page. In a previous tutorial, we have rendered a Bootstrap contact form to let the user contact the site admin.

It loads the Bootstrap and the FontAwsome libraries with a common layout. This layout embeds PHP to include the login form child template.

Loading the login template is dynamic based on the param passed in the login page query string.

All three templates share one common backend engine to process login in PHP. The backend includes a session-based login script to proceed authentication process.

This screenshot shows the file structure of the Bootstrap login form example. It shows the location of the login templates created for this example.

The images folder shows the background images for the login page HTML containers.

After login, it validates the existence of the user session to show the welcome message.

Bootstrap Login Form Example Files

Login page layout HTML code

This is the common layout for all three login templates. This layout contains the required JavaScript, CSS includes loading Bootstrap 5.

It uses the Font-Awesome toolkit to enrich the login page to show icons in a suitable place.

The login page URL will contain a query string ?i= to pass the numeric value 1,2 or 3. This HTML embeds PHP to get this value to render the appropriate login form into the UI.

If no value passed, the PHP puts a default value to load Bootstrap login form template 1. It interpolates the variable $template into the login page template path.

index.php (Common parent template to render Bootstrap Login form)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css"
    crossorigin="anonymous">
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<link href="vendor/fontawesome/css/all.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<?php
if (! empty($_GET["i"])) {
    $template = intval($_GET["i"]);
}
if (empty($template)) {
    $template = 1;
}
require_once __DIR__ . '/template/login-template' . $template . '.php';
?>
</body>
</html>

Templates for login page

The below HTML templates are for showing the Bootstrap login form in various designs. This section shows the output screenshot of each login page template below the HTML code.

Template 1

template/login-template1.php

<div id="template-bg-1">
    <div
        class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
        <div class="card p-4 text-light bg-dark mb-5">
            <div class="card-header">
                <h3>Sign In</h3>
            </div>
            <div class="card-body w-100">
                <form name="login" action="" method="post">
                    <div class="input-group form-group mt-3">
                        <div class="bg-secondary rounded-start">
                            <span class="m-3"><i
                                class="fas fa-user mt-2"></i></span>
                        </div>
                        <input type="text" class="form-control"
                            placeholder="username" name="username">
                    </div>
                    <div class="input-group form-group mt-3">
                        <div class="bg-secondary rounded-start">
                            <span class="m-3"><i class="fas fa-key mt-2"></i></span>
                        </div>
                        <input type="password" class="form-control"
                            placeholder="password" name="password">
                    </div>

                    <div class="form-group mt-3">
                        <input type="submit" value="Login"
                            class="btn bg-secondary float-end text-white w-100"
                            name="login-btn">
                    </div>
                </form>
                <?php if(!empty($loginResult)){?>
				<div class="text-danger"><?php echo $loginResult;?></div>
				<?php }?>
			</div>
            <div class="card-footer">
                <div class="d-flex justify-content-center">
                    <div class="text-primary">If you are a registered
                        user, login here.</div>
                </div>
            </div>
        </div>
    </div>
</div>

Bootstrap Login Template1

Template 2

template/login-template2.php

<div class="sidenav">
    <div class="text-white m-5">
        <h1>
            User Login<br />Authentication
        </h1>
        <p>
            Enter your login details<br /> to get into the application.
        </p>
    </div>
</div>
<div class="main">
    <div
        class="d-flex flex-column justify-content-center align-items-center">
        <div class="col-md-6 col-sm-12">
            <div class="login-form">
                <form name="login" action="" method="post" class="m-3">
                    <div class="form-group">
                        <label>User Name</label> <input type="text"
                            class="form-control mt-1 mb-3"
                            placeholder="User Name" name="username">
                    </div>
                    <div class="form-group  mb-3">
                        <label>Password</label> <input type="password"
                            class="form-control mt-1"
                            placeholder="Password" name="password">
                    </div>
                    <input type="submit"
                        class="btn text-white bg-dark  w-25 login"
                        value="Login" name="login-btn">
                  <?php if(!empty($loginResult)){?>
                <div class="text-danger"><?php echo $loginResult;?></div>
                <?php }?>
            </form>
            </div>
        </div>
    </div>
</div>

Bootstrap Login Template2

Template 3

template/login-template3.php

<div
    class="d-flex flex-column min-vh-100 justify-content-center align-items-center"
    id="template-bg-3">
    <div class="card mb-5 p-5  bg-dark bg-gradient text-white col-md-4">
        <div class="card-header text-center">
            <h3>Login</h3>
        </div>
        <div class="card-body mt-3">
            <form name="login" action="" method="post">
                <div class="input-group form-group mt-3">
                    <input type="text"
                        class="form-control text-center p-3"
                        placeholder="Username" name="username">
                </div>
                <div class="input-group form-group mt-3">
                    <input type="password"
                        class="form-control text-center p-3"
                        placeholder="Password" name="password">
                </div>
                <div class="text-center">
                    <input type="submit" value="Login"
                        class="btn btn-primary mt-3 w-100 p-2"
                        name="login-btn">
                </div>
            </form>
                <?php if(!empty($loginResult)){?>
                <div class="text-danger"><?php echo $loginResult;?></div>
                <?php }?>
            </div>
        <div class="card-footer p-3">
            <div class="d-flex justify-content-center">
                <div class="text-primary">If you are a registered user,
                    login here.</div>
            </div>
        </div>
    </div>
</div>

Bootstrap Login Template3

These are the external styles to add login page backgrounds. It also contains the media queries to make the Bootstrap login form responsive.

assets/css/style.css

/* Template 1 style */
#template-bg-1 {
	background-image: url('../../images/template-bg-1.jpg');
}

/* Template 2 style */
.sidenav {
	height: 100%;
	overflow-x: hidden;
	padding-top: 20px;
	background-image: url('../../images/side-nav-bg.jpg');
}

.main {
	padding: 0px 10px;
}

/* Template 3 style */
#template-bg-3 {
	background-image: url('../../images/template-bg-3.jpg');
}

/* Welcome page style */
.bg-image {
	background-image: url('../../images/welcome-page-bg.jpg');
}

/* Template 1 media queries begins */
@media screen and (min-width:300px) and (max-width: 400px) {
	.container {
		width: 100% !important;
		display: initial;
	}
}

/* Template 2 media queries */
@media screen and (max-height: 450px) {
	.sidenav {
		padding-top: 15px;
	}
}

@media screen and (max-width: 450px) {
	.login-form {
		margin-top: 10%;
	}
}

@media screen and (max-width: 924px) {
	.login {
		width: 145px !important;
	}
}

@media screen and (min-width: 768px) {
	.main {
		margin-left: 40%;
	}
	.sidenav {
		width: 40%;
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
	}
	.login-form {
		margin-top: 80%;
	}
}

/* Template 3 media queries */
@media screen and (min-width:768px) and (max-width: 980px) {
	.card {
		width: 50% !important;
		display: initial;
	}
}

Login page submit action in PHP

There are more things to build a secure login authentication system. But, this example creates a simple PHP script to verify the entered details with the database

This is a routine PHP code to handle session-based user authentication. It is common for the simple login form with the username and password. No matter whether it is a Bootstrap login form or not.

It imports the Member model class to call the login authentication function. The model class defines the loginMember() to receive the login details posted via the form.

It validates the username and password with the member database. This PHP receives the response from the loginMember() function.

index.php (Call the login function)

<?php
use Phppot\Member;
if (! empty($_POST["login-btn"])) {
    require_once __DIR__ . '/lib/Member.php';
    $member = new Member();
    $loginResult = $member->loginMember();
}
?>

This Member model class connects the database to get the connection object. When the user logs in, it verifies if the username exists. If so, then it verifies the posted password with the encrypted password in the database.

After successful login, it adds the logged-in state into the PHP session. Otherwise, it returns an error message to ask the user to try again.

lib/Member.php

<?php
namespace Phppot;

class Member
{

    private $ds;

    function __construct()
    {
        require_once __DIR__ . '/../lib/DataSource.php';
        $this->ds = new DataSource();
    }

    public function getMember($username)
    {
        $query = 'SELECT * FROM tbl_member where username = ?';
        $paramType = 's';
        $paramValue = array(
            $username
        );
        $memberRecord = $this->ds->select($query, $paramType, $paramValue);
        return $memberRecord;
    }

    public function loginMember()
    {
        $memberRecord = $this->getMember($_POST["username"]);
        $loginPassword = 0;
        if (! empty($memberRecord)) {
            if (! empty($_POST["password"])) {
                $password = $_POST["password"];
            }
            $hashedPassword = $memberRecord[0]["password"];
            $loginPassword = 0;
            if (password_verify($password, $hashedPassword)) {
                $loginPassword = 1;
            }
        } else {
            $loginPassword = 0;
        }
        if ($loginPassword == 1) {
            // login sucess so store the member's username in
            // the session
            session_start();
            $_SESSION["username"] = $memberRecord[0]["username"];
            $_SESSION["name"] = $memberRecord[0]["name"];
            session_write_close();
            $url = "home.php";
            header("Location: $url");
        } else if ($loginPassword == 0) {
            $loginStatus = "Invalid username or password.";
            return $loginStatus;
        }
    }
}

Welcome screen from login page

By entering the login details, the submit action calls PHP to display the login result. This is the successful response of the Bootstrap login form action.

It displays a welcome message by addressing the logged-in user. It loads the user’s display name from the session.

Before showing the UI, it verifies the logged-in session. If the session is not empty, then it will display the welcome screen. Otherwise, it will redirect the user back to the Bootstrap login form.

home.php

<?php
session_start();
if (! empty($_SESSION["name"])) {
    $name = $_SESSION["name"];
} else {
    session_unset();
    $url = "./index.php";
    header("Location: $url");
}
session_write_close();
?>
<HTML>
<HEAD>
<TITLE>Welcome</TITLE>
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css"
    crossorigin="anonymous">
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<link href="vendor/fontawesome-free-5.15.3-web/css/all.css"
    rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<style>
</style>
</HEAD>
<BODY class="bg-image">
    <div class="row">
        <div class="col-md-12 text-center mt-5">
            <h1>Welcome to the application, <?php echo $name;?>!</h1>
        </div>
    </div>
</BODY>
</HTML>

Welcome Page

Bootstrap Login – Test data

The following are the steps to run this example in your environment.

  1. Download the code and unzip it into your PHP environment.
  2. Import the database script and configure the database in the DataSource class
  3. Use these login details to test the login.
    • username – admin
    • password – admin123

Database script

Import this .sql file into your database and configure the details in the DataSource.php. This is an important step to run this example in your local computer.

This script includes the create statement and the insert query for the member table. The member table contains the username, password and the display name columns.

database.sql

--
-- Table structure for table `tbl_member`
--

CREATE TABLE `tbl_member` (
  `id` int(11) NOT NULL,
  `username` varchar(255) NOT NULL,
  `password` varchar(200) NOT NULL,
  `create_at` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_member`
--

INSERT INTO `tbl_member` (`id`, `username`, `password`, `create_at`) VALUES
(1, 'admin', '$2y$10$3ZnwXA1hl0oSTOmnRC7KRu4jh0d8eVsZfIWpT.6nPuuvpb.MU96tW', '2021-08-05 07:48:40'),
(2, 'user', '$2y$10$3ZnwXA1hl0oSTOmnRC7KRu4jh0d8eVsZfIWpT.6nPuuvpb.MU96tW', '2021-08-05 07:49:01');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_member`
--
ALTER TABLE `tbl_member`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_member`
--
ALTER TABLE `tbl_member`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;	

Conclusion

Thus the Bootstrap login form is created simply with such a popular UI library. This example with UI and backend code gives an end-to-end solution for authentication.

The basic Bootstrap template for the login page is easily customizable. You may also add additional features like Remember Me or Forgot Password. The article interlinks the example code for creating these features.

Share your suggestions and questions in the comments section.
Download

Comments to “Bootstrap Login Form Page Template Example”

  • Dan says:

    looks good, but when implementing it I am still being redirected to index.php on successful log on
    it recognises the password as correct but either the session isn’t set or something else is wrong.
    It goes to home.php but home.php is redirecting to index.php

    • Vincy says:

      Hi Dan,

      Can you print the session variable and check if it is set.

    • Marc says:

      The table misses the column ‘name’; which line 47 of ‘Member.php’ requires: $_SESSION[“name”] = $memberRecord[0][“name”];

Leave a Reply to Vincy Cancel reply

Your email address will not be published. Required fields are marked *

↑ Back to Top

Share this page