How to Design Form Login Pup Up Using Bootstrap

1. Folder Structure

/your-project-folder
│── /image
│   └── picture.png  (Replace this with your avatar image)
│── index.php
│── style.css

2. `index.php`

This file contains the login modal popup.

<!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>Login PHP</title>

    <!-- External Styles and Scripts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="text-center">
        <!-- Button to Open Modal -->
        <a href="#myModal" class="trigger-btn btn-lg text-bold" data-toggle="modal">Click Login Popup</a>
    </div>

    <!-- Login Modal -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog modal-login">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="avatar">
                        <img src="image/picture.png" alt="Avatar">
                    </div>
                    <h4 class="modal-title">Login</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <form action="index.php" method="POST">
                        <div class="form-group">
                            <input type="text" class="form-control" name="username" placeholder="Username" required>
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" name="password" placeholder="Password" required>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-outline-success btn-lg btn-block login-btn">Login</button>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <a href="#">Forgot Password?</a>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

3. `style.css`

This file styles the login modal.

body {
    font-family: 'Varela Round', sans-serif;
    background-color: #f8f9fa;
}

.modal-login {
    color: #636363;
    width: 350px;
}

.modal-login .modal-content {
    padding: 20px;
    border-radius: 5px;
    border: none;
}

.modal-login .modal-header {
    border-bottom: none;
    position: relative;
    justify-content: center;
    text-align: center;
}

.modal-login h4 {
    font-size: 26px;
    margin: 30px 0 -15px;
}

.modal-login .form-control:focus {
    border-color: #70c5c0;
}

.modal-login .form-control, .modal-login .btn {
    min-height: 40px;
    border-radius: 3px;
}

.modal-login .close {
    position: absolute;
    top: -5px;
    right: -5px;
}

.modal-login .modal-footer {
    background: #ecf0f1;
    text-align: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 13px;
}

.modal-login .modal-footer a {
    color: rgba(90, 86, 86, 0.61);
}

.modal-login .avatar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -70px;
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background: #1ea2ca;
    padding: 15px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.658);
}

.modal-login .avatar img {
    width: 100%;
}

.modal-login .btn {
    color: #fff;
    background: #ff0000;
    border: none;
    transition: all 0.4s;
}

.modal-login .btn:hover, .modal-login .btn:focus {
    background: #7829b8c0;
    outline: none;
}

.trigger-btn {
    display: inline-block;
    margin: 100px auto;
}

4. Image File (`image/picture.png`)

You need to add an image file named picture.png inside the image/ folder.
This will be used as the avatar in the modal.

How It Works

You will see a "Click Login Popup" button when the page loads.
Clicking the button will open the login modal.
The modal contains:
- An avatar image.
- A form with Username and Password fields.
- A Login button.
- A Forgot Password link.
You can enter login details and submit the form.

Let me know if you need any changes!

Souy Soeng

How to Design Form Login Pup Up Using Bootstrap

1. Folder Structure

2. `index.php`

3. `style.css`

4. Image File (`image/picture.png`)

How It Works

Post a Comment

Souy Soeng

How to Design Form Login Pup Up Using Bootstrap

1. Folder Structure

2. index.php

3. style.css

4. Image File (image/picture.png)

How It Works

Post a Comment

2. `index.php`

3. `style.css`

4. Image File (`image/picture.png`)