Contoh Panel Login Responsive Menggunakan Bootstrap

Post category:Teknologi
Post last modified:November 7, 2023

Pusdiklatkemnaker.com – Hai sobat kali ini kita akan membahas cara membuat panel login menggunakan bootstrap.

Dengan memanfaatkan bootstrap kita bisa membuat layout website dengan mudah menggunakan dokumentasi yang lengkap dan jelas.

Seperti contoh pada pembahasan kali ini, kita akan membahas cara membuat layout login dengan menggunakan bootstrap.

Silahkan kamu bisa langsung melihat source kodenya di bawah ini dan pertama kita akan file index.htmlnya dulu.

Selanjutnya kita akan membutuhkan file css yang berfungsi untuk mengatur ukuran dan gredient atau warna pada panel login yang akan kita buat kali ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
    <!--costume css-->
    <link href="style.css" rel="stylesheet">    
    <title>Login Boostrap 5 | Hidayat Code</title>
  </head>
  <body>
    <div class="global-container">
      <div class="card-login-from">
        <div class="card-body">
          <h1 class="card-title text-center">L O G I N</h1>
        </div>
        <div class="Card-text"></div>
        <form>
          <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
          <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" />
          </div>
          <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1" />
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div> 
   </div>
  </body>
</html>

Selanjutnya save, oh iya kamu bisa melakukan setingan warna pada bagian sekitar kolom login nya, sesuaikan sendiri dengan keinginan kalian.

html,
body {
  height: 100%;
  background-color: #222d32 !important;
}

.global-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4871e2;
}

.login-from {
  width: 380px;
  height: 450px;
  padding: 20px;
  background-color: #222d32 !important;
  border-radius: 10px !important;
}

input[type="email"],
input[type="password"] {
  background: #1a2226;
  color: #fff;
  border: 2px solid #4871e2;
  border-radius: 10px;
  margin-bottom: 25px;
}

input[type="email"] :focus,
input[type="password"] :focus {
  outline: none;
  border: none;
  background: #1a2226;
  color: #fff;
  margin: 0;
}

.card-title {
  font-weight: 900;
  padding-top: 20px;
}

.btn {
  background: #4871e2 !important;
  color: #1a2226 !important;
  transform: translateY(10px);
  font-size: 14px;
  border-radius: 10px !important;
}

Gunakan code editor visual studio code untuk mempermudah coding kalian.

Tags: Bootstrap