Cara Membuat Form Login Dengan Bootstrap

Cara Membuat Form Login Dengan Bootstrap

Form Login merupakan elemen penting yang ada pada website, yaitu sebagai pintu masuk user ke website itu sendiri.

Membuat form login dapat kita buat menggunakan framework Bootstrap. Dengan bootstrap pembuatan form login akan mudah dan juga cepat.

Berikut adalah hasil akhirnya.

Hasil Akhir

Membuat Kerangka HTML

Pertama kita buat kerangka file htmlnya terlebih dahulu. Silahkan masukan kode berikut.

<div class="login vh-100 d-flex align-items-center justify-content-center">
<form class="bg-white rounded shadow-sm col-md-4 col-sm-8 col-10 p-4">
  <h1 class="border-bottom font-weight-bold pb-2 mb-3 h2">Login</h1>
  <div class="form-group">
    <label>Email address</label>
    <input type="email" class="form-control" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control"placeholder="Password">
  </div>
  <div class="form-group 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>

Mengatur CSS

Disini saya memberikan sebuah css untuk mengganti warna background dasarnya menjadi abu-abu.

.login{
 background-color: #f5f5f5;
}

Hasil

Save dan buka di browser.

Login

Coba kita cek keresponsivanya.

Cek Responsive

Oke, begitu saja postingan saya kali ini, semoga bermanfaat.

Sekian bye.

Related Post

Comments

X