In Feed Ads

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.

Ini yakni tutorial cara menciptakan desain profil card memakai  Membuat Desain Profil Card Dengan Bootstrap 4

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 menyerupai facebook, google plus dan twitter. Anda dapat mengubah hal diatas sesuai impian anda di bab html-nya.

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

Utuk membuatnya cukup sederhana, anda perlu menyalin script isyarat 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 menyerupai sublime, notepad++.
2. Jika sudah,  buat sebuah file baru, new file > beri nama index.html > paste kan isyarat 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 isyarat 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 semoga gampang dalam pemanggilan file. Atau kau dapat sesuaikan dengan proyek kamu.
5. Jika sudah, kau dapat privew hasilnya di browser kamu. Jika berhasil maka akhirnya akan menyerupai dibawah ini.
Ini yakni tutorial cara menciptakan desain profil card memakai  Membuat Desain Profil Card Dengan Bootstrap 4


Hal yang perlu kau perhatikan adalah:

  • Bootstrap yang dipakai diatas yakni script online, jadi kau haru terkoneksi dengan internet semoga 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 semoga teman-teman kau juga berguru bersama kita.

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

  1. Desain Profil Card Keren Dengan Bootstrap4 versi G+


Sekian dari aku semoga bermanfaat, Happy Koding!

Berlangganan update artikel terbaru via email:

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