Aug 14, 2020

logoblog

Tutorial Simple Bootstrap 4 Responsive Form

Sumber : https://dev.to

 

Hallo sobat berjumpa lagi dengan blogcahti. Setelah sekian lama sibuk menggarap tugas akhir, kali ini saya akan berbagi tutorial bootstrap. Membuat form yang responsive menggunakan bootstrap 4 benar-benar simple. Mengkombinasikan class .col dan membuat center class .row agar tampilan menjadi keren. 

 

Singkat saja karena tutorial ini sangat mudah, namun dibagian akhir akan saja jelaskan agar kalian paham dan bisa dengan mudah membuat yang lebih keren.

 

Buat file bootstrap-form.html lalu copy paste kode berikut ini : Pada kode tersebut pertama didalam tag <head> kita mengambil source bootstrap 4 supaya dapat terhubung ke bootstrap :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

Kalian butuh akses internet pastinya, jika tidak kamu bisa download terlebih dahulu di getbootstrap.com lalu menggunakan eksternal link folder dimana kalain menyimpan file bootstrap.

 

Terdapat banyak class namun saya hanya akan membahasnya sedikit saja. Pada class .justify-content-center berfungsi untuk centering dan harus berada pada class .row. Kemudian class .col akan membuat element lebih lega karena didalamnya sudah include width, padding, dll. Pada class .content saya membuat sedikit custom css untuk menambah margin dan perubahan pada selector tag <input>.

 

Silakan buka browser kemudian masukan url dimana kalian menyimpan file tersebut. Ya, memang terlihat begitu keren dan mudah dipelajari.

 

Sekian tutorial tentang Cara Install Codeigniter 4 di XAMPP Menggunakan Composer di Windows 10. Jika ada yang ingin ditanyakan, silahkan berkomentar. 

Terimakasih telah mengunjungi blogcahti, semoga bermanfaat.