Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Membuat Floating Labels Input di Bootstrap.

Pasti teman-teman ingin tampilan web teman-teman lebih menarik dengan menyisipkan animasi-animasi pada web.

Nah supaya web teman-teman lebih menarik saya akan memberikan contoh Cara Membuat Floating Labels Input di Bootstrap. berikut langkah-langkahnya:

– Pertama teman-teman buka file index.html di folder bootstrap teman-teman lalu ketikan tag <form>. Dan beri class seperti code di bawah ini:

– Kedua teman-teman ketikan tag <fieldset> dan beri class seperti coder di bawah ini:

– Ketiga teman-teman ketikan tag <label>, <input>, <small>, dan tambahkan button di bawah fieldset seperti code bawah ini :

– Keempat teman-teman ketikan css di bawah ini dan save dengan nama custom.css di folder css bootstrap teman-teman.

– Hasilnya akan menjadi seperti ini.

cara-membuat-floating-labels-input-di-bootstrap-1

– Lalu ketika teman-teman akan menginput email maka text pada label akan berubah posisi seperti gambar di bawah ini:

cara-membuat-floating-labels-input-di-bootstrap-2

Bagaimana teman-teman mudahkan Cara Membuat Floating Labels Input di Bootstrap. Sekian artikel saya hari ini. Sehat selalu ya teman-teman, selamat mencoba.