Frontend Free Code

Frontend Free Code

Developers Codes

Javascript Codes

Suggested Posts

Feel The Power

Bootstrap Forms:

Bootstrap Login Form Code in a Modal

Previous Code Next Code

Nowadays, most people like simplicity and are attracted to simple websites. So, you can use simpler tabs to gain more visitors. In this post, we have provided the Bootstrap Login Form Code in a Modal with an attractive design. This Free Form Code is designed for login to a website, and users can set their username and password to enter it quickly. All website owners can use this Form Code in Modal and interest people easily.

As you can see in the preview below, the design of this Modal Form Code is so simple, and you face a white page with a blue option. This option in this Bootstrap Login Form is “view modal” and is placed at the top middle of the page. As you move the mouse on it, you can see a shadow at the bottom of the option. When you click on this part, you can see a login page with an animation effect from top to down. This page has a blue theme, and you can see two colorless fields. The confirmation of this code has a blue color. If you cannot remember your password, you can select the bottom option of this Bootstrap Login Modal.

#

Free Form Code

#

Form Code in Modal

#

Modal Form Code

#

Bootstrap Login Form

#

Bootstrap Login Modal

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="modal-box">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary btn-lg show-modal" data-toggle="modal" data-target="#myModal">
                    view modal
                </button>
                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content clearfix">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <div class="modal-content clearfix">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                <div class="modal-body">
                                    <div class="modal-icon">
                                        <i class="fas fa-desktop"></i>
                                    </div>
                                    <h3 class="title">Login</h3>
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Username" name="Username" required />
                                    </div>
                                    <div class="form-group">
                                        <input type="password" class="form-control" placeholder="Password" name="Password" required />
                                    </div>
                                    <button class="btn">Free Login</button>
                                </div>
                                <div class="modal-footer">
                                    <ul>
                                        <li><a href="#">Forgot Password ?</a></li>
                                        <li><a href="#">Sign Up</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.modal-box {
    font-family: "Noto Sans JP", sans-serif;
}
.modal-box .show-modal {
    color: rgba(255, 255, 255, 0.7);
    background: linear-gradient(#00acc8, #0094b9);
    font-size: 17px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 10px 20px 11px;
    margin: 80px auto 0;
    border: none;
    outline: none;
    display: block;
    border-radius: 50px;
    transition: all 0.3s ease 0s;
}
.modal-box .show-modal:hover,
.modal-box .show-modal:focus {
    color: #fff;
    box-shadow: 7px 7px rgba(0, 0, 05, 0.1);
    outline: none;
}
.modal-backdrop.in {
    opacity: 0;
}
.modal-box .modal-dialog {
    width: 400px;
    margin: 100px auto 0;
}
.modal.fade .modal-dialog {
    transform-origin: top center;
    transform: scaleY(0);
}
.modal.in .modal-dialog {
    transform: scaleY(1);
}
.modal-box .modal-dialog .modal-content {
    color: #555;
    background: linear-gradient(45deg, #fff, #fcfcfc, #fff);
    text-align: center;
    border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.modal-box .modal-dialog .modal-content .close {
    color: rgba(255, 255, 255, 0.7);
    background-color: #0094b9;
    font-size: 16px;
    font-weight: 600;
    text-shadow: none;
    line-height: 15px;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    overflow: hidden;
    opacity: 1;
    position: absolute;
    left: auto;
    right: 5px;
    top: 5px;
    z-index: 1;
    transition: all 0.3s;
}
.modal-box .modal-dialog .modal-content .close:hover {
    color: #fff;
}
.modal-box .modal-dialog .modal-content .close:focus {
    outline: none;
}
.modal-box .modal-dialog .modal-content .modal-body {
    padding: 0 30px !important;
}
.modal-box .modal-dialog .modal-content .modal-body .modal-icon {
    color: #fff;
    background: linear-gradient(#00acc8, #0094b9);
    font-size: 40px;
    line-height: 100px;
    width: 100px;
    height: 100px;
    margin: -50px auto 35px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}
.modal-box .modal-dialog .modal-content .modal-body .title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 30px;
}
.modal-box .modal-dialog .modal-content .modal-body .title span {
    font-size: 16px;
    font-weight: 400;
}
.modal-box .modal-dialog .modal-content .modal-body .form-control {
    background-color: #e7e7e7;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    height: 45px;
    border: 2px solid #e7e7e7;
    border-radius: 50px;
    box-shadow: none;
}
.modal-box .modal-dialog .modal-content .modal-body .form-control:focus {
    background-color: #fff;
    box-shadow: none;
}
.modal-box .modal-dialog .modal-content .modal-body .btn {
    color: #fff;
    background: linear-gradient(#00acc8, #0094b9);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 100%;
    padding: 12px 10px 13px;
    margin: 25px 0 35px;
    border: none;
    border-radius: 50px;
    transition: all 0.3s ease 0s;
}
.modal-box .modal-dialog .modal-content .modal-body .btn:hover {
    text-shadow: 3px 3px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.modal-box .modal-dialog .modal-content .modal-body .btn:focus {
    outline: none;
}
.modal-box .modal-dialog .modal-content .modal-footer {
    background-color: #f5f5f5;
    text-align: center;
}
.modal-box .modal-dialog .modal-content .modal-footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.modal-box .modal-dialog .modal-content .modal-footer ul li {
    display: inline-block;
    padding: 0 10px;
}
.modal-box .modal-dialog .modal-content .modal-footer ul li:first-child {
    border-right: 1px solid #999;
}
.modal-box .modal-dialog .modal-content .modal-footer ul li a {
    color: #555;
    font-weight: 500;
    transition: all 0.3s ease 0s;
}
.modal-box .modal-dialog .modal-content .modal-footer ul li a:hover {
    color: #0094b9;
}
@media only screen and (max-width: 576px) {
    .modal-dialog {
        width: 95% !important;
    }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.modal-box {
    font-family: "Noto Sans JP", sans-serif;
}
.modal-box .show-modal {
    color: rgba(255, 255, 255, 0.7);
    background: linear-gradient(#00acc8, #0094b9);
    font-size: 17px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 10px 20px 11px;
    margin: 80px auto 0;
    border: none;
    outline: none;
    display: block;
    border-radius: 50px;
    transition: all 0.3s ease 0s;
}
.modal-box .show-modal:hover,
.modal-box .show-modal:focus {
    color: #fff;
    box-shadow: 7px 7px rgba(0, 0, 05, 0.1);
    outline: none;
}
.modal-backdrop.in {
    opacity: 0;
}
.modal-box .modal-dialog {
    width: 400px;
    margin: 100px auto 0;
}
.modal.fade .modal-dialog {
    transform-origin: top center;
    transform: scaleY(0);
}
.modal.in .modal-dialog {
    transform: scaleY(1);
}
.modal-box .modal-dialog .modal-content {
    color: #555;
    background: linear-gradient(45deg, #fff, #fcfcfc, #fff);
    text-align: center;
    border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.modal-box .modal-dialog .modal-content .close {
    color: rgba(255, 255, 255, 0.7);
    background-color: #0094b9;
    font-size: 16px;
    font-weight: 600;
    text-shadow: none;
    line-height: 15px;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    overflow: hidden;
    opacity: 1;
    position: absolute;
    left: auto;
    right: 5px;
    top: 5px;
    z-index: 1;
    transition: all 0.3s;
}
.modal-box .modal-dialog .modal-content .close:hover {
    color: #fff;
}
.modal-box .modal-dialog .modal-content .close:focus {
    outline: none;
}
.modal-box .modal-dialog .modal-content .modal-body {
    padding: 0 30px !important;
}
.modal-box .modal-dialog .modal-content .modal-body .modal-icon {
    color: #fff;
    background: linear-gradient(#00acc8, #0094b9);
    font-size: 40px;
    line-height: 100px;
    width: 100px;
    height: 100px;
    margin: -50px auto 35px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}
.modal-box .modal-dialog .modal-content .modal-body .title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 30px;
}
.modal-box .modal-dialog .modal-content .modal-body .title span {
    font-size: 16px;
    font-weight: 400;
}
.modal-box .modal-dialog .modal-content .modal-body .form-control {
    background-color: #e7e7e7;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    height: 45px;
    border: 2px solid #e7e7e7;
    border-radius: 50px;
    box-shadow: none;
}
.modal-box .modal-dialog .modal-content .modal-body .form-control:focus {
    background-color: #fff;
    box-shadow: none;
}
.modal-box .modal-dialog .modal-content .modal-body .btn {
    color: #fff;
    background: linear-gradient(#00acc8, #0094b9);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 100%;
    padding: 12px 10px 13px;
    margin: 25px 0 35px;
    border: none;
    border-radius: 50px;
    transition: all 0.3s ease 0s;
}
.modal-box .modal-dialog .modal-content .modal-body .btn:hover {
    text-shadow: 3px 3px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.modal-box .modal-dialog .modal-content .modal-body .btn:focus {
    outline: none;
}
.modal-box .modal-dialog .modal-content .modal-footer {
    background-color: #f5f5f5;
    text-align: center;
}
.modal-box .modal-dialog .modal-content .modal-footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.modal-box .modal-dialog .modal-content .modal-footer ul li {
    display: inline-block;
    padding: 0 10px;
}
.modal-box .modal-dialog .modal-content .modal-footer ul li:first-child {
    border-right: 1px solid #999;
}
.modal-box .modal-dialog .modal-content .modal-footer ul li a {
    color: #555;
    font-weight: 500;
    transition: all 0.3s ease 0s;
}
.modal-box .modal-dialog .modal-content .modal-footer ul li a:hover {
    color: #0094b9;
}
@media only screen and (max-width: 576px) {
    .modal-dialog {
        width: 95% !important;
    }
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="modal-box">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary btn-lg show-modal" data-toggle="modal" data-target="#myModal">
                    view modal
                </button>
                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content clearfix">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            <div class="modal-content clearfix">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                <div class="modal-body">
                                    <div class="modal-icon">
                                        <i class="fas fa-desktop"></i>
                                    </div>
                                    <h3 class="title">Login</h3>
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Username" name="Username" required />
                                    </div>
                                    <div class="form-group">
                                        <input type="password" class="form-control" placeholder="Password" name="Password" required />
                                    </div>
                                    <button class="btn">Free Login</button>
                                </div>
                                <div class="modal-footer">
                                    <ul>
                                        <li><a href="#">Forgot Password ?</a></li>
                                        <li><a href="#">Sign Up</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS