Bootstrap Forms:

Bootstrap Dark Sign in and Sign up Forms

You probably have seen the login form on many websites. In this post, there is the most beautiful login form with excellent performance. The Bootstrap Dark Sign in and Sign up Forms are placed here with an attractive design. We suggest you use this Bootstrap Sign in Form if you have a website to attract more visitors. As the following preview shows, this Bootstrap Sign up Form looks so awesome, and the background of the main page is green. On the other hand, you see the central page with a dark theme. So, we think it's a great form for websites with dark themes.

This Dark Form Code contains two sections; The first one is designed for sign-in and has two fields for email and password. These parts have a dark gray background. The sign-in button in this Free Form Code is green, and the writing is white. The second section is designed for sign-up and contains four parts. These fields are related to the visitor's name, email, password, and confirmation. The sign-up button is green with white writing. These Dark CSS Sign in and up Forms have an icon at the top of the page that increases the website’s uniqueness.

Bootstrap Sign in Form

Bootstrap Sign up Form

Dark Form Code

Free Form Code

Dark CSS Sign in up Froms

<!-- This script got from frontendfreecode.com -->
<div class="form-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-3 col-md-6">
                <div class="tab" role="tabpanel">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">sign in</a></li>
                        <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">sign up</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content tabs">
                        <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">E-mail</label>
                                    <input class="form-control" id="exampleInputEmail1" type="email" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1">Password</label>
                                    <input class="form-control" id="exampleInputPassword1" type="password" />
                                </div>
                                <div class="form-group text-center">
                                    <button type="submit" class="btn btn-default">Sign in</button>
                                </div>
                                <div class="form-group forgot-pass">
                                    <a href="#">forgot your password?</a>
                                </div>
                            </form>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="Section2">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Full Name</label>
                                    <input class="form-control" type="text" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Email</label>
                                    <input class="form-control" type="email" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Password</label>
                                    <input class="form-control" type="password" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1">Retype Password</label>
                                    <input class="form-control" type="password" />
                                </div>
                                <div class="form-group text-center">
                                    <button type="submit" class="btn btn-default">Sign up</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
    margin: 20px;
    background: #04c582;
}
a:hover,
a:focus {
    outline: none;
    text-decoration: none;
}
.form-bg {
    background: #04c582;
}
.tab {
    padding: 70px 50px 25px;
    margin-top: 40px;
    background: #2e3137;
    border-radius: 50px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.6);
    position: relative;
}
.tab:before {
    content: "\f007";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #585a5f;
    font-size: 40px;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
}
.tab .nav-tabs {
    padding: 0 20px 15px;
    position: relative;
}
.tab .nav-tabs li a {
    padding: 0 20px 0;
    margin: 0;
    background: none;
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    opacity: 0.5;
    position: relative;
    transition: all 0.5s ease 0s;
}
.tab .nav-tabs li a:hover {
    border: none;
}
.tab .nav-tabs li a:before {
    content: "";
    width: 0;
    height: 3px;
    background: #fff;
    position: absolute;
    bottom: -16px;
    left: 0;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:focus,
.tab .nav-tabs li.active a:hover {
    border: none;
    background: none;
    opacity: 1;
    color: #fff;
}
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li.active a:hover:before {
    width: 100%;
}
.tab .tab-content {
    padding: 20px 0 0 0;
    margin-top: 15px;
    background: none;
    position: relative;
}
.form-horizontal .form-group {
    margin: 0 0 15px 0;
    position: relative;
}
.form-horizontal .form-control {
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 7px;
    box-shadow: none;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    transition: all 0.3s ease 0s;
}
.form-horizontal .form-control:focus {
    box-shadow: none;
    outline: 0 none;
}
.form-horizontal .form-group label {
    padding: 0 10px;
    color: #7f8291;
    text-transform: capitalize;
    margin-bottom: 5px;
}
.form-horizontal .btn {
    display: inline-block;
    width: 50%;
    background: #04c582;
    padding: 10px 20px;
    margin: 20px auto 0;
    border: none;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    border-radius: 7px;
    text-transform: uppercase;
}
.form-horizontal .btn:focus {
    background: #04c582;
    color: #fff;
    outline: none;
    box-shadow: none;
}
.form-horizontal .forgot-pass {
    margin: 0;
    text-align: center;
}
.form-horizontal .forgot-pass a {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px 0 0 0;
    border-bottom: 1px solid #615f6c;
    font-size: 14px;
    font-weight: bold;
    color: #615f6c;
    text-transform: capitalize;
    transition: all 0.3s ease 0s;
}
.form-horizontal .forgot-pass a:hover {
    color: #04c582;
}
@media only screen and (max-width: 479px) {
    .tab {
        padding: 70px 20px 20px;
    }
}
@media only screen and (max-width: 360px) {
    .tab .nav-tabs li a {
        padding: 0 15px;
    }
}

<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>
body {
    margin: 20px;
    background: #04c582;
}
a:hover,
a:focus {
    outline: none;
    text-decoration: none;
}
.form-bg {
    background: #04c582;
}
.tab {
    padding: 70px 50px 25px;
    margin-top: 40px;
    background: #2e3137;
    border-radius: 50px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.6);
    position: relative;
}
.tab:before {
    content: "\f007";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #585a5f;
    font-size: 40px;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
}
.tab .nav-tabs {
    padding: 0 20px 15px;
    position: relative;
}
.tab .nav-tabs li a {
    padding: 0 20px 0;
    margin: 0;
    background: none;
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    border: none;
    border-radius: 0;
    opacity: 0.5;
    position: relative;
    transition: all 0.5s ease 0s;
}
.tab .nav-tabs li a:hover {
    border: none;
}
.tab .nav-tabs li a:before {
    content: "";
    width: 0;
    height: 3px;
    background: #fff;
    position: absolute;
    bottom: -16px;
    left: 0;
}
.tab .nav-tabs li.active a,
.tab .nav-tabs li.active a:focus,
.tab .nav-tabs li.active a:hover {
    border: none;
    background: none;
    opacity: 1;
    color: #fff;
}
.tab .nav-tabs li.active a:before,
.tab .nav-tabs li.active a:hover:before {
    width: 100%;
}
.tab .tab-content {
    padding: 20px 0 0 0;
    margin-top: 15px;
    background: none;
    position: relative;
}
.form-horizontal .form-group {
    margin: 0 0 15px 0;
    position: relative;
}
.form-horizontal .form-control {
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 7px;
    box-shadow: none;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    transition: all 0.3s ease 0s;
}
.form-horizontal .form-control:focus {
    box-shadow: none;
    outline: 0 none;
}
.form-horizontal .form-group label {
    padding: 0 10px;
    color: #7f8291;
    text-transform: capitalize;
    margin-bottom: 5px;
}
.form-horizontal .btn {
    display: inline-block;
    width: 50%;
    background: #04c582;
    padding: 10px 20px;
    margin: 20px auto 0;
    border: none;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    border-radius: 7px;
    text-transform: uppercase;
}
.form-horizontal .btn:focus {
    background: #04c582;
    color: #fff;
    outline: none;
    box-shadow: none;
}
.form-horizontal .forgot-pass {
    margin: 0;
    text-align: center;
}
.form-horizontal .forgot-pass a {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px 0 0 0;
    border-bottom: 1px solid #615f6c;
    font-size: 14px;
    font-weight: bold;
    color: #615f6c;
    text-transform: capitalize;
    transition: all 0.3s ease 0s;
}
.form-horizontal .forgot-pass a:hover {
    color: #04c582;
}
@media only screen and (max-width: 479px) {
    .tab {
        padding: 70px 20px 20px;
    }
}
@media only screen and (max-width: 360px) {
    .tab .nav-tabs li a {
        padding: 0 15px;
    }
}
</style>

</head>
<body>
<div class="form-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-3 col-md-6">
                <div class="tab" role="tabpanel">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">sign in</a></li>
                        <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">sign up</a></li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content tabs">
                        <div role="tabpanel" class="tab-pane fade in active" id="Section1">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">E-mail</label>
                                    <input class="form-control" id="exampleInputEmail1" type="email" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1">Password</label>
                                    <input class="form-control" id="exampleInputPassword1" type="password" />
                                </div>
                                <div class="form-group text-center">
                                    <button type="submit" class="btn btn-default">Sign in</button>
                                </div>
                                <div class="form-group forgot-pass">
                                    <a href="#">forgot your password?</a>
                                </div>
                            </form>
                        </div>
                        <div role="tabpanel" class="tab-pane fade" id="Section2">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Full Name</label>
                                    <input class="form-control" type="text" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Email</label>
                                    <input class="form-control" type="email" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Password</label>
                                    <input class="form-control" type="password" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1">Retype Password</label>
                                    <input class="form-control" type="password" />
                                </div>
                                <div class="form-group text-center">
                                    <button type="submit" class="btn btn-default">Sign up</button>
                                </div>
                            </form>
                        </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

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars