Cara Pasang Component Card di Bootstrap 4

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



Ketikan kode tema 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 bikin.



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=Card yaitu komponent baru dari bootstrap  Cara Pasang Component Card di Bootstrap 4 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=Card yaitu komponent baru dari bootstrap  Cara Pasang Component Card di Bootstrap 4 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=Card yaitu komponent baru dari bootstrap  Cara Pasang Component Card di Bootstrap 4 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 :





sekianlah panduan Cara Pasang Component Card di Bootstrap 4, semoga bermanfaat yah teman teman  😀



 



 




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more