I'm trying to display MySQL query in each card but how do I print the cards inline? It is now printing below one another but I want them to be on the same row horizontally.
<?php
$output="";
while($row = mysqli_fetch_array($result))
{
$id = $row['courseID'];
$name = $row['courseName'];
$category = $row['category'];
$description = $row['description'];
$output.=
"
<div class='col-sm-12'>
<div class='col-md-4 mb-5'>
<div class='card h-100'>
<div class='card-body'>
<h4 class='card-title'>$name</h4>
<p class='card-text'>$id</p>
<p class='card-text'>$description</p>
</div>
<div class='card-footer'><a href='#' class='btn btn-primary'>Assign</a></div>
</div>
</div>";
}
$output .= "</div></div>";
echo $output;
?>
just move your while into this :
<div class="container">
<div class="row">
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<!--from here-->
<div class="col-lg-4 col-md-6 col-sm-12 mb-5 mt-5">
<div class="card">
<div class="card-body">
<div class="card-title">
<h1>title</h1>
</div>
<div class="card-text">
<h5>body</h5>
<a class="btn btn-outline-primary rounded-0 float-end" href="" name="readmore">Read more</a>
</div>
</div>
</div>
</div>
<!--to here-->
</div>
</div>
duplicate the code between (from here) and (to here)
here is a for loop example I used a while ago:
<div class="container">
<div class="row">
<?php for ($i=0; $i < count($user_elements[0]) ; $i++):?>
<div class="col-lg-4 col-md-6 col-sm-12 mb-5 mt-5">
<div class="card">
<img class="card-img-top" src="<?php if(isset($user_elements)){echo "../private/uploads/".$thumbnail[$i];}?>">
<div class="card-body">
<div class="card-title">
<h1><?php echo $user_elements[4][$i];?></h1>
</div>
<div class="card-text">
<h5><?php echo $user_elements[5][$i];?></h5>
<a class="btn btn-outline-primary rounded-0 float-end" href="readmore.php?Post=<?php echo $user_elements[0][$i];?>" name="readmore">Read more</a>
</div>
</div>
</div>
</div>
<?php endfor?>
</div>
</div>
create a parent div with container as a class add one more div to that parent div with row as a class then add your cards in that row classed div.
ex:
<div class="container">
<div class="row">
//your cards div
</div>
</div>
Use this snippet. Grid can be better with grid-gap.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
padding: 10px;
}
.grid-item {
background-color: #999;
border: 1px solid #fff;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
You can make a new div before your while loop and join the
As you can see below, you will make a new div named cards
<?php
$output="<div class='cards' style='white-space:nowrap'>";
while($row = mysqli_fetch_array($result))
{
$id = $row['courseID'];
$name = $row['courseName'];
$category = $row['category'];
$description = $row['description'];
$output.=
"
<div class='col-sm-12' style='display:inline-block'>
<div class='col-md-4 mb-5'>
<div class='card h-100'>
<div class='card-body'>
<h4 class='card-title'>$name</h4>
<p class='card-text'>$id</p>
<p class='card-text'>$description</p>
</div>
<div class='card-footer'><a href='#' class='btn btn-primary'>Assign</a></div>
</div>
</div>";
}
$output .= "</div></div>";
echo $output;
?>
I hope by using this code the cards will align in same line.
Related
I used the for loop to get the data dynamically from the database and displayed ,Now I have to display those cards in different colors using Php No javascript is needed
<div class="row gutter-xs">
<?php
foreach($dispcnt as $object)
{
?><div class="col-xs-3 col-md-3">
<div class="card bg-info"> // card
<div class="card-values">
<div class="p-x">
<small><?php echo $object->qa;?> </small>
<h3 class="card-title-l"><?php echo $object->cnt;?> Counts</h3>
</div>
</div>
</div>
</div> // code of card ends here
<?php }?>
</div>
I want to change the color of the cards in PHP
I am excepting the cards to look like this
Solution A with CSS only
Actually, you don't need any PHP to do that, you could do it only with some CSS rules with the help of the :nth-child() selector.
Here's a little snippet for demo if you have 4 colors always repeating:
.container {
display: flex;
flex-wrap: wrap;
}
.card {
width: 10em;
height: 4em;
margin: .5em;
padding: .5em;
color: white;
background: #0298cf;
}
.card:nth-child(4n + 1) {
background: #0298cf;
}
.card:nth-child(4n + 2) {
background: #9b479f;
}
.card:nth-child(4n + 3) {
background: #4e484e;
}
.card:nth-child(4n + 4) {
background: #f70d1a;
}
<div class="container">
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 1</small>
<h3>1 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 2</small>
<h3>2 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 3</small>
<h3>3 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 4</small>
<h3>4 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 5</small>
<h3>5 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 6</small>
<h3>6 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 7</small>
<h3>7 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 8</small>
<h3>8 Counts</h3>
</div>
</div>
</div>
<div class="card bg-info">
<div class="card-values">
<div class="p-x">
<small>Small 9</small>
<h3>9 Counts</h3>
</div>
</div>
</div>
</div>
If you want 6 colors then you would replace 4n by 6n and add the 2 other colors.
In your case, you'll have to put it on the first <div> which is in the loop, so the div directly child of the row:
.row > :nth-child(4n + 1) {
background: #0298cf;
}
.row > :nth-child(4n + 2) {
background: #9b479f;
}
.row > :nth-child(4n + 3) {
background: #4e484e;
}
.row > :nth-child(4n + 4) {
background: #f70d1a;
}
Solution B with PHP to generate a CSS class
By the way, your PHP should be in lowercase. You could also print a color class and increment it like this:
<div class="row gutter-XS">
<?php
$color = 1;
foreach ($dispcnt as $object) {
$color_class = "bg-color-$color";
if ($color < 4) {
$color++;
} else {
$color = 1;
}
?>
<div class="col-xs-3 col-md-3">
<div class="card <?php echo $color_class; ?>">
<div class="card-values">
<div class="p-x">
<small><?php echo $object->QA; ?></small>
<h3 class="card-title-l"><?php echo $object->CNT; ?> Counts</h3>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
You'll then have the possibility to have CSS rules such as:
.card.bg-color-1 {
background: #0298cf;
}
.card.bg-color-2 {
background: #9b479f;
}
.card.bg-color-3 {
background: #4e484e;
}
.card.bg-color-4 {
background: #f70d1a;
}
Here is a PHP-only solution. Just set an array with the desired colors and use modulo to cycle through them as you iterate over the cards. Put a style attribute on the card to set the background color.
<div class="row gutter-XS">
<?php
$colors = [
'#0298cf',
'#9b479f',
'#4e484e',
'#f70d1a',
];
$count = count($colors);
$i = 0; // increment this counter at the end of the foreach loop
foreach ($dispcnt as $object)
{
?><div class="col-xs-3 col-md-3">
<div class="card BG-info" style="background:<?php echo $colors[($i % $count)]; ?>"> <!-- card -->
<div class="card-values">
<div class="p-x">
<small><?php echo $object->QA;?> </small>
<h3 class="card-title-l"><?php echo $object->CNT;?> Counts</h3>
</div>
</div>
</div>
</div> <!-- code of card ends here -->
<?php $i++;}?>
</div>
in my code i used
<img class='container card-body furniture-size' src="../FurnitureImages/<? echo$item->getImage().'-1.jpg'?>"
but when i test it the image name is
<?%20echo%20$item->getImage().%27-1.jpg%27%20?>
instead of
"furniture1-1.jpg"
the section with the code is:
<div class="center-align main-side furniture-box " style="float: right">
<h1 class="w-100 p-5 pulse text-white" >Furniture</h1>
<div class="col-sm-12 row" style="margin-left: 175px">
<?php foreach ($view->searchResult as $item) { ?>
<div class='furniture-box border-white col-sm-4 pt-2 pb-3 m-1' style='float: right; color:#fff; background:#9fa9a3'>
<?php echo $item->getFurnitureName()?>
<img class="container card-body furniture-size'" src="../FurnitureImages/<?php echo $item->getImage() . '-1.jpg'; ?>"/>
Color: <?php echo $item->getFurnitureColour()?>
<br>
View to Bid
</div>
<?php }?>
</div>
</div>
can anyone help me fix this please?
Following is my code I am displaying details as 3 columns per row using Bootstrap class row.
I tried like changing div and some condition
<div class="container">
<?php
if($lclResult->rowCount() > 0){
while($row = $lclResult->fetch(PDO::FETCH_ASSOC)) {
# code...
$lclUserName = $row['us_business_name'];
$lclImage1 = $row['us_image1'];
$lclCategory = $row['us_category'];
$lclArea = $row['us_area'];
?>
<div class="row">
<div class="col-sm-4">
<div class="card">
<img class="card-img-top " src="<?php echo $lclImage1 ?>" alt="Card image" style="width:100%; height: 158px;">
<div class="card-body">
<h4 class="card-title"><?php echo $lclUserName?></h4>
<p class="card-text" style="font-size: 25px;"><?php echo $lclCategory?></p>
<hr>
<i class="fa fa-map-marker" style="font-size: 23px;"><span> </span><?php echo $lclArea?></i>
<!-- See Profile -->
</div>
</div>
<?php
}
?>
</div>
<?php
} else {
?>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1> NO RESULT FOUND...</h1>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
I want to display 3 columns per row to display data. If anyone knows Please guide me with the above code.
Change your code like this
<div class="container">
<div class="row">
<?php
if($lclResult->rowCount() > 0){
while($row = $lclResult->fetch(PDO::FETCH_ASSOC)) {
# code...
$lclUserName = $row['us_business_name'];
$lclImage1 = $row['us_image1'];
$lclCategory = $row['us_category'];
$lclArea = $row['us_area'];
?>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top " src="<?php echo $lclImage1 ?>" alt="Card image" style="width:100%; height: 158px;">
<div class="card-body">
<h4 class="card-title">
<?php echo $lclUserName?>
</h4>
<p class="card-text" style="font-size: 25px;">
<?php echo $lclCategory?>
</p>
<hr>
<i class="fa fa-map-marker" style="font-size: 23px;">
<span>
</span>
<?php echo $lclArea?>
</i>
<!-- See Profile -->
</div>
</div>
</div>
<?php
}
?>
<?php
} else {
?>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1> NO RESULT FOUND...
</h1>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
I've been trying to create a simple bulletin board in which I can view different announcements, images, and videos. I have this UI bug in DIV whenever i'm trying to display video content at 100% width and height.
I wan't them to move up or stay on their position even if i inserted a long message or video.
This is the sample image of the one i'm talking about
as you see I want them to move up as they basically moved down after the video was inserted.
Here's the code i used.
For the grid css i used this
<style>
.grid-container {
display: grid;
height: 100%;
grid-template-columns: 1fr 1.75fr 1fr;
grid-template-rows: 0.75fr 1fr 1fr 1fr 1fr;
grid-template-areas: "Logo . ." ". videos ." ". videos ." ". . ." ". . .";
}
.videos {
grid-area: videos;
}
.Logo {
grid-area: Logo;
}
.Welcome Text {
grid-area: 1 / 2 / 1 / 2;
}
.Calendar {
grid-area: 1 / 3 / 3 / 3;
}
.Posts {
grid-area: 2 / 1 / 6 / 1;
}
.Schedule {
grid-area: 3 / 3 / 6 / 3;
}
.Images {
grid-area: 4 / 2 / 6 / 2;
}
and to display the whole content I used this one
<div class="grid-container">
<div class="videos">
<div class="row">
<div class="col-md-12" align="center">
<div class="card border-success">
<div class="card-header bg-theme"><h4 style="color: white">Video Section</h4></div>
<div class="card-body">
<div>
<?php
$value = custom_query("SELECT * FROM tbl_upload_video ORDER by RAND() DESC LIMIT 1");
if($value->rowCount()>0)
{
while($row=$value->fetch(PDO::FETCH_ASSOC))
{
$id = $row['id'];
?>
<?php
$img = substr($row['video_path'], 6); ?>
<video id="videos" autoplay>
<source src="<?= $img ?>" type="video/mp4">
</video>
<?php }} ?>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Logo" style="max-resolution: -50px;">
<div class="col-md-12" align="center">
<div class="card card-accent-theme ">
<div class="card-body">
<h3>INFO BOARD</h3>
</div>
</div>
</div>
</div>
<div class="Welcome Text">
<div class="col-md-12" align="center">
<div class="card card-accent-theme ">
<div class="card-body">
<h3 style="text-align: center">Welcome Students!!!!</h3>
</div>
</div>
</div>
</div>
<div class="Calendar">
<div class="col-md-12" align="center">
<div class="card card-accent-theme ">
<div class="card-body">
<h3 style="text-align: center">Calendar and other things</h3>
</div>
</div>
</div>
</div>
<div class="Posts">
<div class="col-md-12" align="center">
<div class="card border-success">
<div class="card-header bg-theme"><h4 style="color: white">Posts</h4></div>
<div class="card-body">
<?php
$dn = datenow();
$value = custom_query("SELECT * FROM tbl_post WHERE date2 >= '$dn' AND type = 'Announcement' and status = 'Active' ORDER by id DESC");
if($value->rowCount()>0)
{
while($row=$value->fetch(PDO::FETCH_ASSOC))
{
$id = $row['id'];
$d2 = $row['date2'];
$d = $row['date'];
?>
<div class="card mb-3" style="max-width: 50rem;">
<div class="card-header bg-warning"><?= $row['title']; ?></div>
<div class="card-body">
<?= $row['content']; ?>
</div>
</div>
<?php }} else {
echo "<h3>No Content Available</h3>";
} ?>
</div>
</div>
</div>
</div>
<div class="Schedule">
<div class="col-md-12" align="center">
<div class="card border-warning">
<div class="card-header bg-theme"><h4 style="color: white">Schedules</h4></div>
<div class="card-body">
<?php
$dn = datenow();
$value = custom_query("SELECT * FROM tbl_post WHERE date2 >= '$dn' AND type = 'Schedule' and status = 'Active' ORDER by id DESC");
if($value->rowCount()>0)
{
while($row=$value->fetch(PDO::FETCH_ASSOC))
{
$id = $row['id'];
$d2 = $row['date2'];
$d = $row['date'];
?>
<div class="card mb-3" style="max-width: 50rem;">
<div class="card-header bg-success"><?= $row['title']; ?></div>
<div class="card-body">
<?= $row['content']; ?>
</div>
</div>
<?php }} else {
echo "<h3>No Content Available</h3>";
} ?>
</div>
</div>
</div>
</div>
<div class="Images">
<div class="col-md-12" align="center">
<div class="card card-accent-theme ">
<div class="card-body">
<h3 style="text-align: center">Images</h3>
</div>
</div>
</div>
</div>
Thank you so much :)
I already fixed this one. Instead of using CSS GRID I revert back to bootstrap grid using div and col
I want to show the number of players in the server instead of that UNKNOWN thing, I haven't enabled the API yet, can I get help that, I want to integrate the progress bar to the total players in game like
if players are 50/100
= 50% of the bar will be filled.
Like the bar should work as the api updates.
<div class="is-clearfix"></div>
<section class="section dark-grey has-text-centered">
<div class="container">
<div class="heading">
<h1 class="title">Our Servers</h1>
<br>
</div>
<div class="columns is-gapless">
<div class="column">
<div class="card card-server">
<div class="card-image">
<figure class="image is-2by1">
<img src="./OutBreak Gaming_files/sfcnr_card1.png">
</figure></div> <div class="card-content">
<div class="title" style="font-size: 1.25em; color: rgb(119, 119, 119); margin-top: 0.5em;">87.98.241.207:7775</div>
<div class="players is-marginless">
<div class="content playersOnline">
Unknown PLAYERS ONLINE
</div>
<progress value="0" max="100" class="progress is-success"></progress>
<br></div> <a class="button is-info is-medium is-fullwidth">Play Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Just use the SACNR monitor API, and
<div class="columns is-gapless">
<div class="column"><div class="card card-server">
<div class="card-image">
<figure class="image is-2by1">
<img src="./OutBreak Gaming_files/sfcnr_card1.png"></figure></div>
<div class="card-content">
<div class="title" style="font-size: 1.25em; color: rgb(119, 119, 119); margin-top: 0.5em;">87.98.241.207:7775</div> Hostname:
<div class="hosting"></div>Gamemode:
<div class="game-mode"></div>Map:
<div class="language"></div> Players:
<div class="players is-marginless"><div class="content playersOnline">
FETCHING PLAYERS ONLINE
</div>
<progress value="0" max="100" class="progress is-success"></progress><br></div>
<a class="button is-info is-medium is-fullwidth">Play Now</a></div></div></div></div></div></section></div>
Where We fetch from API the following things
<?php
require_once("sampsvr.php");
$monitor = new SACNR\Monitor;
//$obj = $monitor->get_info_by_id(1790345);
$obj = $monitor->get_info_by_ip('87.98.241.207','7775');
$players = $obj->Players;
$hostName = $obj->Hostname;
$Gamemode = $obj->Gamemode;
$Mapname = $obj ->Language;
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.progress').val(<?php echo $players;?>);
$('.playersOnline').html(<?php echo $players;?> +' PLAYERS ONLINE' );
$('.hosting').html("<?php echo $hostName;?>");
$('.game-mode').html("<?php echo $Gamemode;?>");
$('.language').html("<?php echo $Mapname;?>");
});
</script>
You may find the API at http://monitor.sacnr.com/api.html