membuat form login responsive dengan bootstrap

share

membuat form login responsive dengan bootstrap membuat form login responsive dengan bootstrap membuat form login responsive dengan bootstrap membuat form login responsive dengan bootstrap membuat form login responsive dengan bootstrap
  • membuat form login responsive dengan bootstrap

    Cara Membuat Form Login Responsive dengan Bootstrap


    Tutorial cara membuat form login responsive dengan Bootstrap merupakan hal yang cukup mudah bagi beberapa back end dan front end developer, namun sebaliknya bagi programmer php mysql pemula.
  • membuat form login responsive dengan bootstrap
    Service
    1. Complete Website
    2. Only web script
    3. Web modification
    4. Application program
    5. Free web template
    6. Free application
    7. Basic SEO
    8. Article request
    9. Tutorial programing
  • membuat form login responsive dengan bootstrap
    MOTO
    "Kepuasan Pelanggan adalah Prioritas kami, Sebagai Pemicu Semangat Dalam Memberikan Pelayanan Terbaik".
  • membuat form login responsive dengan bootstrap Teknologi dan Bahasa
    PHP-5, HTML-5, CSS3, SQL Server, MySQL Database, Access Database, Java, JavaScript, dan Visual Basic.
  • membuat form login responsive dengan bootstrap
    VISI
    "Menjadi penyedia layanan yang terpercaya dan maju dalam dunia Teknologi Informasi."

Cara Membuat Form Login Responsive dengan Bootstrap

Cara membuat form login responsive dengan Bootstrap merupakan hal yang cukup mudah bagi beberapa back end dan front end developer, namun sebaliknya bagi programmer php mysql pemula. Membuat form login dengan Bootstrap, apa itu Bootstrap? yakni sebuah framework atau kerangka kerja CSS yang bersifat open source, dan di dalamnya berisi template desain berbasis HTML, CSS, dan JavaScript. Membuat form login yang responsive dan mobile friendly untuk saat ini hampir menjadi persyaratan wajib dari pemilik project, karena alasan pengguna ponsel pintar yang semakin bertambah. Namun tidak perlu cemas, membuat form login yang menarik keren dan juga responsive dapat dengan mudah di desain menggunakan framework Bootstrap ini.

Tutorial cara membuat form login responsive dengan bootstrap sehingga menghasilkan halaman login yang menarik dan mobile friendly ini kami desain menggunakan framework bootstrap versi terbaru saat ini dibuat yaitu 4.5.2. Kemudian dari sisi script HTML dapat kita coding sendiri sesuai dengan propertie yang tersedia di dalam framework bootstrap, atau boleh juga download beberapa contoh penggunaan di halaman sumbernya. Oke, sesaat lagi akan kita mulai belajar bagaimana cara membuat form login dengan bootstrap sehingga tampil responsive dan mobile friendly.

Cara Membuat Form Login Responsive dengan Bootstrap


membuat form login bootstrap

membuat form login responsive dengan bootstrap

Berikut adalah daftar isi langkah-langkah pada tutorial bagaimana cara membuat form login responsive dengan bootstrap sehingga tampil dengan desain menarik dan mobile friendly.

  • Download framework bootstrap di situs getbootstrap.
  • Membuat direktori folder asset di htdocs
  • Membuat Style Form Login CSS
  • Membuat kode program dengan script HTML dan desain template.

1. Download Bootstrap.

Silahkan download terlebih dulu assets bootstrap terbaru langsung pada sumbernya, disini getbootstrap.com. Kemudian ekstrak file rar yang di dalamnya terdapat assets dengan nama folder "CSS" dan "JS", dan simpan sementara pada folder apapun.

2. Membuat Folder Direktori Tutorial Login Bootstrap.

Buat nama folder terserah Anda dan sebaiknya terletak dalam direktori xampp htdocs agar mudah dieksekusi menggunakan url pada browser. Contoh nama folder yang kami buat adalah "login-bootstrap", sehingga url folder menjadi C:\xampp\htdocs\login-bootstrap\.

Kemudian buat nama folder "assets" di dalam folder "login-bootstrap" yang berfungsi untuk menyimpan folder "CSS" dan "JS" yang telah di download tadi. Dan tambahkan folder opsional untuk menyimpan file image logo, misalnya dengan nama folder "IMG".

Sehingga di dalam folder \login-bootstrap\assets\ terdapat 3 nama folder, seperti gambar di bawah ini.

membuat form login responsive dengan bootstrap

3. Membuat Style Form Login CSS.

Untuk membuat form login responsive dengan bootstrap kita juga perlu menambahkan style login dengan CSS agar tampilan halaman login lebih keren dan menarik.

Berikut adalah kode style CSS tersebut.

html,
body {
  height: 100%;
}
body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}
.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

Save as style.css dan simpan di dalam folder "\login-bootstrap\assets\" sehingga sejajar dengan folder CSS, JS, dan IMG sebagaimana tutorial nomor 2.

4. Membuat File Index dengan HTML

Selain digunakan sebagai homepage form login, pada file ini juga kita akan melakukan coding script untuk membuat form login responsive dengan bootstrap. Kemudian simpan file index ini ke folder direktori utama yaitu \login-bootstrap\, sehingga sejajar dengan folder "assets" bootstrap.

Simpan sebagai index.html

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.1.1">
    <title>Tutorial Membuat Form Login Responsive dengan Bootstrap</title>
	<link rel="canonical" href="">
    <!-- Bootstrap core CSS -->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <link href="assets/style.css" rel="stylesheet">
</head>
<body class="text-center">
    <form class="form-signin">
		<img class="mb-4" src="assets/img/logo.png" alt="" width="72" height="72">
		<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
		<label for="inputEmail" class="sr-only">Email address</label>
		<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
		<label for="inputPassword" class="sr-only">Password</label>
		<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
		<div class="checkbox mb-3">
			<label>
				<input type="checkbox" value="remember-me"> Remember me
			</label>
		</div>
		<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
		<p class="mt-5 mb-3 text-muted">© 2017-2020</p>
	</form>
</body>
</html>

Sebagaimana coding index di atas, hal pertama yang perlu kita perhatikan adalah pada baris kode ke-11 yaitu <link href="assets/css/bootstrap.min.css" rel="stylesheet">. Itu adalah atribut link untuk memanggil seluruh asset css pada bootstrap, yang salah satu perannya adalah untuk membuat form login menjadi responsive. Kemduian hal kedua yang perlu diperhatikan juga adalah pada baris kode ke-28 yaitu <link href="assets/style.css" rel="stylesheet">, style ini akan membuat desain form login yang keren dan menarik. Selebihnya adalah pengetahuan umum dimana untuk membuat sebuah form harus di awali dan di akhiri oleh tag html <form> dan </form>, serta tag input beserta atribut nya diperlukan untuk membuat kolom isian atau text fill.

Sekali lagi pastikan bahwa file index di atas tersimpan di dalam folder "\login-bootstrap\" sehingga sejajar dengan folder "assets", sebagaimana gambar di bawah ini.

membuat form login responsive dengan bootstrap

Sampai disini pembahasan tutorial cara membuat form login responsive dengan Bootstrap agar halaman terlihat sebagai desain yang keren dan menarik serta mobile friendly telah selesai. Selanjutnya adalah ujicoba menjalankan coding form login bootstrap tersebut pada web browser, dan berikut adalah screenshot hasil eksekusinya.

membuat form login responsive dengan bootstrap

Tutorial Cara Membuat Form Login Responsive dengan Bootstrap

Download Complete Script

Sekian penjelasan dari kami tentang tutorial cara membuat form login responsive dengan bootstrap sehingga desain halaman login menjadi keren dan menarik serta mobile friendly. Untuk mendapatkan source code nya Anda dapat langsung mendownload melalui link di atas, jika link download tidak aktif atau error mohon hubungi kami melalui SMS atau email atau melalui form komentar dan obrolan. Semoga dapat membantu.

Baca juga :


Cara Membuat Form Login Responsive dengan Bootstrap

Tags: membuat form login dengan bootstrap, membuat form login responsive, form login bootstrap, login bootstrap, membuat form login responsive dengan bootstrap


Reliable

membuat form login responsive dengan bootstrap

Advertise

Archive

Payment & Donation

membuat form login responsive dengan bootstrap

Rekening BCA : 343 1156 006

a/n : Andi Hatmoko

Rekening MANDIRI : 13300 11921 079

a/n : Andi Hatmoko

membuat form login responsive dengan bootstrap

Account :

andihatmoko@gmail.com

Live Chat

bobby wiratm2023-02-07, 15:15 pm
permisi min boleh minta source code Program Aplikasi Koperasi Simpan Pinjam
Mr. Roy2023-02-07, 09:11 am
minta link download Aplikasi Manajemen Karyawan Berbasis Web
zul2023-02-07, 08:30 am
Assalamualaikum, wr wb izin minta link download Aplikasi SPPS nya ka, jika berbayar boleh minta prosedurnya, terima kasi
Delwon2023-02-06, 11:32 am
Selamat siang admin, untuk aplikasi arsip surat berbasis webnya berapa harganya?
dek2023-02-06, 08:41 am
tanya pembuatan aplikasi entri nilai
amin2023-02-04, 12:22 pm
tanya harga aplikasi sarana dan prasarana sekolah
tukangketik2023-01-31, 15:04 pm
bikin sistem informasi surat masuk dan keluar berapa
Dimas2023-01-30, 21:08 pm
apakah aplikasi cat bisa menentukan point dari jawaban contohnya di soal tkp kan setiap poin jawaban ada nilainya
josh hutapea2023-01-26, 13:10 pm
mau pesan aplikasi gimana caranya
tania2023-01-20, 09:53 am
kalo mau mesen aplikasi berbasis web bisa ga ka
Jenny Sokoy 2023-01-11, 13:18 pm
cara membuat aplikasi absensi siswa
alvinno2022-12-27, 01:52 am
berpa aplikasi Program Aplikasi Pembayaran SPP Sekolah
Ronny2022-12-21, 17:34 pm
Jika saya butuh aplikasi CAT custom berapa ya?
reo2022-12-21, 09:46 am
berapa harga untuk apk rental mobil
anto2022-12-19, 11:48 am
aplikasi pos nya tidak bisa di download ya_ ? apa sekarang berbayar_ buat referensi tugas akhir
NDARU SUBEKT2022-12-19, 11:02 am
untuk simpeg 7_ 2 brp bos
Herawan2022-12-17, 06:24 am
Itu versi demo, utk versi non demo, ada pembayaran berapa?
afio2022-12-12, 15:55 pm
kak gimana cara download aplikasinya?
peres2022-12-09, 08:22 am
admin berapa harga aplikasi sipasnya_ ?
thomas2022-11-29, 08:07 am
brp aplikasi HRD
Repades Patr2022-11-26, 14:51 pm
aplikasi bisnis rental barang berapa ?
Ifan2022-11-19, 23:28 pm
Aplikasi pendataan pegawai harga berapa?
yunislisa2022-11-09, 10:42 am
Bisa nggak saya request aplikasi penyadap SMS? Dan biayanya berapa?
AZ2022-11-07, 16:06 pm
Halo utk aplikasi surat masuk keluar biaya nya berapa ya?
nursia2022-11-02, 15:42 pm
apakah aplikasi itu bisa di kostum sesuai kebutuhan, terimakasih, mohon info via email yaa
Nursia2022-11-02, 15:40 pm
apakah ada aplikasi tentang data pengembangan kompetensi _ diklat PNS? jika ada boleh infokan kepada saya
yosp2022-11-02, 05:35 am
saya ingin aplikasi bembayaran spp web
Irfan shobar2022-11-01, 20:20 pm
Ingin membuat KTP online
Riska koromo2022-10-20, 09:14 am
Ass Ka tutorial membuat aplikasi absen PKL berbasis web
Nst2022-10-15, 02:50 am
Bagaimana mengkoneksikannya dengan pelanggan?
Dennis2022-10-14, 22:40 pm
Saya tertarik dengan Program Rental Web Based, bagaimana untuk proses pembelianya?
Wan2022-10-07, 14:12 pm
Berapa harga aplikasi sisfo pasar
RANGGA2022-10-06, 14:10 pm
bang mau beli aplikasi pembuat KTP softcopy itu bang
Prathama2022-09-19, 15:48 pm
Aplikasi Koperasi Usaha Bisa
Andre2022-09-16, 23:31 pm
untuk aplikasi pengajuan judul skripsi berapa min
Basilio2022-09-15, 07:37 am
Pagi Bang ada aplikasi semua data siswa?
Bagus Andrem2022-09-11, 14:00 pm
Kl pembuatn aplikasi pos berbasi android berpa gan?
herry2022-09-01, 13:18 pm
saya di distribusi oksigen dgn sistem rental tabungnya_ saya butuh apk utk moinitoring tabung
Asri2022-08-27, 09:04 am
Brapa price tuk aplikasi manajemen database organisasi dan anggota 1 provinsi saja_ _
HERLI2022-08-25, 02:14 am
Untuk Harga SIPAS Brapa Bg ?
Usman Musa2022-08-24, 00:06 am
Mau tanya jika berapa biaya pembuatan Aplikasi Data Keanggotaan sebuah Organisasi atau Perguruan Silat
Bayu2022-08-20, 06:28 am
info harga aplikasi hrd berbasis web
Ferdyn Rede2022-08-07, 09:56 am
Bagaimana cara download link e_ ktp nya🙏🏻
Yuko Hermawa2022-08-05, 08:12 am
Boleh info harganya ? Ada fitur utk akses cloud gak ? Klo custom apakah bisa ?
efrin2022-07-15, 22:44 pm
Program Aplikasi Arsip Digital Berbasis Web mohon bertanya berapa harganya makasih
Toyo2022-07-13, 08:23 am
Brp harga Apk Inventory barang gudang

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
membuat form login responsive dengan bootstrap