Cara Pasang Component Card di Bootstrap 4

Card adalah komponent baru dari bootstrap 4, sebelumnya di bootstrap 3 ada yang namanya class panels sekarang component panels di ganti dengan Card pada Bootstrap 4 ini, oke klai ini saya akan share bagaimana Cara Pasang Component Card di Bootstrap 4.

Ketikan kode template basic Bootstrap 4 di bawah dan beri nama index.html

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Card Bootstrap 4</title>   
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    
  </head>
  <body>
      
      
  </body>
</html>

sebelum tag penutup body ketikan kode script di bawah ini

<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js””></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js” ></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js” ></script>

sebelum itu kalian siapkan gambar apa saja yah di google atau di manapun itu, dan simpan sejajar dengan file html yang di atas yang telah kita buat.

lalu ketikan kode html berikut diantara tag body:

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

    <h1 class="col-12 bg-info text-center text-white display-2">Class Car Bootstrap 4</h1>
    <div class="col">
       <div class="card">
         <img src="1.jpg" alt="" class="card-img-top img-fluid">
          <div class="card-block">
            <h4 class="card-title">Node Js Training</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam officia doloribus possimus aliquam rem, praesentium omnis quo explicabo dolore assumenda sed expedita vel sequi debitis, reiciendis ipsam optio, aperiam eaque?</p>
          </div>
       </div>
    </div>
     <div class="col">
       <div class="card">
         <img src="1.jpg" alt="" class="card-img-top img-fluid">
          <div class="card-block">
            <h4 class="card-title">Node Js Training</h4>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam officia doloribus possimus aliquam rem, praesentium omnis quo explicabo dolore assumenda sed expedita vel sequi debitis, reiciendis ipsam optio, aperiam eaque?</p>
          </div>
       </div>
     </div>
     <div class="col">
        <div class="card">
         <img src="1.jpg" alt="" class="card-img-top img-fluid">
          <div class="card-block">
            <h4 class="card-title">Node Js Training</h4>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam officia doloribus possimus aliquam rem, praesentium omnis quo explicabo dolore assumenda sed expedita vel sequi debitis, reiciendis ipsam optio, aperiam eaque?</p>
          </div>
       </div>
     </div>

     <div class="jumbotron jumbotron-fluid col-12 my-3 bg-info">
        <p class="display-4 text-center text-white">Bootstrap 4</p>
     </div>
   </div>
 </div>

hasilnya seperti di bawwah ii teman teman :

sekian tutorial Cara Pasang Component Card di Bootstrap 4, semoga bermanfaat yah teman teman  😀