search

Cara mengatur ukuran card bootstrap

1 years ago
Komentar: 0
Dibaca: 100

Kembali lagi di tutorial bootstrap ke 28, yang kali ini kita akan membahas mengenai komponen bootstrap yaitu Cards.

Show

Card adalah salah satu komponen bootstrap yang fungsi utama nya sebagai wadah bagi komponen lain. Card pada botstrap memiliki banyak komponen didalamnya seperti header, footer, bagian konten, warna latar, sampai gambar. Card pada bootstrap versi 4 merupakan pengganti dari komponen panel, wells, dan thumbnails pada bootstrap versi 3.

Bagian pokok dari card sendiri ada 3 bagian yaitu Header (untuk menaruh judul dari konten card), konten (berisi teks, link atau gambar), dan Footer (bagian ini berisi keterangan pelengkap).

Section Artikel

Basic Card

Seperti komponen botstrap lainnya Card dan komponennya dibuat menggunakan class-class yang tersedia bada bootstrap (khususnya versi 4). Card dasar atau basic dibuat dengan menambahkan class.card pada tag <div>sebagai penandanya. Untuk membuat headernya kita tinggal menambahkan class 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Cards with Contextual Classes</h2>
  <div class="card">
    <div class="card-body">Basic card</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
  </div>
</div>

</body>
</html>
0 pada tag <div>, untuk bagian kontennya silahkan teman- teman tambahkan class
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Cards with Contextual Classes</h2>
  <div class="card">
    <div class="card-body">Basic card</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
  </div>
</div>

</body>
</html>
2pada element <div> dan yang terakhir adalah untuk footernya silahkan memakai class 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Cards with Contextual Classes</h2>
  <div class="card">
    <div class="card-body">Basic card</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
  </div>
</div>

</body>
</html>
4 yang juga biasa ditempatkan dalam element <div>.

Contoh sederhananya adalah seperti dibawah:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Contoh Card Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Ini adalah contoh Card bootstrap</h2>
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">Content</div> 
    <div class="card-footer">Footer</div>
  </div>
</div>

</body>
</html>

Contextual card

Diatas sudah saya singgung mengenai pemberian warna pada card bootstrap, pada bagian ini akan saya jelaskan mengenai hal tersebut. Sebelum membahas ini juga saya harap teman – teman sudah membaca tutorial sebelumnya yaitu Warna di Bootstrap: Bootstrap Tutorial #6, Karena akan sangat berkaitan diantara kedua hal ini.

Singkatnya ada beberapa class untuk memberi warna pada background yaitu:

ClassWarna
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Cards with Contextual Classes</h2>
  <div class="card">
    <div class="card-body">Basic card</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
  </div>
</div>

</body>
</html>
6warna background biru muda
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Cards with Contextual Classes</h2>
  <div class="card">
    <div class="card-body">Basic card</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
  </div>
</div>

</body>
</html>
7warna background hijau
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Cards with Contextual Classes</h2>
  <div class="card">
    <div class="card-body">Basic card</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
  </div>
</div>

</body>
</html>
8warna background biru tua
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Cards with Contextual Classes</h2>
  <div class="card">
    <div class="card-body">Basic card</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
  </div>
</div>

</body>
</html>
9warna background kuning
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Disini judul card</h4>
      <p class="card-text">Text dalam element p</p>
      <a href="#" class="card-link">Link 1</a>
      <a href="#" class="card-link">Link 2</a>
    </div>
  </div>
</div>
  
<div class="container">
  <h2>Stretched Link</h2>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:50%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary stretched-link">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
0warna background merah
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Disini judul card</h4>
      <p class="card-text">Text dalam element p</p>
      <a href="#" class="card-link">Link 1</a>
      <a href="#" class="card-link">Link 2</a>
    </div>
  </div>
</div>
  
<div class="container">
  <h2>Stretched Link</h2>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:50%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary stretched-link">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
1warna background abu-abu
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Disini judul card</h4>
      <p class="card-text">Text dalam element p</p>
      <a href="#" class="card-link">Link 1</a>
      <a href="#" class="card-link">Link 2</a>
    </div>
  </div>
</div>
  
<div class="container">
  <h2>Stretched Link</h2>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:50%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary stretched-link">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
2warna background gelap/abu-abu tua
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Disini judul card</h4>
      <p class="card-text">Text dalam element p</p>
      <a href="#" class="card-link">Link 1</a>
      <a href="#" class="card-link">Link 2</a>
    </div>
  </div>
</div>
  
<div class="container">
  <h2>Stretched Link</h2>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:50%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary stretched-link">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
3warna background silvertabel warna

Selain memberi warna pada background kita juga dapat memberi warna tulisannya dengan class 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Disini judul card</h4>
      <p class="card-text">Text dalam element p</p>
      <a href="#" class="card-link">Link 1</a>
      <a href="#" class="card-link">Link 2</a>
    </div>
  </div>
</div>
  
<div class="container">
  <h2>Stretched Link</h2>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:50%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary stretched-link">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
4 untuk tulisan berwarna puih dan class 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Disini judul card</h4>
      <p class="card-text">Text dalam element p</p>
      <a href="#" class="card-link">Link 1</a>
      <a href="#" class="card-link">Link 2</a>
    </div>
  </div>
</div>
  
<div class="container">
  <h2>Stretched Link</h2>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:50%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary stretched-link">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
5 untuk tulisan berwarna hitam.

Contoh nya adalah:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h2>Cards with Contextual Classes</h2>
  <div class="card">
    <div class="card-body">Basic card</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
  </div>
</div>

</body>
</html>

Untuk membuat Judul tambahkan class 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Disini judul card</h4>
      <p class="card-text">Text dalam element p</p>
      <a href="#" class="card-link">Link 1</a>
      <a href="#" class="card-link">Link 2</a>
    </div>
  </div>
</div>
  
<div class="container">
  <h2>Stretched Link</h2>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:50%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary stretched-link">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
6 pada element heading (tag h1-h6). Pada contoh dibawah saya menggunakan class 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Disini judul card</h4>
      <p class="card-text">Text dalam element p</p>
      <a href="#" class="card-link">Link 1</a>
      <a href="#" class="card-link">Link 2</a>
    </div>
  </div>
</div>
  
<div class="container">
  <h2>Stretched Link</h2>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:50%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary stretched-link">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
7 dalam body card untuk menghilangkan margin bawah untuk element
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Disini judul card</h4>
      <p class="card-text">Text dalam element p</p>
      <a href="#" class="card-link">Link 1</a>
      <a href="#" class="card-link">Link 2</a>
    </div>
  </div>
</div>
  
<div class="container">
  <h2>Stretched Link</h2>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:50%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary stretched-link">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
8, jika elemen atau tag 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Disini judul card</h4>
      <p class="card-text">Text dalam element p</p>
      <a href="#" class="card-link">Link 1</a>
      <a href="#" class="card-link">Link 2</a>
    </div>
  </div>
</div>
  
<div class="container">
  <h2>Stretched Link</h2>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:50%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary stretched-link">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
8 ini merupakan tag konten terakhir dari card (bisa juga hanya tag 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Disini judul card</h4>
      <p class="card-text">Text dalam element p</p>
      <a href="#" class="card-link">Link 1</a>
      <a href="#" class="card-link">Link 2</a>
    </div>
  </div>
</div>
  
<div class="container">
  <h2>Stretched Link</h2>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:50%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary stretched-link">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
8 isi dari card).

Sedangkan untuk membuat link dalam card tambahakan class 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <p>Gambar berada diatas (card-img-top):</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
  <br>
  
  <p>Gambar berada dibawah (card-img-bottom):</p>
  <div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
    <img class="card-img-bottom" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
  </div>
</div>
<div class="container">
  <h2>Card Overlay</h2>
  <div class="card img-fluid" style="width:500px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
1 dalam elemen
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <p>Gambar berada diatas (card-img-top):</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
  <br>
  
  <p>Gambar berada dibawah (card-img-bottom):</p>
  <div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
    <img class="card-img-bottom" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
  </div>
</div>
<div class="container">
  <h2>Card Overlay</h2>
  <div class="card img-fluid" style="width:500px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
2. Atau ada juga yang dinamakan Stretched Link yaitu membuat seluruh card dapat diklik (Card seolah-olah merupakan link).

Contoh script nya:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Disini judul card</h4>
      <p class="card-text">Text dalam element p</p>
      <a href="#" class="card-link">Link 1</a>
      <a href="#" class="card-link">Link 2</a>
    </div>
  </div>
</div>
  
<div class="container">
  <h2>Stretched Link</h2>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:50%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary stretched-link">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>

Card Bergambar

Seperti hal-hal yang kita lakukan sebelumnya , Untuk menambahkan gambar dalam Card Bootstrap kita hanya perlu menggunakan class 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <p>Gambar berada diatas (card-img-top):</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
  <br>
  
  <p>Gambar berada dibawah (card-img-bottom):</p>
  <div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
    <img class="card-img-bottom" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
  </div>
</div>
<div class="container">
  <h2>Card Overlay</h2>
  <div class="card img-fluid" style="width:500px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
3 atau 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <p>Gambar berada diatas (card-img-top):</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
  <br>
  
  <p>Gambar berada dibawah (card-img-bottom):</p>
  <div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
    <img class="card-img-bottom" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
  </div>
</div>
<div class="container">
  <h2>Card Overlay</h2>
  <div class="card img-fluid" style="width:500px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
4 dalam tag 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <p>Gambar berada diatas (card-img-top):</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
  <br>
  
  <p>Gambar berada dibawah (card-img-bottom):</p>
  <div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
    <img class="card-img-bottom" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
  </div>
</div>
<div class="container">
  <h2>Card Overlay</h2>
  <div class="card img-fluid" style="width:500px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
5. Class 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <p>Gambar berada diatas (card-img-top):</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
  <br>
  
  <p>Gambar berada dibawah (card-img-bottom):</p>
  <div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
    <img class="card-img-bottom" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
  </div>
</div>
<div class="container">
  <h2>Card Overlay</h2>
  <div class="card img-fluid" style="width:500px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
3 digunakan jika teman – teman ingin menempatkan gambar dibagian atas semua element dalam card, sedangkan class 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <p>Gambar berada diatas (card-img-top):</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
  <br>
  
  <p>Gambar berada dibawah (card-img-bottom):</p>
  <div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
    <img class="card-img-bottom" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
  </div>
</div>
<div class="container">
  <h2>Card Overlay</h2>
  <div class="card img-fluid" style="width:500px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
4 digunakan untuk menempatkan gambar dibagian bawah semua komponen dalam card.

Gambar dapat juga digunakan sebagai background dari card bootstrap ini dinamakan overlay card. Untuk membuat hal ini kita tambahkan class 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <p>Gambar berada diatas (card-img-top):</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
  <br>
  
  <p>Gambar berada dibawah (card-img-bottom):</p>
  <div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
    <img class="card-img-bottom" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
  </div>
</div>
<div class="container">
  <h2>Card Overlay</h2>
  <div class="card img-fluid" style="width:500px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
8. Untuk penggunaannya sendiri dapat teman-teman lihat pada contoh program dibawah.

Catatan: Saat menambahakan gambar pada card tempatkan tag <img> diluar card body agar gambar dapat menyesuaikan lebar dan tinggi dari card.

Contoh programnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <p>Gambar berada diatas (card-img-top):</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
  <br>
  
  <p>Gambar berada dibawah (card-img-bottom):</p>
  <div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
    <img class="card-img-bottom" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
  </div>
</div>
<div class="container">
  <h2>Card Overlay</h2>
  <div class="card img-fluid" style="width:500px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>

Kolom Card

Pernah lihat tampilan dari pinterest ? Seperti itu lah gambaran dari kolom Card bootstrap. Untuk membuat nya kita tinggal menambahkan class 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <p>Gambar berada diatas (card-img-top):</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
  <br>
  
  <p>Gambar berada dibawah (card-img-bottom):</p>
  <div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
    <img class="card-img-bottom" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
  </div>
</div>
<div class="container">
  <h2>Card Overlay</h2>
  <div class="card img-fluid" style="width:500px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
9. Layout dari kolom-kolomnya sendiri akan otomatis menyesuaikan saat kita memasukkan lebih banyak Card dalam class 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <p>Gambar berada diatas (card-img-top):</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
  <br>
  
  <p>Gambar berada dibawah (card-img-bottom):</p>
  <div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
    <img class="card-img-bottom" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
  </div>
</div>
<div class="container">
  <h2>Card Overlay</h2>
  <div class="card img-fluid" style="width:500px">
    <img class="card-img-top" src="https://dosenit.com/wp-content/uploads/2020/11/—Pngtree—vector-users-icon_4144740.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">Yoga Bayu</h4>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <p class="card-text">Seorang freelance copywriter</p>
      <a href="#" class="btn btn-primary">Lihat Profil</a>
    </div>
  </div>
</div>
</body>
</html>
9.

Ada hal yang perlu diperhatikan yaitu jika teman-teman menggunakan layar (laptop/hp) berukuran kurang dari 576px maka card akan ditampilkan secara vertikal.

Contoh penggunaannya:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container">
  <div class="card-columns">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-warning">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-success">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-danger">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>  
    <div class="card bg-light">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-info">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
  </div>
</div>

</body>
</html>

penambahan class

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container">
  <div class="card-columns">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-warning">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-success">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-danger">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>  
    <div class="card bg-light">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-info">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
  </div>
</div>

</body>
</html>
1 untuk membuat text yang ada dalam body card berada ditengah.

Card deck

Card deck ini mirip dengan Card kolom tetapi bedanya adalah kalau card kolom tinggi dari card didalamnya menyesuaikan terhadap konten lain halnya dengan card deck, dalam card deck isi card didalamya akan memiliki tinggi dan lebar yang sama meskipun isi atau konten nya banyaknya berbeda. Layout dari card deck juga akan otomatis menyesuaikan ketika banyak card yang dimasukkan.

Ada hal yang perlu diperhatikan yaitu jika teman-teman menggunakan layar (laptop/hp) berukuran kurang dari 576px maka card akan ditampilkan secara vertikal.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container">
  <div class="card-deck">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam card pertama</p>
        <p class="card-text">Tambahkan banyak konten untuk menambahakan tinggi card</p>
        <p class="card-text">Tambahkan banyak konten untuk menambahakan tinggi card</p>
      </div>
    </div>
    <div class="card bg-warning">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam card kedua</p>
      </div>
    </div>
    <div class="card bg-success">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam card ketiga</p>
      </div>
    </div>
    <div class="card bg-danger">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam card keempat</p>
      </div>
    </div>  
  </div>
</div>

</body>
</html>

Card sebagai Menu Navigasi

Card juga dapat digunakan sebagai menu navigasi dalam sebuah situs. Yaitu dengan mengisi header dari card dengan class navbar (baca: Navbar Bootstrap: Bootstrap Tutorial #26). Text dalam card juga dapat kita atur perataannya dengan menggunakan class text align yaitu 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container">
  <div class="card-columns">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-warning">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-success">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-danger">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>  
    <div class="card bg-light">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-info">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
  </div>
</div>

</body>
</html>
1 untuk text berada ditengah, 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container">
  <div class="card-columns">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-warning">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-success">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-danger">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>  
    <div class="card bg-light">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-info">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
  </div>
</div>

</body>
</html>
3 untuk text berada di bagian kanan card, sedangkan untuk membuat text rata kiri kita tidak perlu menambahkan class text-left karena secara default perataan dari card adalah rata kiri.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container">
  <div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Menu aktif</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">LInk</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Judul Card</h5>
    <p class="card-text">ini adalah text dalam card.</p>
    <a href="#" class="btn btn-primary">Ke Menu 2</a>
  </div>
</div>
</div>

</body>
</html>

Card Border

Selain diberi gambar atau background card bootstrap juga dapat kita beri border dengan menambahakan class border-warna. untuk daftar warnanya sendiri sama dengan tabel warna diatas ya. contoh: 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body> 
 
<div class="container">
  <div class="card-columns">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-warning">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-success">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-danger">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>  
    <div class="card bg-light">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
    <div class="card bg-info">
      <div class="card-body text-center">
        <p class="card-text">Ini text didalam kolom</p>
      </div>
    </div>
  </div>
</div>

</body>
</html>
4 dan seterusnya.

kode bootstrap

Pos Terkait

Cara menggunakan apa work sheet?
Cara menggunakan apa work sheet?

File instalasi tidak ditemukan wordpress
File instalasi tidak ditemukan wordpress

Apa yang didefinisikan dalam mysql?
Apa yang didefinisikan dalam mysql?

Cara menggunakan plot 3d gaussian python
Cara menggunakan plot 3d gaussian python

Opasitas warna latar belakang css tanpa rgba
Opasitas warna latar belakang css tanpa rgba

Cara menggunakan connect database php
Cara menggunakan connect database php

Bagaimana Anda menulis teks hanya dalam html?
Bagaimana Anda menulis teks hanya dalam html?

Hapus menggunakan peringatan manis di php mysql
Hapus menggunakan peringatan manis di php mysql

Cara menggunakan python requests path traversal
Cara menggunakan python requests path traversal

Lembar google yang dibagikan tidak diperbarui
Lembar google yang dibagikan tidak diperbarui

Periklanan

BERITA TERKINI

Cara membuat kotak ajaib dengan python
1 years ago . by VerticalAnkle
Cara menggunakan perintah php-fpm
1 years ago . by HelmetedCloseness
Cara membuat tas dari kain satin
1 years ago . by HomesickClerk
Tarik data dari kamus python bersarang
1 years ago . by SpecializedRegulator
Sesi php berakhir terlalu cepat
1 years ago . by ArrestingPneumonia
Cara menghapus aplikasi yang tidak bisa dihapus di HP Realme
1 years ago . by TemptingHousing
Cara mengecek rumus di google sheets
1 years ago . by SaturatedAppraisal
How to install PHP GD in xampp?
1 years ago . by BorrowedFoyer
Concat string dalam loop php
1 years ago . by CardboardAllegation
Di mana prosedur tersimpan di mysql?
1 years ago . by CounterproductiveLiterature

Toplist Popular

#1
Top 10 6 nilai minimum f x y 4x 2y pada d 16 e 14 2x 3y 18 4x 3y 24 x 0 y 0 adalah a 40 b 36 c 2022
1 years ago
#2
Top 10 dia selalu lupa membawa pensil ke sekolah saran yang tepat untuk dia adalah 2022
1 years ago
#3
Top 10 diketahui sebuah data tunggal 2 4 6, 7 7, 8, 9, 10 berapakah modusnya 2022
1 years ago
#4
Top 10 persamaan kuadrat yang akar akarnya 7/ 2 dan -5 adalah 2022
1 years ago
#5
Top 10 jika panjang sisi bangun persegi panjang 16 cm dan lebar 8 cm maka kelilingnya adalah 2022
1 years ago
#6
Top 9 perhatikan gambar mata berikut nama bagian mata yang ditunjukkan angka i dan ii adalah 2022
1 years ago
#7
Top 10 jelaskan apa yang dimaksud dengan 3 jenis kemasan? 2022
1 years ago
#8
Top 9 sebutkan tiga keadilan yang harus terwujud dalam kehidupan bermasyarakat 2022
1 years ago
#9
Top 10 pada getaran harmonik pegas, jika massa beban yang digantung pada ujung bawah pegas 100g 2022
1 years ago
#10
Top 10 permainan bulu tangkis di atas meja yang dimainkan oleh dua atau empat orang 2022
1 years ago

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social

homeendejakoptzhthittr
Copyright © 2024 apacode Inc.