Neon Login Page With BootStrap & CSS

Hello! Frontend Web developers in this post we will make a Neon Login Page With BootStrap. And understand all the key concepts that you will need to make a project like this. This post focuses on how we can use Bootstrap to make cool login pages.

Also Read: Glassmorphism Login Page With HTML & CSS

We will walk through Bootstrap Rows & Columns, Margins, Error Message & FontAwsome Icons, etc At the end of this post, I will provide the entire source code of this neon login page so that you can copy and paste to run on your local device.

Key Concepts Used In Neon Login Page With BootStrap:

• Bootstrap Row & Columns
• Bootstrap Margin
• Bootstrap Error Message & FontAwsome Icons
• CSS Button Styling & Hover Effects

Understanding HTML For Making Bootstrap Neon Login Page

1. Container

• The outermost div has a class container. This div holds everything inside it.

   <div class="container">

2. Row

• Inside container, there is a div with class row. This div helps in creating a grid layout.

   <div class="row">

3. Column Divs

• There are three column divs inside row. The first and last columns are empty for spacing, and the middle column holds the login box.

   <div class="col-lg-3 col-md-2"></div>
   <div class="col-lg-6 col-md-8 login-box">
   <div class="col-lg-3 col-md-2"></div>

4. Login Key Icon

• Inside the login-box, there is a div with class login-key. This div holds an icon for decoration.

   <div class="col-lg-12 login-key">
     <i class="fa fa-key" aria-hidden="true"></i>
   </div>

5. Login Title

• There is a div with class login-title. This div displays the title “ADMIN PANEL”.

   <div class="col-lg-12 login-title">
     ADMIN PANEL
   </div>

6. Login Form

• The div with class login-form contains the form elements.

   <div class="col-lg-12 login-form">
     <div class="col-lg-12 login-form">

7. Form Element

• Inside login-form, there is a form element with input fields for username and password, and a login button.

   <form>
     <div class="form-group">
       <label class="form-control-label">USERNAME</label>
       <input type="text" class="form-control">
     </div>
     <div class="form-group">
       <label class="form-control-label">PASSWORD</label>
       <input type="password" class="form-control">
     </div>

8. Login Button

• The loginbttm div contains two inner divs for error messages and the login button.

   <div class="col-lg-12 loginbttm">
     <div class="col-lg-6 login-btm login-text">
       <!-- Error Message -->
     </div>
     <div class="col-lg-6 login-btm login-button">
       <button type="submit" class="btn btn-outline-primary">LOGIN</button>
     </div>
   </div>

Understanding Bootstrap CSS Classes For Neon Login Page

The body element sets the background color, minimum height, display, and centering.

body {
  background: #222D32;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto', sans-serif;
}

Login Box Styles
The .login-box class adds margin, height, background color, text alignment, and shadow.

.login-box {
  margin-top: 75px;
  height: auto;
  background: #1A2226;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

Login Key Styles
The .login-key class styles the key icon with gradient text.

.login-key {
  height: 100px;
  font-size: 80px;
  line-height: 100px;
  background: -webkit-linear-gradient(#27EF9F, #0DB8DE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Login Title Styles
The .login-title class sets the title’s margin, text alignment, font size, letter spacing, font weight, and color.

.login-title {
  margin-top: 15px;
  text-align: center;
  font-size: 30px;
  letter-spacing: 2px;
  font-weight: bold;
  color: #ECF0F5;
}

Login Form Styles
The .login-form class sets the form’s top margin and left alignment.

.login-form {
  margin-top: 25px;
  text-align: left;
}

Input Field Styles
The input[type=text] and input[type=password] classes style the text and password input fields with background color, border, font weight, margin, padding, and color.

input[type=text], input[type=password] {
  background-color: #1A2226;
  border: none;
  border-bottom: 2px solid #0DB8DE;
  font-weight: bold;
  outline: 0;
  margin-bottom: 20px;
  padding-left: 0px;
  color: #ECF0F5;
}

Form Group Styles
The .form-group class adds a bottom margin and removes outline.

.form-group {
  margin-bottom: 40px;
  outline: 0px;
}

Form Control Focus Styles
The .form-control:focus class styles focused input fields with border color, shadow, outline, background color, and text color.

.form-control:focus {
  border-color: inherit;
  box-shadow: none;
  border-bottom: 2px solid #0DB8DE;
  outline: 0;
  background-color: #1A2226;
  color: #ECF0F5;
}

Label Styles
The label and .form-control-label classes style the labels with margin, font size, color, font weight, and letter spacing.

label {
  margin-bottom: 0px;
}
.form-control-label {
  font-size: 10px;
  color: #6C6C6C;
  font-weight: bold;
  letter-spacing: 1px;
}

Button Styles
The .btn-outline-primary class styles the button with border color, text color, border radius, font weight, letter spacing, and shadow. The hover state changes the background color.

.btn-outline-primary {
  border-color: #0DB8DE;
  color: #0DB8DE;
  border-radius: 0px;
  font-weight: bold;
  letter-spacing: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.btn-outline-primary:hover {
  background-color: #0DB8DE;
}

Login Bottom Styles
The .login-btm class floats elements to the left. The .login-button class sets right padding, text alignment, and bottom margin. The .login-text class sets left padding and text color.

.login-btm {
  float: left;
}
.login-button {
  padding-right: 0px;
  text-align: right;
  margin-bottom: 25px;
}
.login-text {
  text-align: left;
  padding-left: 0px;
  color: #A2A4A4;
}
.loginbttm {
  padding: 0px;
}

Source Code Of Bootstrap Neon Login Page

HTML:

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-2"></div>
        <div class="col-lg-6 col-md-8 login-box">
            <div class="col-lg-12 login-key">
                <i class="fa fa-key" aria-hidden="true"></i>
            </div>
            <div class="col-lg-12 login-title">
                ADMIN PANEL
            </div>

            <div class="col-lg-12 login-form">
                <div class="col-lg-12 login-form">
                    <form>
                        <div class="form-group">
                            <label class="form-control-label">USERNAME</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">PASSWORD</label>
                            <input type="password" class="form-control" i>
                        </div>

                        <div class="col-lg-12 loginbttm">
                            <div class="col-lg-6 login-btm login-text">
                                <!-- Error Message -->
                            </div>
                            <div class="col-lg-6 login-btm login-button">
                                <button type="submit" class="btn btn-outline-primary">LOGIN</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-lg-3 col-md-2"></div>
        </div>
    </div>

CSS:

Also Read: Sliding Login & Sign Up Form With HTML, CSS & JS

<style>

    body {

    background: #222D32;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: 'Roboto', sans-serif;

}

.login-box {

    margin-top: 75px;

    height: auto;

    background: #1A2226;

    text-align: center;

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

}

.login-key {

    height: 100px;

    font-size: 80px;

    line-height: 100px;

    background: -webkit-linear-gradient(#27EF9F, #0DB8DE);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.login-title {

    margin-top: 15px;

    text-align: center;

    font-size: 30px;

    letter-spacing: 2px;

    margin-top: 15px;

    font-weight: bold;

    color: #ECF0F5;

}

.login-form {

    margin-top: 25px;

    text-align: left;

}

input[type=text] {

    background-color: #1A2226;

    border: none;

    border-bottom: 2px solid #0DB8DE;

    border-top: 0px;

    border-radius: 0px;

    font-weight: bold;

    outline: 0;

    margin-bottom: 20px;

    padding-left: 0px;

    color: #ECF0F5;

}

input[type=password] {

    background-color: #1A2226;

    border: none;

    border-bottom: 2px solid #0DB8DE;

    border-top: 0px;

    border-radius: 0px;

    font-weight: bold;

    outline: 0;

    padding-left: 0px;

    margin-bottom: 20px;

    color: #ECF0F5;

}

.form-group {

    margin-bottom: 40px;

    outline: 0px;

}

.form-control:focus {

    border-color: inherit;

    -webkit-box-shadow: none;

    box-shadow: none;

    border-bottom: 2px solid #0DB8DE;

    outline: 0;

    background-color: #1A2226;

    color: #ECF0F5;

}

input:focus {

    outline: none;

    box-shadow: 0 0 0;

}

label {

    margin-bottom: 0px;

}

.form-control-label {

    font-size: 10px;

    color: #6C6C6C;

    font-weight: bold;

    letter-spacing: 1px;

}

.btn-outline-primary {

    border-color: #0DB8DE;

    color: #0DB8DE;

    border-radius: 0px;

    font-weight: bold;

    letter-spacing: 1px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

}

.btn-outline-primary:hover {

    background-color: #0DB8DE;

    right: 0px;

}

.login-btm {

    float: left;

}

.login-button {

    padding-right: 0px;

    text-align: right;

    margin-bottom: 25px;

}

.login-text {

    text-align: left;

    padding-left: 0px;

    color: #A2A4A4;

}

.loginbttm {

    padding: 0px;

}

</style>

Also Read: Animated Ribbon Login Page With HTML & CSS

About Author