I have a horizontal carousel that is working fine, here is the code for it
Now i wish to fetch the data from database and display it that corousel. Following is the code that i used
<div class='row'>
<div class='col-xs-12'>
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php foreach($student as $student): ?>
<div class="col-md-3">
<a class="thumbnail" href="#"><?php echo $student->fullname;?></a>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
</div>
</div>
but the view is distorted and instead of all the slides sliding in one row, the view is coming like this
That's because unless the row is active, the other .item row gets the property display:none; If you were to remove the display:none; it should work as you want.
Create the class="row" inside the loop. Also keep in mind that the screen consists of 12 units only, so if you create a row of more than 12 units it will go to next line automatically. As you have created the loop that creates "col-md-3" for more than 4 times which sums more than 12, so it moves to next line.
For reference view this
As you have not given the php code, i am giving u sample of it
The array that you are getting divide it into a group of 4 (or as many as you want) like given below
$query = $this->db->get('student');
$r = $query->result();
$s = (array_chunk($r, 4));
return $s;
And then on the code you have given, change into following
<div class="carousel-inner">
<?php foreach($s as $key => $per_student): ?>
<?php if($key=='0'): ?>
<div class="item active">
<?php else: ?>
<div class="item ">
<?php endif; ?>
<div class="row">
<?php foreach($per_student as $student): ?>
<div class="col-md-3">
<a class="thumbnail" href="#"><?php echo $student->fullname;?></a>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
</div>
Related
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 am generating html code using php. I have some information stored in an array called $persons and I'm trying to generate a bootstrap card for each $person:
<div class="container">
<div class="row">
<?php foreach ($persons as $person): ?>
<div class="card col-md-3 m-1">
<img class="card-img-top" src="<?=person['img_src']?>" alt="<?=$person['name']?>">
<div class="card-block">
<h4 class="card-title"><?=$person['name']?></h4>
<p class="card-text"><?=$person['info']?></p>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
Everything works fine when I remove m-1 class, but as soon as I add m-1 class, margin causes the last div to go to next line. I think lack of space causes this problem. How can I fix this problem? How to have margin between divs without the last div going to the next line?
You should have a separate div for the card since it's display:flex. Also, just use my-1 for margin-top and margin-bottom so that x-axis space is not effected...
<div class="container">
<div class="row">
<?php foreach ($persons as $person): ?>
<div class="col-md-3 my-1">
<div class="card">
<img class="card-img-top" src="<?=person['img_src']?>" alt="<?=$person['name']?>">
<div class="card-block">
<h4 class="card-title"><?=$person['name']?></h4>
<p class="card-text"><?=$person['info']?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
https://www.codeply.com/go/78AmkbWrLi
The easiest solution would be to just put another div inside the col, which applies the margin:
<div class="container">
<div class="row">
<?php foreach ($persons as $person): ?>
<div class="card col-md-3">
<div class="m-1"> <!-- NEW -->
<img class="card-img-top" src="<?=person['img_src']?>" alt="<?=$person['name']?>">
<div class="card-block">
<h4 class="card-title"><?=$person['name']?></h4>
<p class="card-text"><?=$person['info']?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
Or if you don't want to add another div, just add the m-1 class to the card-block.
I'm using Bootstrap slider and want to display 3 items per slide generated from a foreach loop.
This loop counter keeps adding and extra <div> at the end of the loop, there are 6 items in the loop so I get an empty slide. How can I fix this?
<?php if (database_querySelect($sql,$rows)) {
$spCounter = 0;
?>
<div class="panel">
<div class="panel-heading">
<h4><?php print translate("Related Products"); ?></h4>
</div>
<div id="relatedSlider" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<?php foreach($searchresults["products"] as $product): ?>
<?php include("html/search/style1.php"); ?>
<?php if(($spCounter) % 3 == 0) : ?>
</div>
<div class="item">
<?php endif; ?>
<?php $spCounter++; endforeach; ?>
</div>
</div>
</div>
</div>
<?php } ?>
<div class="item">
<?php endif; ?>
<?php $spCounter++; endforeach; ?>
</div>
The div with class item is inside foreach loop, and you have conditional statement that passes after every 3rd counter.
I have the site set up to have 3 columns with image, under the image a title, and under title the description x 3.
If i was to input the words using php all shows fine but when i use the fetch array it breaks the columns and puts each one on a different row. My current code is:
<!-- /.row -->
<?
while($row = mysql_fetch_array($result)){
?>
<!-- Projects Row -->
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="../assets/img/tienda/<? echo $row["images"];?>" alt="">
</a>
<h3>
<? echo $row["top"];?>
</h3>
<p><? echo $row["desc"];?></p>
</div>
</div>
</div>
<hr>
<!-- /.row -->
<? } ?>
This answer will handle the possibility that more than 3 results will be returned by PHP, which would necessitate another row of 1-3 results. You'd have to add a .clearfix to your CSS that did clear:both which would safely clear the floats contained within the col-md-4.....and besides, it's just good practice to ensure floats don't propagate.
<?
$inc = 0; //This is your incrementor
while($row = mysql_fetch_array($result)){
if ($inc == 0) {
?>
<div class="row">
<?
}
?>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="../link/<? echo $row["images"];?>" alt="">
</a>
<h3>
<? echo $row["top"];?>
</h3>
<p><? echo $row["desc"];?></p>
</div>
<?
if ($inc == 0} {
?>
<div class="clearfix"></div>
</div>
<?
}
$inc = ($inc == 2)? 0 : $inc++; //Increment unless value = 2, then set to zero
}
?>
<hr>
try
<!-- /.row -->
<div class="row">
<?
while($row = mysql_fetch_array($result)){
?>
<!-- Projects Row -->
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="../assets/img/tienda/<? echo $row["images"];?>" alt="">
</a>
<h3>
<? echo $row["top"];?>
</h3>
<p><? echo $row["desc"];?></p>
</div>
<!-- /.row -->
<? } ?>
</div>
<hr>
I have this carousel that I want to make dynamic. To operate, the carousel must begin with a class
<div class="item active">
and must stay out of the while loop. After the fourth record extract, the class must become simply
<div class="item">
In summary:
0 to 4 -> <div class="item active">
5 to 8 --><div class="item">
9 to 12 --> <div class="item"> ....so on
How do I count the records extracted?
Thanks
<?php
$banner = "SELECT * FROM tbl_banner";
$result_b = dbQuery($banner);
// here --> <div class="item active"> or <div class="item">
while($row_b = dbFetchAssoc($result_b)) {
extract($row_b);
?>
<div class="col-md-3">
<div class="w-box inverse">
<div class="figure">
<img alt="" src="banner/<?php echo $img; ?>" class="img-responsive">
<div class="figcaption bg-2"></div>
<div class="figcaption-btn">
<i class="fa fa-plus-circle"></i> Zoom
<i class="fa fa-link"></i> View
</div>
</div>
<div class="row">
<div class="col-xs-9">
<h2><?php echo $img_title; ?></h2>
<small><?php echo $img_desc; ?></small>
</div>
</div>
</div>
</div>
<?php
}
?>
You can use num_rows to see how many rows were returned. Unfortunately from your question I can't tell whether you're using MySQL, MySQLi or PDO as it seems you pass all your queries into a class.
For MySQLi use the following:
$num = $result_b->num_rows;
SELECT COUNT(*) AS cnt FROM tbl_banner
OR
count( $res ); # in php
Also see: Which is fastest? SELECT SQL_CALC_FOUND_ROWS FROM `table`, or SELECT COUNT(*)
I don't understand....
I would like a result like this, explained in this way:
$query ="SELECT .....
<div class="row">
<div class="item active">
while {
<div1>...</div>
<div2>...</div>
<div3>...</div>
<div4>...</div>
} //end while
</div>
</div>
<div class="row">
<div class="item">
while {
<div4>...</div>
<div6>...</div>
<div7>...</div>
<div8>...</div>
} //end while
etc etc