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 surch codenya di bawah ini dan pertama kita akan file index.htmlnya dulu.
<!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 kita akan membutuhkan file css yang berfungsi untuk mengatur ukuran dan gradient atau warna pada panel login yang akan kita buat kali ini.
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;
}
Selanjutnya save, oh iya kamu bisa melakukan setingan warna pada bagian sekitar kolom loginnya, sesuaikan sendiri dengan keinginan kalian. Gunakan code editor visual studio code untuk mempermudah codingan kalian