Membuat Desain Profil Card Dengan Bootstrap 4

Ini yakni tutorial cara menciptakan desain profil card memakai bootstrap 4. Desain kartu profil ini juga menngunakan html dan css custom sendiri yang dapat kau aplikasikan di project web mu.

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

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

Kartu profil berbasis web ini sudah responsif tentunya alasannya yakni memakai framework bootstrap yang populer sudah mendukung fitur responsive atau menyesuaikan ukuran device yang digunakan.

Utuk membuatnya cukup sederhana, anda perlu menyalin script arahan dibawah ini kedalam proyek anda dan sedikit melaksanakan editing. Ok, pribadi saja kita praktekkan cara membuatnya:

Cara Membuat Desain Profil Card Dengan Bootstrap 4

1. Silahkan buka aplikasi text editor favorit anda ibarat sublime, notepad++.
2. Jika sudah, buat sebuah file baru, new file > beri nama index.html > paste kan arahan 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 menyayangi 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 gres lagi, new file > berinama custom.css > pastekan arahan 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 kau meletakkan kedua file ini kedalam satu project atau folder supaya gampang dalam pemanggilan file. Atau kau dapat sesuaikan dengan proyek kamu.
5. Jika sudah, kau dapat privew hasilnya di browser kamu. Jika berhasil maka balasannya akan ibarat dibawah ini.

Hal yang perlu kau perhatikan adalah:

Bootstrap yang dipakai diatas yakni script online, jadi kau haru terkoneksi dengan internet supaya scriptnya berjalan dengan baik. Tapi jikalau kau ingin memakai untuk offline kau dapat download bootstrap4 yg offline nya.
Kamu dapat ganti profil image dengan gambar kau sendiri, caranya sialhkan copy gambar ke dalam folder project dang anti link gambar profil nya pada index.html.
Kamu dapat sesuakan semua link yang ada didalam script dengan proyek yang sedang kau kerjakan.

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

Dan jikalau kau suka dengan desain profil card kita kali ini dapat kau share dan bagikan ke social media kau supaya teman-teman kau juga berguru bersama kita.

Jika kau kurang suka, kau dapat coba beberapa desain profil card berikut ini: