Design Bootstrap

Contoh Coding Form Login HTML, CSS, dan Bootstrap 5

Panduan langkah demi langkah membuat form login modern dan responsif menggunakan HTML, CSS, Bootstrap 5, serta JavaScript sederhana.

Contoh coding Contoh Coding Form Login HTML, CSS, dan Bootstrap 5
Langkah 3 dari 9

Membuat Layout Form Login dengan Grid Bootstrap

Ganti komentar di dalam <body> dengan struktur berikut:

<main class="login-page">
  <section class="login-card" aria-labelledby="loginTitle">
    <div class="row g-0">
      <div class="col-lg-6 login-visual d-none d-lg-flex">
        <div class="visual-content">
          <span class="brand-mark">KP</span>
          <p class="eyebrow">KodingPlus Demo</p>
          <h1>Selamat datang kembali.</h1>
          <p>Masuk untuk melanjutkan ke dashboard dan mengelola pekerjaan Anda.</p>
        </div>
      </div>

      <div class="col-lg-6 login-form-column">
        <div class="login-form-wrap">
          <div class="d-lg-none mb-4">
            <span class="brand-mark brand-mark-small">KP</span>
          </div>
          <p class="eyebrow text-primary">Akun Anda</p>
          <h2 id="loginTitle" class="mb-2">Masuk</h2>
          <p class="text-secondary mb-4">Masukkan email dan kata sandi Anda.</p>

          <!-- Pesan dan form diletakkan di sini. -->
        </div>
      </div>
    </div>
  </section>
</main>

Class row dan col-lg-6 membagi kartu menjadi dua kolom pada layar besar. Class d-none d-lg-flex menyembunyikan panel visual pada layar kecil sehingga ruang mobile lebih fokus pada form. Sistem grid Bootstrap dibangun dengan Flexbox dan dirancang responsif.

Referensi Lain

Contoh coding terkait