Cara Membuat Card List Menggunakan Bootstrap 4

Hallo sobat program, Bertemu kembali dengan saya Rizal dan masih di laman Source Code Aplikasi. kali ini kita akan mengupgrade skill didunia framework css yaitu menggunakan Bootstrap 4. Dan di pembahasan kali ini kita akan coba Cara Membangun Card List Menggunakan Bootstrap 4.

Sebelum masuk ke pembahasan, saya harap teman-teman telah terlebih dahulu mengenal bootstrap agar lebih gampang memahaminya. Mari kita mulai pembahasan, saya harap teman-teman buka terlebih dahulu laman resmi boostrap nya disini >> https://getbootstrap.com/

Didalam boostrap sesungguhnya telah terdapat fitur card, jadi kita hanya tinggal gunakan saja fitur tsb. Caranya simak penjelasan dibawah ini :

Pertama-tama teman-teman bikin sebuah folder dan siapkan gambar lalu ikutin langkah seperti di gambar dibawah ini dan disini kita mesti ada koneksi internet karena kita akan menggunakan boostrap 4 CDN dan stepnya seperti dibawah ini :

Bila telah, basic tampilan dari boostrap 4 langkah berikutnya teman-teman ubah script basic nya menjadi seperti di gambar dibawah ini :

Bila telah seperti di gambar diatas langkah berikutnya kita masukan script card di boostrap 4, teman-teman dapat lihat stepnya di gambar dibawah ini :

Lalu script card diatas dicopy dan dimasukan kedalam script kita di gambar 2, bila telah karenanya hasil dari script tsb akan menjadi seperti di contoh dibawah ini dan silahkan disesuaikan dengan nama serta format file gambar teman-teman.

<div class=container>
      <div class=row>
        <div class=col-md-4>
          <div class=card style=width: 20rem;>
            <img class=card-img-top rounded-circle border border-dark src=Murihat.png alt= Bertemu kembali dengan saya Rizal dan masih di laman Source Code Aplikasi Cara Membangun Card List Menggunakan Bootstrap 4>
            <div class=card-body>
              <h4 class=card-title>Card title</h4>
              <p class=card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href=# class=btn btn-primary>Go somewhere</a>
            </div>
          </div>
        </div>
        <div class=col-md-4>
          <div class=card style=width: 20rem;>
            <img class=card-img-top rounded-circle border border-dark src=Murihat.png alt= Bertemu kembali dengan saya Rizal dan masih di laman Source Code Aplikasi Cara Membangun Card List Menggunakan Bootstrap 4>
            <div class=card-body>
              <h4 class=card-title>Card title</h4>
              <p class=card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href=# class=btn btn-primary>Go somewhere</a>
            </div>
          </div>
        </div>
        <div class=col-md-4>
          <div class=card style=width: 20rem;>
            <img class=card-img-top rounded-circle border border-dark src=Murihat.png alt= Bertemu kembali dengan saya Rizal dan masih di laman Source Code Aplikasi Cara Membangun Card List Menggunakan Bootstrap 4>
            <div class=card-body>
              <h4 class=card-title>Card title</h4>
              <p class=card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href=# class=btn btn-primary>Go somewhere</a>
            </div>
          </div>  
        </div>
      </div>
</div>

Di default card boostrap gambar masih berbentuk kotak dan di script diatas saya telah tambahkan class rounded-circle dan border karenanya hasilnya akan menjadi seperti di gambar dibawah ini :

Oke jadi seperti seperti itulah contoh sederhana Cara Membangun Card List Menggunakan Bootstrap 4. Lumayan gampang ya teman-teman karena semuanya telah disediakan oleh bootstrap jadi kita hanya tinggal mengcostum saja sesuai keinginan.

Oke kalau demikian itu lumayan hingga disini pembahasan kita mengenai Cara Membangun Card List Menggunakan Bootstrap 4. Semoga dapat bermanfaat dan hingga bertemu dipembahasan berikutnya.

Terimakasih

 

Sumber https://kursuswebsite.org