Iam trying to get my web page to display all of my shop items in bootstrap 4 cards. 3 wide by however many deep ( i may add pagination another day )
I've got a php foreach loop which populates bootstrap4 cards perfectly. The trouble is they display vertically ( one on top of the other ) . ive tried class= columns which works on dummy divs but not when i integrate with my for each loop.
I ve tried everything regarding bootstrap docs but cant get the cards to display 3 wide and however many deep ( the foreach and the items control this. )
Should i be even using 'cards' or use something else. thx for your time
<div class="container">
<!-- $result = my php code using x-path to get results from xml query goes here. -->
<?php
foreach ( $result as $elements){
?>
<div class="row-fluid ">
<div class="col-sm-4 ">
<div class="card-columns-fluid">
<div class="card bg-light" style = "width: 22rem; " >
<img class="card-img-top" src=" <?php echo $elements->pictures->picture[2]->filename ; ?> " alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b><?php echo $elements->advert_heading ?></b></h5>
<p class="card-text"><b><?php echo $elements->price_text ?></b></p>
<p class="card-text"><?php echo $elements->bullet1 ?></p>
<p class="card-text"><?php echo $elements->bullet2 ?></p>
Full Details
</div></div></div></div>
<?php
}
}
?>
</div>
</div> <!--container close div -->
As stated, the .row-fluid should be outside of the loop :
<div class="container">
<div class="row-fluid ">
<!-- my php code which uses x-path to get results from xml query. -->
<?php foreach ( $result as $elements) : ?>
<div class="col-sm-4 ">
<div class="card-columns-fluid">
<div class="card bg-light" style = "width: 22rem; " >
<img class="card-img-top" src=" <?php echo $elements->pictures->picture[2]->filename ; ?> " alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><b><?php echo $elements->advert_heading ?></b></h5>
<p class="card-text"><b><?php echo $elements->price_text ?></b></p>
<p class="card-text"><?php echo $elements->bullet1 ?></p>
<p class="card-text"><?php echo $elements->bullet2 ?></p>
Full Details
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div> <!--container div -->
You need to move your <div class="row-fluid "> class outside of the foreach loop, otherwise it will create a new row for each class.
Also, as a comment has mentioned, you need to close all your divs correctly.
Related
I would like to know if there's a way to totally separate logic and HTML (without OOP or template engines for practice and learning purpose) in case of listing posts from database, currently, the code looks like that:
<!--TEMPLATE:-->
<?php require_once(HEAD); ?>
<body>
<?php require_once(HEADER); ?>
<?php require_once(BANNER); ?>
<!-- Main Content (S) -->
<main class="container">
<?php while($row = mysql_fetch_assoc($result)): ?>
$postImg = $row["post_img"];
$postAuthor = $row["post_author"];
$postTitle = $row["post_title"];
<div class="col">
<div class="card shadow-sm">
<img class="card-img-top" src="<?= $postImg ?>" alt="Card image cap">
<div class="card-body">
<p class="card-text">
<small class="text-muted"><a class="fw-bold" href=""><?= $postAuthor ?></a></small>
</p>
<h5 class="card-title mb-3"><?= $postTitle ?></h5>
<div class="d-flex justify-content-between">
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</main>
<!-- Main Content (E) -->
<?php require_once(FOOTER); ?>
<?php require_once(JS_FILES); ?>
</body>
</html>
Variables: $postImg, $postAuthor, $postTitle are set with the data from the database.
Currently, the logic of listing posts happens in the same place as the HTML post template, I have an idea where I move this post HTML to a different template file and I use it in listPosts() function by including it on every iteration of the loop.
Main question: is there a way to leave this post HTML code in the current file and somehow loop it with all the result set rows?
The current approach is the good practice because that's how normally people uses PHP with HTML.
You have four options:
Either follow MVC architecture pattern
Use template engine
Keep your HTML only in separate php file and include in the logic file.
Your php file with logic but the response is provided to the AJAX call from
client side that will do the rendering part based on data ( Eg: JSON ).
Example for third option:
your database query script file: post.php
<!--TEMPLATE:-->
<?php require_once(HEAD); ?>
<body>
<?php require_once(HEADER); ?>
<?php require_once(BANNER); ?>
<!-- Main Content (S) -->
<main class="container">
<?php while($row = mysql_fetch_assoc($result)): ?>
$postImg = $row["post_img"];
$postAuthor = $row["post_author"];
$postTitle = $row["post_title"];
// include template
include 'postView.php';
<?php endwhile; ?>
</main>
<!-- Main Content (E) -->
<?php require_once(FOOTER); ?>
<?php require_once(JS_FILES); ?>
</body>
</html>
Your html file: postView.php
<div class="col">
<div class="card shadow-sm">
<img class="card-img-top" src="<?= $postImg ?>" alt="Card image cap">
<div class="card-body">
<p class="card-text">
<small class="text-muted"><a class="fw-bold" href=""><?= $postAuthor ?></a></small>
</p>
<h5 class="card-title mb-3"><?= $postTitle ?></h5>
<div class="d-flex justify-content-between"></div>
</div>
</div>
</div>
you can just create a signlePost.php file and put your html code in it like:
<div class="col">
<div class="card shadow-sm">
<img class="card-img-top" src="<?= $postImg ?>" alt="Card image cap">
<div class="card-body">
<p class="card-text">
<small class="text-muted"><a class="fw-bold" href=""><?= $postAuthor ?></a></small>
</p>
<h5 class="card-title mb-3"><?= $postTitle ?></h5>
<div class="d-flex justify-content-between">
</div>
</div>
</div>
</div>
then in your logic file use include or require like that:
<!--TEMPLATE:-->
<?php require_once(HEAD); ?>
<body>
<?php require_once(HEADER); ?>
<?php require_once(BANNER); ?>
<!-- Main Content (S) -->
<main class="container">
<?php while($row = mysql_fetch_assoc($result)): ?>
$postImg = $row["post_img"];
$postAuthor = $row["post_author"];
$postTitle = $row["post_title"];
include 'singlePost.php';
<?php endwhile; ?>
</main>
<!-- Main Content (E) -->
<?php require_once(FOOTER); ?>
<?php require_once(JS_FILES); ?>
</body>
</html>
but would be better if you use OOP to structurate your code for better
i have a website in which i used carousel sliders to display images and its values, I have 3 carousel in my homepage, 3 of them have same code, however the first carousel is not displaying name and price like the 2nd and 3rd carousel:
as you can see in the image
the code for this carousel is below:
<section class="carousel_sec">
<div class="container">
<div class="row ">
<h3 class="carousel_heading">Trending Birthday Cakes <button class="pull-right"><span>VIEW ALL</span><!-- <span class="visible-xs">>></span> --></button></h3>
<hr>
<div class="carou">
<div class="demo">
<ul id="landing_products1">
<?php foreach($trending_products1 as $key=>$val) { ?>
<li>
<div class="item">
<div class="pad15 content_div">
<div class="carou_thumb">
<img class="st_img" src="<?php echo ADMIN_IMG.'cakes/'.$val['image'][0]['cake_image'];?>" alt="<?php echo $val['cake_name']; ?>" />
<img class="nd_img" src="<?php echo ADMIN_IMG.'cakes/'.$val['image'][0]['cake_image'];?>" alt="<?php echo $val['cake_name']; ?>" />
<p>
<?php echo $val['cake_name']; ?>
</p>
<?php
$btp_price=0;$offer_price=0;
$btp_price=$val['price'][0]['btp_price'];
$offer_price=$val['price'][0]['offer_price'];
?>
<div class="price text-center" style="width:100%;float:left;">
<span class="amount" style="color:#f2136e;font-size:14px;">
<?php echo PRICE_UNIT;?><?php echo $offer_price;?>
</span> (
<s> <?php echo $btp_price;?></s>)
<span> </span>
<br>
</div>
<!--<br><span><?php echo PRICE_UNIT;100; ?></span></p>-->
</div>
</div>
</div>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
</div>
</section>
<?php } ?>
while inspecting in browser the value is showing, the live URL is enter link description here
can anyone please tell me what could be wrong here, thanks in advance
You'll need to tweak the css to reveal the content that is hidden.
To push you in the direction, see the improvement with:
#landing_products1 {
height: 330px;
margin-top: -65px;
}
I don't know how responsive you need to be with your UI, so let's call this a temporary fix. The first carousel's dimensions don't perfectly match the others, so I'll leave the fine tuning to you.
It also appears that you have some js and css issues to mop up.
I have the following piece of code which essentially creates bootstrap 4 cards dynamically after obtaining some values from a db. The problem is however each new entry keeps getting stacked horizontally and I am struggling to write a piece of logic to tell the html to break a new line to stack cards once its more than 3 cards.
Here is what I have so far, really appreciate some guidance on it
<div class="row row-container">
<?php foreach ($data as $row) : ?>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">
<?php echo $row->title?></h5>
<p class="card-text"><?php echo $row->ID?></p>
View
</div>
</div>
</div>
<?php endforeach; ?>
</div>
My initial code that works fine other than the fact that it keeps stacking new elements horizontally.Essentailly to break a new row I need a new line of <div class="row row-container"> which is what I cant think of at the moment on how to get.
I tried adding the logic as below which would check using a count variable whether the number of items is divisible by 3 or not (it should break a new row if it is) but I dont know how to conttine
<div class="row row-container">
<?php $count=0; ?>
<?php foreach ($data as $row) : ?>
<?php
$count++
?>
<?php
if (($count % 3) ==0 ){
echo "<div class="row row-container">";
}
echo "$count" ?>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title"><?php echo $row->title ?></h5>
<p class="card-text"><?php echo $row->description ?></p>
View
</div>
</div>
</div>
<?php endforeach; ?>
</div>
There are different ways of doing this, but if the sole purpose is to ensure that every 4th column goes to a new row, I would use array_chunk to achieve this:
<?php foreach (array_chunk($data, 3) as $row) : ?>
<div class="row row-container">
<?php foreach ($row as $col) : ?>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">
<?php echo $col->title?></h5>
<p class="card-text"><?php echo $col->ID?></p>
View
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
Here's a live demo for your quick reference.
The array_chunk function breaks an array into smaller chuncks. More details are available at php.net.
I'm using data from MySQL database and display looks like this:
I want 3 articles in one line. The pictures below are made with HTML and CSS.
This is my code:
while($row=mysqli_fetch_array($result))
{?>
<div class="container">
<div class="row padding">
<div class="col-md-4 col-xs-12">
<div class="card">
<img class="card-img-top" src="<?php echo UPLPATH . $row['slika']; ?>">
<div class="card-body">
<h6 class="card-title">« <?php echo $row['naslov']; ?> »</h4>
</div>
<p class="ispod"><?php echo $row['datum'];?> </p>
</div>
</div>
</div>
</div>
<?php }?>
This seems to be a nice point in your project to implement a template engine. There a couple out there. I really liked working with typo3 fluid, but back to your question...
For your existing code, you can end your php code, use html and just echo the php variables you need.
<?php
// ... some php stuff
?>
<div class="container">
/* some html stuff * /
<img class="malaSlika" src="<?php echo UPLPATH . $row['slika']; ?>">
/* some more html stuff */
/* <?= is short for <?php echo
<img class="malaSlika" src="<?= UPLPATH . $row['slika']; ?>">
</div>
<?php
// ... some more php stuff
As said, maybe a template engine would help this even further.
Edit: To add div class="row" it could be something like this.
<?php ... ?>
<div class="container">
<?php
$i = 0;
while($row=mysqli_fetch_array($result)) :
if($i % 3 == 0) : ?>
<div class="row padding">
<?php endif; ?>
<div class="col-md-4 col-xs-12">
<div class="card">
<img class="card-img-top" src="<?php echo UPLPATH . $row['slika']; ?>">
<div class="card-body">
<h6 class="card-title">« <?php echo $row['naslov']; ?> »</h4>
</div>
<p class="ispod"><?php echo $row['datum'];?> </p>
</div>
</div>
<?php if($i % 3 == 0) : ?>
</div>
<?php endif; ?>
<?php
$i++;
endwhile;
?>
</div>
It will always get ugly at some point I think. This is a quick solution. the modulo (%) devides by the number and returns the rest value. so $i modulo 3 return 0 at 0, 3, 6, 9, 12 etc. Meaning it will always add the "row padding" div.
I have got a relatively simple PHP connection script to a table in my database. In this table I have a link path to my image files. I call the images using a statement like this:
$sql="SELECT * FROM table";
$result=mysql_query($sql);
and then call the image into the thumbnail with bootstrap like this:
<?php
while($rows=mysql_fetch_array($result)){
?>
<div class="container">
<div class="col-sm-8 col-md-4">
<div class="thumbnail">
<img src="<? echo $rows['image']; ?>" class="img-responsive">
<div class="caption">
<h3><? echo $rows['name']; ?></h3>
<p><? echo $rows['description']; ?></p>
<p>Open Project</p>
</div>
</div>
</div>
</div>
<?php
}
mysql_close();
?>
The pictures are correctly placed in a thumbnail, however the thumbnails are placed on a new row when it goes to the next record in the database. It should however have 3 thumbnails(3 database records) before going on to the next row.
Does anyone know how to fix this so I can have 3 thumbnails in a row?
Try to add the .row class:
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-4">
...
</div>
</div>
</div>
Try this.
<div class="container">
<div class="col-sm-8 col-md-4">
<?php while($rows=mysql_fetch_array($result)){ ?>
<div class="thumbnail">
<img src="<? echo $rows['image']; ?>" class="img-responsive">
<div class="caption">
<h3><? echo $rows['name']; ?></h3>
<p>
<? echo $rows[ 'description']; ?>
</p>
<p>Open Project
</p>
</div>
<?php } mysql_close(); ?>
</div>
</div>
</div>
and add
.img-responsive{display:inline-block;}
to your css.
this should do it.