Membuat Kotak Panel Card Bootstrap Keren


Membuat Kotak Panel Card Bootstrap Keren

Assalamualaikum Wr. Wb.
Dipembahasan kali ini saya akan memberikan tutorial membuat kotak panel card bootstrap. yang dimana panel card ini saya terapkan juga diblog ini. Seperti yang kita ketahui, istilah card memang sering dipakai pada Material Design. Sedangkan Bootstrap versi 3 tidak memiliki komponen card. Mungkin saja akan ditambahkan pada versi ke-4. Kita tunggu saja.

Pada kesempatan ini, kita akan belajar cara modifikasi komponen panel Bootstrap untuk dijadikan Card.

Berikut ini tampilan hasil akhir yang akan kita buat:

Panel Card Boostrap

Oke, yuk langsung aja tutorial pembuatannya dibawah ini

Pertama, kita siapkan dulu grid layout dengan dua kolom.

<div class="container">
    <div class="row">

        <div class="col-md-6">
            <!-- komponen panel di sini  -->
        </div>

        <div class="col-md-6">
            <!-- komponen panel di sini  -->
        </div>

    </div>
</div>

Keterangan: kamu bisa sesuaikan gridnya, bisa 3 ataupun bisa 4

 

Nah selanjutnya, kita buat panelnya. Ada 4 item yang ingin kita tampilkan:

  1. Gambar Artikel
  2. Label
  3. Judul Artikel
  4. Penulis

Maka kode panelnya akan seperti ini.

<div class="panel panel-default">

    <div class="panel-heading post-thumb">
        <img class="img img-responsive" src="gambar.jpg" />
    </div>

    <div class="panel-body post-body">
        <a class="label label-default" href="#">Label</a>
        <h3 class="post-title">
            <a href="#">Judul Artikel</a>
        </h3>

        <div class="post-author">
            <img class="author-photo" height="32" src="foto.jpg" width="32">
            <a href="#">Penulis</a>
        </div>
    </div>

</div>

 

Nah silahkan masukan kode panel di atas ke dalam kode sebelumnya. Agar tinggi card terlihat sama, gunakan ukuran gambar artikel yang sama. Rekomendasi ukuran 700x350 px.

Selanjutnya kita buat kode cssnya dengan kode berikut

/* tinggi card */
.post-body {
    height: 215px;
    position: relative;
    padding: 20px 15px 0;
    box-shadow: 0px 2px 20px rgba(0,0,0,0.2);
}

/* untuk menghilangkan padding pada .panel-heading */
.post-thumb {
    padding: 0
}

/* mengatur font dan link judul artikel*/
.post-title a {
    color: rgba(0,0,0,0.7);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.5em;
    letter-spacing: 0.01rem;
}
.post-title a:hover { text-decoration: none }

/* posisi author selalu di bawah */
.post-author {
    position: absolute;
    bottom: 15px;
    left: 15px;
    font-size: 13px;
}

.post-author .author-photo {
    margin-right: 10px;
    border-radius: 50%;
}
.card:hover {
    box-shadow: 0px 2px 20px rgba(0,0,0,0.2);
}

 

Maka kode akhirnya akan seperti ini

Setelah itu, gunakan class .card pada panel:

<div class="panel panel-default card">

    <div class="panel-heading post-thumb">
        <img class="img img-responsive" src="gambar.jpg" />
    </div>

    <div class="panel-body post-body">
        <a class="label label-default" href="#">Label</a>
        <h3 class="post-title">
            <a href="#">Judul Artikel</a>
        </h3>

        <div class="post-author">
            <img class="author-photo" height="32" src="foto.jpg" width="32">
            <a href="#">Penulis</a>
        </div>
    </div>

</div>

 

 

Nah gimana? cukup mudahkan? silahkan dicoba dulu. dijamin keren, jangan lupa share ya! semoga bermanfaat :)

Wassalamualaikum Wr. Wb.

http://short.melipirlah.com/FGSVd

Suka Dengan Artikel ini? Bagikan!  
Facebook Twitter LINE WhatsApp