content logo

Bootstrap Forms:

Bootstrap Login Form Code in a Modal

When you do not want the form used on your website to take up space. You can use modals. The modals open with the click of a button and show the form you want. This modal has a form with a photo with a circular crop at the top of the form. The overall theme is white and turquoise and there is a button to close the form in the upper corner of the form.

#Free Form Code #Form Code in Modal #Modal Form Code #Bootstrap Login Form #Bootstrap Login Modal

<!-- This script got from www.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://www.frontendfreecode.com">Frontend Free Code</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 www.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">Frontend Free Code</a></div>

</body>
</html>
Preview