Responsive Login form using Bootstrab 5

Responsive Login form using Bootstrab 5

How To Login Form in Bootstrap 5

How to design and build the Login Form is shown in this image.

Step 1:

1. Create a new index.html file in your project root. Include the tag as well for proper responsive behavior in mobile devices. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Template</title>
</head>
<body>
</body>
</html>

     

2. Include Bootstrap’s CSS and JS. Place the <link> tag in the <head> for our CSS, and the <script> tag for our JavaScript bundle (including Popper for positioning dropdowns, poppers, and tooltips) before the closing </body>.  Add Font Awesome CDN to your website

</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</head>

3. Finally add your simple code.   

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

<link rel="stylesheet" href="css/bootstrap.min.css">

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">

 <Style>

  body {

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

    background: #007bff;

    background: linear-gradient(to right, #0062E6, #33AEFF);

  }


  .btn-login {

    font-size: 0.9rem;

    letter-spacing: 0.05rem;

    padding: 0.75rem 1rem;

  }


  .btn-google {

    color: white !important;

    background-color: #ea4335;

  }


  .btn-google:hover {

    background-color: green;

  }


  .btn-facebook:hover {

    background-color: green;

  }


  .btn-facebook {

    color: white !important;

    background-color: #3b5998;

  }

 </Style>

</head>

<body>


    <div class="container">  

      <div class="row">

        <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">

          <div class="card border-0 shadow rounded-3 my-5">

            <div class="card-body p-4 p-sm-5">

              <h5 class="card-title text-center mb-5 fw-light fs-5">Sign In</h5>

              <form>

                <div class="form-floating mb-3">

                  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">

                  <label for="floatingInput">Email address</label>

                </div>

                <div class="form-floating mb-3">

                  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">

                  <label for="floatingPassword">Password</label>

                </div>


                <div class="form-check mb-3">

                  <input class="form-check-input" type="checkbox" value="" id="rememberPasswordCheck">

                  <label class="form-check-label" for="rememberPasswordCheck">

                    Remember password

                  </label>

                </div>

                <div class="d-grid">

                  <button class="btn btn-primary btn-login text-uppercase fw-bold" type="submit">Sign

                    in</button>

                </div>

                <hr class="my-4">

                <div class="d-grid mb-2">

                  <button class="btn btn-google btn-login text-uppercase fw-bold" type="submit">

                    <i class="fab fa-google me-2"></i> Sign in with Google

                  </button>

                </div>

                <div class="d-grid">

                  <button class="btn btn-facebook btn-login text-uppercase fw-bold" type="submit">

                    <i class="fab fa-facebook-f me-2"></i> Sign in with Facebook

                  </button>

                </div>

              </form>

            </div>

          </div>

        </div>

      </div>

    </div>



    <script src="js/jquery.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

   

</body>

</html>

 

 

 

 

0 Comments

Leave a comment

Your email address will not be published. Required fields are marked *