Desain Card Profile dengan Bootstrap 4

Desain Card Profile dengan Bootstrap 4 - Dengan adanya framework bootstrap kita bisa lebih mudah dalam membuat layout web, selain itu dengan kelebihannya yaitu responsive membuat bootstrap menjadi salah satu framework CSS yang banyak digunakan dalam membuat halaman website. Pada kesempatan ini saya akan bagikan tutorial sederhana yaitu bagaimana membuat desain Desain Card Profile dengan Bootstrap 4. Buat kalian yang ingin mencoba membuat desain ini silahkan bisa simak langkah - langkahnya berikut ini.

Seperti pada judul diatas, saya akan membuat desain card dengan bootstrap, untuk itu silahkan kalian bisa menyiapkan file - file bootstrap dan icon dari fontawesome yang dibutuhkan, kalian bisa download pada halaman bootstrapnya langsung atau bisa menyisipkan library bootstrap secara online begitupun dengan fontawesome, kebetulan pada kasus ini saya menggunakan versi online untuk library dari bootstrap dan fontaweomenya seperti berikut.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-1/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Setelah file - file yang dibutuhkan sudah tersedia semua, sekarang kita buat file index.html dan membuat layout card profile. Untuk itu silahkan ketikan kodenya berikut ini.

<div class="container mt-3">
    <div class="row">
        <div class="col-5">
            <div id="accordion">
                <div class="card">
                  <div class="card-header">
                    <a class="card-link text-center" data-toggle="collapse" href="#collapseOne">
                      <img src="user.png" class="img-fluid mx-auto d-block">
                      <h4>I'am Jhon Boloh</h4>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </a>
                  </div>
                  <div id="collapseOne" class="collapse show" data-parent="#accordion">
                    <div class="card-body">
                        <p><i class="fas fa-user-tie"></i> <span class="font-weight-bold">Jhon Boloh</span></p>
                        <p><i class="fas fa-map-marker-alt"></i> <span class="font-weight-bold">Jl. Mawar Merah No - 22, Jakarta - Indonesia</span></p>
                        <p><i class="fas fa-at"></i> <span class="font-weight-bold">jhonboloh@gmail.com</span></p>
                    </div>
                  </div>
                  <div class="card-footer text-center">
                      <i class="fab fa-facebook-square"></i>
                      <i class="fab fa-twitter-square"></i>
                      <i class="fab fa-linkedin"></i>
                      <i class="fab fa-youtube-square"></i>
                      <i class="fab fa-instagram"></i>
                  </div>
                </div>
              </div>
        </div>
    </div>
</div>

Setelah membuat layout card profile seperti diatas, langkah selanjutnya kita akan desain sedikit dengan kode CSS berikut.

.card-link h4,
.card-body .fas,
.card-footer .fab {color: #14abac}
.card-footer .fab:hover {color: #f1bc19}
.card p {color: #503534}
.card-footer .fab {
    font-size: 35px !important;
    margin: 0 5px;
}

Setelah semua kode diatas telah diketikan semua, silahkan simpan kembali file index.html kemudian kalian bisa membuka hasil dibrowser masing - masing. Selesai :)

Baiklah, cukup sekian tutorial sederhana bootstrap tentang membuat Desain Card Profile dengan Bootstrap 4, semoga tutorial ini bermanfaat terutama buat kalian yang sedang belajar bootstrap dan bisa menambah referensi dalam membuat desain dengan boottsrap. Selamat mencoba dan sampai jumpa diartikel selanjutnya :)

14 Agustus 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat