Bootstrap Login Form with Image

Bootstrap Login Form with Image
Code Snippet:Simple Bootstrap Login Form
Author: Coding League
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 4,978
License: MIT
Edit Code online: View on CodePen
Read More

This code presents a user-friendly login form with an image designed using Bootstrap. The form consists of input fields for email and password, along with a “Remember Me” checkbox and a login button. The form’s layout is structured using the Bootstrap grid system, with one column containing an image and the other column hosting the login form.

The CSS styling enhances the form’s aesthetics, incorporating a pleasant background color and font-family. It ensures a smooth user experience by displaying focused input fields and highlighting the login button on hover.

With this code, you can swiftly implement an attractive login form with an image background for your web applications or websites.

How to Create Bootstrap Login Form

1. First of all, load the Bootstrap CSS by adding the following CDN link to the head tag of your HTML document.

 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>

2. Create the login form’s HTML structure, as given below. Replace “/path/to/your/image.jpg” with your desired image URL, and don’t forget to add the action attribute to the form element to handle login data on the server side.

<div class="container">
  <div class="row content">
    <div class="col-md-6 mb-3">
     <img src="path/to/your/image.jpg" alt="Image in login page">
    </div>
    <div class="col-md-6">
      <h3 class="signin-text mb-3"> Sign In</h3>
      <form>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="email" name="email" class="form-control">
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" name="password" class="form-control">
        </div>
        <div class="form-group form-check">
          <input type="checkbox" name="checkbox" class="form-check-input" id="checkbox">
          <label class="form-check-label" for="checkbox">Remember Me</label>
        </div>
        <button class="btn btn-class">Login</button>
      </form>
    </div>
  </div>
</div>

3. To customize the login form, you can apply the following CSS styles. Feel free to modify the CSS rules as per your specific requirements:

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body{
    font-family: 'Poppins', sans-serif;
    background-color: #00ac96;
}
.content{
    margin: 8%;
    background-color: #fff;
    padding: 4rem 1rem 4rem 1rem;
    box-shadow: 0 0 5px 5px rgba(0,0,0, .05);
}
.signin-text{
    font-style: normal;
    font-weight: 600 !important;

}
.form-control{
    display: block;
    width:100%;
    font-size: 1rem;
    font-weight: 400;
    line-height:1.5;
    border-color: #00ac96 !important;
    border-style: solid !important;
    border-width: 0 0 1px 0 !important;
    padding: 0px !important;
    color:#495057;
    height: auto;
    border-radius: 0;
    background-color: #fff;
    background-clip: padding-box;
}


.form-control:focus{
    color: #495057;
    background-color: #fff;
    border-color: #fff;
    outline: 0;
    box-shadow: none;
}
.birthday-section{
    padding: 15px;
}
.btn-class{
    border-color: #00ac96;
    color: #00ac96;
}
.btn-class:hover{
    background-color:  #00ac96;
    color: #fff;
}

That’s all! hopefully, you have successfully created a Bootstrap login form with an image. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X