Cara Membuat Form Login Sederhana dengan Bootstrap 4

Cara Membuat Form Login Sederhana dengan Bootstrap 4 - Dengan memanfaatkan framework Bootstrap kita bisa dengan mudah dalam membuat layout website, dengan dukungan dokumentasi yang sangat jelas dan lengkap membuat framework ini banyak sekali digunakan dalam mendukung tampilan website. Seperti contoh berikut pemanfaatan bootstrap dalam membuat desain halaman login sederhana. Buat teman - teman yang lagi belajar framework Bootstrap kasus berikut sangat cocok untuk membantu dalam belajar.

Pada kasus ini saya akan membuat halaman login sederhana dengan menggunakan komponen - kompnen yang adala didalam bootstra 4, untuk membuatnya sangat mudah sekali, tentunya kalian yang ingin membuat halaman login ini kalian wajib mendownload library bootstrap terlebih dahulu. Setelah itu tinggal menyusun kerangka dan komponen - komponen bootstrap yang akan digunakan.

Dalam kasus form login berikut komponen bootstrap yanag digunakan antara lain, Card, input, dan button silahkan kalian bisa lihat sintak berikut.

  <body>
    <div class="container">
      <div class="row justify-content-center mt-5">
        <div class="col-md-4">
          <div class="card">
            <div class="card-header bg-transparent mb-0"><h5 class="text-center">Please <span class="font-weight-bold text-primary">LOGIN</span></h5></div>
            <div class="card-body">
              <form action="">
                <div class="form-group">
                  <input type="text" name="" class="form-control" placeholder="Username">
                </div>
                <div class="form-group">
                  <input type="text" name="" class="form-control" placeholder="Password">
                </div>
                <div class="form-group custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
                  <label class="custom-control-label" for="customControlAutosizing">Remember me</label>
                </div>
                <div class="form-group">
                  <input type="submit" name="" value="Login" class="btn btn-primary btn-block">
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

Sintak bootstrap diatas terlihat sangat sederhana sekali, namun tetap memberikan desain yang cukup bagus untuk dilihat. Silahkan kalian tambahkan sintak diatas kedalam file bootstrap kalian lalu bisa kalian lihat hasilnya pada browser masing - masing. Maka akan terlihat seperti gambar dibawa ini.

Cara Membuat Form Login Sederhana dengan Bootstrap 4

Baiklah, saya cukupkan tutorial sederhana bootstrap tentang bagaimana Cara Membuat Form Login Sederhana dengan Bootstrap 4, semoga bermanfaat dan selamat mencoba..

21 April 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat