I am having a problem retrieving data from MySQL database. I am using Bootstrap for the front-end. I am fetching the cards using the following code:
<?php
require 'config.php';
$sql = "SELECT * FROM contents";
$query_run = mysqli_query($con, $sql);
//Check if there is data
$check_data = mysqli_num_rows($query_run) > 0;
if($check_data) {
while($row = mysqli_fetch_array($query_run)) {
?>
<div class="card-group">
<div class="container py-5">
<div class="row mt-4">
<div class="col-md-3">
<div class="card">
<div class="card-body">
<img src="images/<?php echo $row['images'] ?>" class="card-img-top" alt="">
<h2 class="card-title"><?php echo $row['title']; ?></h2>
<h3 class="card-title"><?php echo $row['short_desc']; ?></h3>
<p class="card-text">
<?php echo $row['long_desc']; ?>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
}
?>
but the cards are aligned vertically not horizontally which is not what I want as seen here:
CodePudding user response：
<!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="row">
<div class="col-3">
<div class="card">
<div class="card-body">
<img src="https://tipsmake.com/data1/thumbs/how-to-extract-img-files-in-windows-10-thumb-bzxI4IDgg.jpg" class="w-100">
<h5>Sample Img</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<div class="card-body">
<img src="https://tipsmake.com/data1/thumbs/how-to-extract-img-files-in-windows-10-thumb-bzxI4IDgg.jpg" class="w-100">
<h5>Sample Img</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<div class="card-body">
<img src="https://tipsmake.com/data1/thumbs/how-to-extract-img-files-in-windows-10-thumb-bzxI4IDgg.jpg" class="w-100">
<h5>Sample Img</h5>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<div class="card-body">
<img src="https://tipsmake.com/data1/thumbs/how-to-extract-img-files-in-windows-10-thumb-bzxI4IDgg.jpg" class="w-100">
<h5>Sample Img</h5>
</div>
</div>
</div>
</div>
</div>
</body>
</html>this is simple example your want too this try this also above code
<div class="col-3">
<div class="card">
<div class="card-body">
<img src="https://tipsmake.com/data1/thumbs/how-to-extract-img-files-in-windows-10-thumb-bzxI4IDgg.jpg" class="w-100">
<h5>Sample Img</h5>
</div>
</div>
</div>
above code just put only your while loop
CodePudding user response：
<div class="card-group">
<div class="container py-5">
<div class="row mt-4">
<?php $sql = "SELECT * FROM contents";
$query_run = mysqli_query($con, $sql);
//Check if there is data
$check_data = mysqli_num_rows($query_run) > 0;
if($check_data) {
while($row = mysqli_fetch_array($query_run)) {
?>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<img src="images/<?php echo $row['images'] ?>" class="card-img-top" alt="">
<h2 class="card-title"><?php echo $row['title']; ?></h2>
<h3 class="card-title"><?php echo $row['short_desc']; ?></h3>
<p class="card-text">
<?php echo $row['long_desc']; ?>
</p>
</div>
</div>
</div>
<?php
}
}
?>
</div>
</div>
</div>