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.
Baiklah, saya cukupkan tutorial sederhana bootstrap tentang bagaimana Cara Membuat Form Login Sederhana dengan Bootstrap 4, semoga bermanfaat dan selamat mencoba..
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
