Membuat Form Responsive dengan Bootstrap

Publish Date : 24-09-2016 , dibaca 20245 kali, Hari ini dibaca : 1 kali ,1 comments

Lanjut posting artikel lagi.. Cara membuat Form Responsive dengan Twitter Bootstrap, Ok.. temen-temen ... bootstrap memang sudah banyak digunakan oleh para developer, dikarenakan include nya css di bootstrap sendiri, sehingga kita hanya memanggil class yang sudah ada. Untuk Membuat layout form responsive dengan Bootstrap bisa dikatakan cukup mudah, karena kita tidak perlu membuat manual, menuliskan syntax responsive di css,

Untuk Membuat form Responsive dengan Bootstrap kita bisa menggunakan class="form-horizontal" , dan kemudian class="form-group" , untuk lebih jelasnya lagi silahkan Baca artikel dibawah ini sampai selesai ya..

Beriktu ini Gambar Form Responsive dengan Bootstrap.

demo

Source Code Form Responsive Bootstrap

Untuk Code HTML :

<!Doctype HTML>
<html>
<head>
<title>Membuat Form Responsive Suckittrees.com</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <div class="col-lg-4">  
  <div class="page-header">
   <h3>Form Responsive Bootstrap</h3>
  </div>

  <form role="form" class="form-horizontal">
   <div class="form-group">
    <label>Nama Lengkap</label>
    <input type="text" name="namaLengkap" class="form-control">
   </div>
   <div class="form-group">
    <label>Alamat</label>
    <input type="text" name="alamat" class="form-control">
   </div>
   <div class="form-group">
    <label>Email</label>
    <input type="text" name="email" class="form-control">
   </div>
   <div class="form-group">
    <label>Pesan</label>
    <textarea name="pesan" class="form-control"></textarea>
   </div>
   <div class="form-group">
    <button type="submit" class="btn btn-primary">Insert Data</button>
    <button type="reset" class="btn btn-danger">Reset</button>
   </div>
  </form>
 </div>
</div>

</body>
</html>