author Ahmad Muhardian

Tips Modifikasi Panel Bootstrap untuk dijadikan Card


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 Bootstrap

Mempersiapkan Grid Layout

Pertama, kita siapkan dulu grid layout dengan empat kolom.

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

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

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

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

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

    </div>
</div>

Menambahkan Panel

Nah selanjutnya, kita buat panelnya. Ada empat 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.

Demo hasilnya:

Agar tinggi card terlihat sama, gunakan ukuran gambar artikel yang sama. Rekomendasi ukuran 700x350 px.

Kode CSS

Terlihat pada hasil demo di atas, tampilannya masih belum rapi. Karena menggunakan style dari Bootstrap.

Tugas kita selanjutnya adalah membuat kode CSS sendiri untuk mengatur komponen panel tersebut.

Seperti yang terlihat pada kode panel di atas, terdapat class yang harus kita buat.

  1. .post-body: untuk mengatur agar tinggi card sejajar
  2. .post-thumb: untuk mengatur tampilan gambar artikel
  3. .post-title: judul artikel
  4. .post-author dan .author-photo untuk nama dan foto penulisya

Mari kita buat kodenya:

/* tinggi card */
.post-body {
    height: 215px;
    position: relative;
    padding: 20px 15px 0;
}

/* 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%;
}

Demo hasil setelah ditambahkan CSS:

Terlihat cukup bagus.

Silahkan lakukan kreasi sesukamu.

Bonus: Efek Bayangan Ketika Card disentuh

Baiklah, sebagai bonus, kita tambahkan efek bayangan ketika card-nya disentuh pointer. Efek ini akan membuat card terlihat lebih keren 😄.

Tambahkan kode CSS berikut:

.card:hover {
    box-shadow: 0px 2px 20px rgba(0,0,0,0.2);
}

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>

Maka hasilnya akan seperti ini:

Bagaimana, mudah bukan?

Selamat berkreasi.

Baca Juga ini

Tutorial Bootstrap: Memahami Fungsi Tag Meta Viewport

Tutorial Bootstrap: Memahami Fungsi Tag Meta Viewport

Tag Meta Viewport adalah tag HTML yang penting bagi Bootstrap untuk membuat halaman web menjadi responsif.

Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout

Tutorial Bootstrap: Memahami Sistem Grid untuk membuat Layout

Sistem Grid adalah bagian terpenting yang harus dipahami pada Bootstrap. Apa itu sistem grid? Gimana cara menggunakan sistem grid. Mari kita pelajari!

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Pada tutorial ini, kamu akan belajar dasar Bootstrap. Mulai mengenal sejarah bootstrap, hingga mencoba sendiri Bootstrap pada HTML

Cara Cepat Modifikasi Navbar Bootstrap

Cara Cepat Modifikasi Navbar Bootstrap

Ada dua jenis warna pilihan navbar yang ditawarkan Bootstrap: Warna putih (navbar-default) dan warna hitam (navbar-inverse). Selain dari dua warna tersebut, kita harus memodifikasinya sendiri. Pada kesempatan ini, saya akan berbagi cara cepat memodifikasi navbar Bootstrap dengan cepat. 1. Menggunakan GeneratorAda sebuah generator canggih yang dibuat oleh Samuel Marchal. Kita dapat menentukan warna navbar bootstrap sesui selera. Kemudian akan diberikan kode CSS, LESS, SCSS, dan SASS yang dapat kita gunakan langsung.

Cara Menggunakan Font-awesome untuk Membuat Ikon pada Web

Cara Menggunakan Font-awesome untuk Membuat Ikon pada Web

Dulu… saya sempat berpikir: Pembuatan web sepertinya susah, karena banyak komponen yang harus dibuat. Seperti background dan ikon. Bagi seorang desainer, mungkin tidak masalah membuat banyak gambar background dan ikon. Tapi, bagi programmer atau developer…ini sangat merepotkan. Untunglah ada Font-awesome, yang merupakan framework CSS untuk membuat ikon. Font-awesome memiliki ratusan ikon yang bisa kita gunakan. Pada tulisan ini, kita akan belajar cara membuat ikon menggunakan Font-awesome. Dimulai dari tahap instalasi sampai ke pembuatan animasi.

7 Manfaat Inspect Element Bagi Web Developer

7 Manfaat Inspect Element Bagi Web Developer

Inspect Element merupakan fitur browser yang dibuat untuk memudahkan pengembangan web. Inspect Element dapat kita akses dengan klik kanan, kemudian memilih Inspect Element, atau bisa juga dengan menekan tombol F12. Adapun manfaat dari Inspect Element untuk web Developer adalah sebagai berikut. 1. Tempat Eksperimen CSSSelain ada console Javascript, bisa dibilang di Inspect Elemen juga ada console-nya CSS. Ya, di sana kita bisa eksperimen kode CSS. Sebelum kita menulis kode CSS, sebaiknya gunakan Inspect Element terlebih dahulu.