content logo

Bootstrap Forms:

Bootstrap Glassy Login Form

Login forms are usually used to log in to each user's account on websites. In this code we also have a form that can be used for login. The background of this form is relatively transparent and therefore the glass below the photo is clear. The login form itself has a login button and a social network icon in yellow. The logo of the social buttons is colorless and the image below them is clear.

#Glassy Login Form Code #CSS Login Form #HTML Form with Bootstrap #Bootstrap Form Codes #Bootstrap Login Form

<!-- This script got from www.frontendfreecode.com -->
<div class="container">
    <div class="d-flex justify-content-center h-100">
        <div class="card">
            <div class="card-header">
                <h3>Sign In</h3>
                <div class="d-flex justify-content-end social_icon">
                    <span><i class="fab fa-facebook-square"></i></span>
                    <span><i class="fab fa-google-plus-square"></i></span>
                    <span><i class="fab fa-twitter-square"></i></span>
                </div>
            </div>
            <div class="card-body">
                <form>
                    <div class="input-group form-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-user"></i></span>
                        </div>
                        <input type="text" class="form-control" placeholder="username" />
                    </div>
                    <div class="input-group form-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-key"></i></span>
                        </div>
                        <input type="password" class="form-control" placeholder="password" />
                    </div>
                    <div class="row align-items-center remember"><input type="checkbox" />Remember Me</div>
                    <div class="form-group">
                        <input type="submit" value="Login" class="btn float-right login_btn" />
                    </div>
                </form>
            </div>
            <div class="card-footer">
                <div class="d-flex justify-content-center links">Don't have an account?<a href="#">Sign Up</a></div>
                <div class="d-flex justify-content-center">
                    <a href="#">Forgot your password?</a>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Free Code</a>
                                                                            
html,
body {
    background-image: url("http://frontendfreecode.com/img/Elegant-Login-Page.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    font-family: "Numans", sans-serif;
}
.container {
    height: 100%;
    align-content: center;
}
.card {
    height: 370px;
    margin-top: auto;
    margin-bottom: auto;
    width: 400px;
    background-color: rgba(0, 0, 0, 0.5) !important;
}
.social_icon span {
    font-size: 60px;
    margin-left: 10px;
    color: #ffc312;
}
.social_icon span:hover {
    color: white;
    cursor: pointer;
}
.card-header h3 {
    color: white;
}
.social_icon {
    position: absolute;
    right: 20px;
    top: -45px;
}
.input-group-prepend span {
    width: 50px;
    background-color: #ffc312;
    color: black;
    border: 0 !important;
}
input:focus {
    outline: 0 0 0 0 !important;
    box-shadow: 0 0 0 0 !important;
}
.remember {
    color: white;
}
.remember input {
    width: 20px;
    height: 20px;
    margin-left: 15px;
    margin-right: 5px;
}
.login_btn {
    color: black;
    background-color: #ffc312;
    width: 100px;
}
.login_btn:hover {
    color: black;
    background-color: white;
}
.links {
    color: white;
}
.links a {
    margin-left: 4px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<style>
html,
body {
    background-image: url("http://frontendfreecode.com/img/Elegant-Login-Page.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    font-family: "Numans", sans-serif;
}
.container {
    height: 100%;
    align-content: center;
}
.card {
    height: 370px;
    margin-top: auto;
    margin-bottom: auto;
    width: 400px;
    background-color: rgba(0, 0, 0, 0.5) !important;
}
.social_icon span {
    font-size: 60px;
    margin-left: 10px;
    color: #ffc312;
}
.social_icon span:hover {
    color: white;
    cursor: pointer;
}
.card-header h3 {
    color: white;
}
.social_icon {
    position: absolute;
    right: 20px;
    top: -45px;
}
.input-group-prepend span {
    width: 50px;
    background-color: #ffc312;
    color: black;
    border: 0 !important;
}
input:focus {
    outline: 0 0 0 0 !important;
    box-shadow: 0 0 0 0 !important;
}
.remember {
    color: white;
}
.remember input {
    width: 20px;
    height: 20px;
    margin-left: 15px;
    margin-right: 5px;
}
.login_btn {
    color: black;
    background-color: #ffc312;
    width: 100px;
}
.login_btn:hover {
    color: black;
    background-color: white;
}
.links {
    color: white;
}
.links a {
    margin-left: 4px;
}
</style>

</head>
<body>
<div class="container">
    <div class="d-flex justify-content-center h-100">
        <div class="card">
            <div class="card-header">
                <h3>Sign In</h3>
                <div class="d-flex justify-content-end social_icon">
                    <span><i class="fab fa-facebook-square"></i></span>
                    <span><i class="fab fa-google-plus-square"></i></span>
                    <span><i class="fab fa-twitter-square"></i></span>
                </div>
            </div>
            <div class="card-body">
                <form>
                    <div class="input-group form-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-user"></i></span>
                        </div>
                        <input type="text" class="form-control" placeholder="username" />
                    </div>
                    <div class="input-group form-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-key"></i></span>
                        </div>
                        <input type="password" class="form-control" placeholder="password" />
                    </div>
                    <div class="row align-items-center remember"><input type="checkbox" />Remember Me</div>
                    <div class="form-group">
                        <input type="submit" value="Login" class="btn float-right login_btn" />
                    </div>
                </form>
            </div>
            <div class="card-footer">
                <div class="d-flex justify-content-center links">Don't have an account?<a href="#">Sign Up</a></div>
                <div class="d-flex justify-content-center">
                    <a href="#">Forgot your password?</a>
                </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