CloseTag | الشروحات | Bootstrap | البطاقات في BootStrap | Bootstrap Cards

<!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap demo</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    </head>
    <body>


      <div class="container mt-3" style="display:flex; justify-content:space-evenly">
        <div class="card" style="width:200px;">
          <img class="card-img-bottom" src="https://www.closetag.com/images/avatar1.png" alt="Card image" style="width:100%;margin-bottom:0">
          <div class="card-body">
            <h4 class="card-title">Mostafa</h4>
            <p class="card-text">Some example text</p>
            <a href="#" class="btn btn-primary">See Profile</a>
          </div>
        </div>
        <div class="card" style="width:200px;">
          <div class="card-body">
            <h4 class="card-title">Mostafa</h4>
            <p class="card-text">Some example text</p>
            <a href="#" class="btn btn-primary">See Profile</a>
          </div>
          <img class="card-img-bottom" src="https://www.closetag.com/images/avatar1.png" alt="Card image" style="width:100%;margin-bottom:0">
        </div>
        <div class="card img-fluid" style="width:200px">
          <img class="card-img-bottom" src="https://www.closetag.com/images/avatar1.png" alt="Card image" style="width:100%;margin-bottom:0">           
          <div class="card-img-overlay">
            <h4 class="card-title">Mostafa</h4>
            <p class="card-text">Some example text.</p>
            <a href="#" class="btn btn-primary">See Profile</a>
          </div>
        </div>
      </div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
    </body>
  </html>

PCFkb2N0eXBlIGh0bWw+DQogIDxodG1sIGxhbmc9ImVuIj4NCiAgICA8aGVhZD4NCiAgICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4NCiAgICAgIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MSI+DQogICAgICA8dGl0bGU+Qm9vdHN0cmFwIGRlbW88L3RpdGxlPg0KICAgICAgPGxpbmsgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4yLjAvZGlzdC9jc3MvYm9vdHN0cmFwLm1pbi5jc3MiIHJlbD0ic3R5bGVzaGVldCIgaW50ZWdyaXR5PSJzaGEzODQtZ0gyeUlKcUtkTkhQRXEwbjRNcWEvSEdLSWhTa0lIZUw1QXloa1lWOGk1OVU1QVI2Y3NCdkFwSEhObC92STFCeCIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+DQogICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4gOjotd2Via2l0LXNjcm9sbGJhcnt3aWR0aDo3cHg7aGVpZ2h0OjdweDt9Ojotd2Via2l0LXNjcm9sbGJhci10cmFja3tiYWNrZ3JvdW5kOiNmZmY7fTo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWJ7Ym9yZGVyLXJhZGl1czo1cHg7YmFja2dyb3VuZDojMmY0NWZmO308L3N0eWxlPjwvaGVhZD4NCiAgICA8Ym9keT4NCg0KDQogICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIgbXQtMyIgc3R5bGU9ImRpc3BsYXk6ZmxleDsganVzdGlmeS1jb250ZW50OnNwYWNlLWV2ZW5seSI+DQogICAgICAgIDxkaXYgY2xhc3M9ImNhcmQiIHN0eWxlPSJ3aWR0aDoyMDBweDsiPg0KICAgICAgICAgIDxpbWcgY2xhc3M9ImNhcmQtaW1nLWJvdHRvbSIgc3JjPSJodHRwczovL3d3dy5jbG9zZXRhZy5jb20vaW1hZ2VzL2F2YXRhcjEucG5nIiBhbHQ9IkNhcmQgaW1hZ2UiIHN0eWxlPSJ3aWR0aDoxMDAlO21hcmdpbi1ib3R0b206MCI+DQogICAgICAgICAgPGRpdiBjbGFzcz0iY2FyZC1ib2R5Ij4NCiAgICAgICAgICAgIDxoNCBjbGFzcz0iY2FyZC10aXRsZSI+TW9zdGFmYTwvaDQ+DQogICAgICAgICAgICA8cCBjbGFzcz0iY2FyZC10ZXh0Ij5Tb21lIGV4YW1wbGUgdGV4dDwvcD4NCiAgICAgICAgICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJidG4gYnRuLXByaW1hcnkiPlNlZSBQcm9maWxlPC9hPg0KICAgICAgICAgIDwvZGl2Pg0KICAgICAgICA8L2Rpdj4NCiAgICAgICAgPGRpdiBjbGFzcz0iY2FyZCIgc3R5bGU9IndpZHRoOjIwMHB4OyI+DQogICAgICAgICAgPGRpdiBjbGFzcz0iY2FyZC1ib2R5Ij4NCiAgICAgICAgICAgIDxoNCBjbGFzcz0iY2FyZC10aXRsZSI+TW9zdGFmYTwvaDQ+DQogICAgICAgICAgICA8cCBjbGFzcz0iY2FyZC10ZXh0Ij5Tb21lIGV4YW1wbGUgdGV4dDwvcD4NCiAgICAgICAgICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJidG4gYnRuLXByaW1hcnkiPlNlZSBQcm9maWxlPC9hPg0KICAgICAgICAgIDwvZGl2Pg0KICAgICAgICAgIDxpbWcgY2xhc3M9ImNhcmQtaW1nLWJvdHRvbSIgc3JjPSJodHRwczovL3d3dy5jbG9zZXRhZy5jb20vaW1hZ2VzL2F2YXRhcjEucG5nIiBhbHQ9IkNhcmQgaW1hZ2UiIHN0eWxlPSJ3aWR0aDoxMDAlO21hcmdpbi1ib3R0b206MCI+DQogICAgICAgIDwvZGl2Pg0KICAgICAgICA8ZGl2IGNsYXNzPSJjYXJkIGltZy1mbHVpZCIgc3R5bGU9IndpZHRoOjIwMHB4Ij4NCiAgICAgICAgICA8aW1nIGNsYXNzPSJjYXJkLWltZy1ib3R0b20iIHNyYz0iaHR0cHM6Ly93d3cuY2xvc2V0YWcuY29tL2ltYWdlcy9hdmF0YXIxLnBuZyIgYWx0PSJDYXJkIGltYWdlIiBzdHlsZT0id2lkdGg6MTAwJTttYXJnaW4tYm90dG9tOjAiPiAgICAgICAgICAgDQogICAgICAgICAgPGRpdiBjbGFzcz0iY2FyZC1pbWctb3ZlcmxheSI+DQogICAgICAgICAgICA8aDQgY2xhc3M9ImNhcmQtdGl0bGUiPk1vc3RhZmE8L2g0Pg0KICAgICAgICAgICAgPHAgY2xhc3M9ImNhcmQtdGV4dCI+U29tZSBleGFtcGxlIHRleHQuPC9wPg0KICAgICAgICAgICAgPGEgaHJlZj0iIyIgY2xhc3M9ImJ0biBidG4tcHJpbWFyeSI+U2VlIFByb2ZpbGU8L2E+DQogICAgICAgICAgPC9kaXY+DQogICAgICAgIDwvZGl2Pg0KICAgICAgPC9kaXY+DQoNCg0KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjIuMC9kaXN0L2pzL2Jvb3RzdHJhcC5idW5kbGUubWluLmpzIiBpbnRlZ3JpdHk9InNoYTM4NC1BM3JKRDg1Nktvd1NiN2R3bFpkWUVrTzM5R2FnaTd2SXNGMGpyUkFvUW1ES0t0UUJIVXVMWjlBc1N2NGpENFhhIiBjcm9zc29yaWdpbj0iYW5vbnltb3VzIj48L3NjcmlwdD4NCiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9AcG9wcGVyanMvY29yZUAyLjExLjUvZGlzdC91bWQvcG9wcGVyLm1pbi5qcyIgaW50ZWdyaXR5PSJzaGEzODQtWGUrOGNMOW9KYTZ0Ti92ZUNoU1A3cSttblNQYWo1QmN1OW1QWDVGNXhJR0UwRFZpdHRhcVQ1bG9yZjBFSTdWayIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+PC9zY3JpcHQ+DQogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMi4wL2Rpc3QvanMvYm9vdHN0cmFwLm1pbi5qcyIgaW50ZWdyaXR5PSJzaGEzODQtT0RtRElWek4rcEZkZXh4SEVIRkJRSDMvOS92UTl1b3JpNDV6NEpqbkZzUnlkYm1RYm1MNXQxdFEwY3VsVXp5SyIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+PC9zY3JpcHQ+DQogICAgPC9ib2R5Pg0KICA8L2h0bWw+