iklan bagian Header

Membuat Desain Profil Card Dengan Bootstrap 4

Ini adalah tutorial cara membuat desain profil card menggunakan bootstrap 4. Desain kartu profil ini juga menngunakan html dan css custom sendiri yang bisa kamu aplikasikan di project web mu.

Membuat Desain Profil Card Dengan Bootstrap 4

Profil card adalah salah satu komponen web yang bisa anda tambahkan di dalam project web yang sedang anda kerjakan. Saya membuat desain kotak profil pengguna dengan bootstrap 4 ini bisa ditampilkan dalam bentuk grid.

Dalam desain profil card kali ini anda bisa menampilkan foto profil, foto background, tombol follow, tombol kirim pesan, nama pengguna, alamat, bio pengguna atau deskripsi dan ada juga ikon sosial media seperti facebook, google plus dan twitter. Anda bisa mengubah hal diatas sesuai keinginan anda di bagian html-nya.

Kartu profil berbasis web ini sudah responsif tentunya karena menggunakan framework bootstrap yang terkenal sudah mendukung fitur responsive atau menyesuaikan ukuran device yang digunakan.

Utuk membuatnya cukup sederhana, anda perlu menyalin script kode dibawah ini kedalam proyek anda dan sedikit melakukan editing. Ok, langsung saja kita praktekkan cara membuatnya:

Cara Membuat Desain Profil Card Dengan Bootstrap 4

1. Silahkan buka aplikasi text editor favorit anda seperti sublime, notepad++.
2. Jika sudah,  buat sebuah file baru, new file > beri nama index.html > paste kan kode dibawah ini > save.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="offset-lg-4 col-lg-4 col-sm-6 col-12 main-section text-center">
          <div class="row">
              <div class="col-lg-12 col-sm-12 col-12 profile-header"></div>
          </div>
          <div class="row user-detail">
              <div class="col-lg-12 col-sm-12 col-12">
                  <img src="img.png" class="rounded-circle img-thumbnail">
                  <h5>Kang Yogik</h5>
                  <p><i class="fa fa-map-marker" aria-hidden="true"></i> Pekanbaru, INDONESIA.</p>

                  <hr>
                  <a href="#" class="btn btn-success btn-sm">Follow</a>
                  <a href="#" class="btn btn-info btn-sm">Send Messege</a>

                  <hr>
                  <span>Seorang Newbie yang hilang ditelan gemerlap malam dan mencintai dunia teknologi.</span>
              </div>
          </div>
          <div class="row user-social-detail">
              <div class="col-lg-12 col-sm-12 col-12">
                  <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                  <a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
                  <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
              </div>
          </div>
      </div>
    </div>
  </div>
</body>
</html>
3. Kemudian buat file baru lagi, new file > berinama custom.css > pastekan kode dibawah ini > save.

body{
        background: #EFF7FE;
      padding-top: 15px;
}
.main-section{
    border:1px solid #138496;
    background-color: #fff;
}
.profile-header{
    background-color: #17a2b8;
    height:150px;
}
.user-detail{
    margin:-50px 0px 30px 0px;
}
.user-detail img{
    height:100px;
    width:100px;
}
.user-detail h5{
    margin:15px 0px 5px 0px;
}
.user-social-detail{
    padding:15px 0px;
    background-color: #17a2b8;
}
.user-social-detail a i{
    color:#fff;
    font-size:23px;
    padding: 0px 5px;
}
4. Lebih baik lagi kamu meletakkan kedua file ini kedalam satu project atau folder biar mudah dalam pemanggilan file. Atau kamu bisa sesuaikan dengan proyek kamu.
5. Jika sudah, kamu bisa privew hasilnya di browser kamu. Jika berhasil maka hasilnya akan seperti dibawah ini.
Hasil Desain Profil Card Dengan Bootstrap 4 HTML CSS


Hal yang perlu kamu perhatikan adalah:

  • Bootstrap yang digunakan diatas adalah script online, jadi kamu haru terkoneksi dengan internet biar scriptnya berjalan dengan baik. Tapi jika kamu ingin menggunakan untuk offline kamu bisa download bootstrap4 yg offline nya.
  • Kamu bisa ganti profil image dengan gambar kamu sendiri, caranya sialhkan copy gambar ke dalam folder project dang anti link gambar profil nya pada index.html.
  • Kamu bisa sesuakan semua link yang ada didalam script dengan proyek yang sedang kamu kerjakan.

Semoga tutorial kali ini bisa bekerja dengan baik pada kamu juga, dan semoga desain kartu profil ini bisa diterapkan pada project kamu. Apabila ada error atau pertanyaan bisa ditanyakan di kolom komentar dibawah ini.

Dan jika kamu suka dengan desain profil card kita kali ini bisa kamu share dan bagikan ke social media kamu biar teman-teman kamu juga belajar bersama kita.

Jika kamu kurang suka, kamu bisa coba beberapa desain profil card berikut ini:

  1. Desain Profil Card Keren Dengan Bootstrap4 versi G+


Sekian dari saya semoga bermanfaat, Happy Koding!

0 Response to "Membuat Desain Profil Card Dengan Bootstrap 4"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel