Desain Card Profile dengan Bootstrap 4

14/08/2019    Risman Hakim    299     Website

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 :)

Web Design, Bootstrap

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More