From FB - modharbour.club
dear friends, would you be so kind as to give an example of how to fill the bootstrap 4 -> card-columns from w3 school from database? I would need 4 columns: image, title, text and button. it would be great if you could show me how this is done...kind regards and thanks in advance ruth
dear friends, would you be so kind as to give an example of how to fill the bootstrap 4 -> card-columns from w3 school from database? I would need 4 columns: image, title, text and button. it would be great if you could show me how this is done...kind regards and thanks in advance ruth
<!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/.../css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/.../jquery/3.5.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/.../1.16.0/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/.../js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="card-columns">
 <div class="card">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
  <div class="card-body">
   <h4 class="card-title">John Doe</h4>
   <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
   <a href="#" class="btn btn-primary">See Profile</a>
  </div>
 </div>
  <div class="card">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
  <div class="card-body">
   <h4 class="card-title">John Doe</h4>
   <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
   <a href="#" class="btn btn-primary">See Profile</a>
  </div>
 </div>
  <div class="card">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
  <div class="card-body">
   <h4 class="card-title">John Doe</h4>
   <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
   <a href="#" class="btn btn-primary">See Profile</a>
  </div>
 </div>
  <div class="card">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
  <div class="card-body">
   <h4 class="card-title">John Doe</h4>
   <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
   <a href="#" class="btn btn-primary">See Profile</a>
  </div>
 </div>
  <div class="card">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%">
  <div class="card-body">
   <h4 class="card-title">John Doe</h4>
   <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
   <a href="#" class="btn btn-primary">See Profile</a>
  </div>
 </div>
 </div>
 </div>
</body>
</html>