I'm trying to align a div like a gallery through a loop,
is there a way to do this efficiently with bootstrap? they just stay one above another. I tried to make more divs, but they repeat the results of first too. I'm using Laravel 9.0 and Bootstrap 5.0
#extends('master')
<body class="bg-light"></body>
<div class="container-fluid">
<div class="px-lg-5">
<?php
if (!empty($sql)) {
foreach ($sql as $value) {
?>
<div class="row">
<!-- Gallery item -->
<div class="col-xl-3 col-lg-4 col-md-6 mb-4 float-left">
<div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="img-fluid card-img-top">
<div class="p-4">
<h5> <?php echo $value->name; ?></h5>
<p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="small text-muted mb-0">Avaliable: <?php echo $value->quantity ?></p>
<div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
<p class="small mb-0"><span class="font-weight-bold">R$<?php echo $value->price ?></span></p>
<div class="badge badge-danger px-3 rounded-pill font-weight-normal">
<span class="text-dark"><?php echo substr($value->category, 0, 7); ?></span>
</div>
<div>
GET
</div>
<div>
GET
</div>
</div>
</div>
</div>
</div>
<!-- End -->
<?php } ?>
<!-- End -->
<?php } ?>
</div>
<div class="py-5 text-right">Show me more</div>
</div>
</div>
</body>
seeing the code shows you are creating more rows with the foreach. try this code that i provided whether it will solve your issues
<div class="container-fluid"><div class="px-lg-5">
<div class="row">
<?php if (!empty($sql)) {
foreach ($sql as $value) { ?>
<!-- Gallery item -->
<div class="col-xl-3 col-lg-4 col-md-6 mb-4 float-left">
<div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="img-fluid card-img-top">
<div class="p-4">
<h5> <?php echo $value->name; ?></h5>
<p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="small text-muted mb-0">Avaliable: <?php echo $value->quantity; ?></p>
<div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
<p class="small mb-0"><span class="font-weight-bold">R$<?php echo $value->price; ?></span></p>
<div class="badge badge-danger px-3 rounded-pill font-weight-normal">
<span class="text-dark"><?php echo substr(
$value->category,
0,
7
); ?></span>
</div>
<div>
GET
</div>
<div>
GET
</div>
</div>
</div>
</div>
</div>
<!-- End -->
<?php } ?>
<!-- End -->
<?php
} ?>
</div>
<div class="py-5 text-right">Show me more</div>
<div class="row"> shouldn't be in the foreach loop. Each item has a single row if you use it in the foreach loop.
Find:
<?php
if (!empty($sql)) {
foreach ($sql as $value) {
?>
<div class="row">
...
</div>
<?php
}
}
?>
Replace with:
<div class="row">
<?php
if (!empty($sql)) {
foreach ($sql as $value) {
?>
...
<?php
}
}
?>
</div>
In bootstap, row is a master container. col means grids inside the container.
egg:
<div class="row">
<div class="col-md-3">
item 1
</div>
<div class="col-md-3">
item 2
</div>
<div class="col-md-3">
item 3
</div>
<div class="col-md-3">
item 4
</div>
</div>
Please check here
link
Your mistake is to loop the main container.
#extends('master')
<body class="bg-light"></body>
<div class="container-fluid">
<div class="px-lg-5">
<div class="row">
<?php
if (!empty($sql)) {
foreach ($sql as $value) {
?>
<!-- Gallery item -->
<div class="col-xl-3 col-lg-4 col-md-6 mb-4 float-left">
<div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="img-fluid card-img-top">
<div class="p-4">
<h5> <?php echo $value->name; ?></h5>
<p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="small text-muted mb-0">Avaliable: <?php echo $value->quantity ?></p>
<div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
<p class="small mb-0"><span class="font-weight-bold">R$<?php echo $value->price ?></span></p>
<div class="badge badge-danger px-3 rounded-pill font-weight-normal">
<span class="text-dark"><?php echo substr($value->category, 0, 7); ?></span>
</div>
<div>
GET
</div>
<div>
GET
</div>
</div>
</div>
</div>
</div>
<!-- End -->
<?php } ?>
<!-- End -->
<?php } ?>
</div>
<div class="py-5 text-right">Show me more</div>
</div>
</div>
</body>
You had closed your body tag at 2nd line.
Try this:
#extends('master')
<body class="bg-light">
<div class="container-fluid">
<div class="px-lg-5">
<?php
if (!empty($sql)) {
foreach ($sql as $value) {
?>
<div class="d-flex">
<!-- Gallery item -->
<div class="col-xl-3 col-lg-4 col-md-6 mb-4 float-left">
<div class="bg-white rounded shadow-sm"><img src="https://bootstrapious.com/i/snippets/sn-gallery/img-1.jpg" alt="" class="img-fluid card-img-top">
<div class="p-4">
<h5> <?php echo $value->name; ?></h5>
<p class="small text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<p class="small text-muted mb-0">Avaliable: <?php echo $value->quantity ?></p>
<div class="d-flex align-items-center justify-content-between rounded-pill bg-light px-3 py-2 mt-4">
<p class="small mb-0"><span class="font-weight-bold">R$<?php echo $value->price ?></span></p>
<div class="badge badge-danger px-3 rounded-pill font-weight-normal">
<span class="text-dark"><?php echo substr($value->category, 0, 7); ?></span>
</div>
<div>
GET
</div>
<div>
GET
</div>
</div>
</div>
</div>
</div>
<!-- End -->
<?php } ?>
<!-- End -->
<?php } ?>
</div>
<div class="py-5 text-right">Show me more</div>
</div>
</div>
</body>
Related
i want to get acces to comment and get the value of it , i used $_POST but i get error
Undefined array key
the code create photo posts with while loop the post also contains the comment section.
here the Photo post code:
<!-- Photos section -->
<section>
<div class="container mt-5">
<div class="album py-5 bg-light">
<div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 row-cols-lg-1">
<div class="container">
<?php
if (mysqli_num_rows($res_for_pics) > 0) {
while ($pics = mysqli_fetch_assoc($res_for_pics)) { ?>
<div class="col mb-3">
<div class="card shadow-sm">
<img src="images/user/<?= $pics['pic'] ?>" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h5 class="card-title" id="add-com"><?php echo $pics['pic_title'] ?></h5>
<p class="card-text"><?php echo $pics['pic_des'] ?></p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted mb-3">by nithan</small>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h5 class="card-title"> Comments</h5>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">
howa
<p class="card-text"><small class="text-muted"></small></p>
</li>
</ul>
</div>
</div>
</div>
**I Want to get access to the value of textarea in the other php file**.
<form method="$_POST" action="../model/comment.php">
<div class="mb-3 mt-5">
<h5 for="message-text" class="col-form-label">add your comment</h5>
<textarea type="text" class="form-control" id="message-text" name="theComment"></textarea>
</div>
<button type="submit" class="btn btn-primary text-light" name="addComment">Comment</button>
</form>
</div>
</div>
</div>
<?php }
} ?>
</div>
</div>
</div>
</div>
</section>
and here comment.php
<?php
include('db_con.php');
$comment = $_POST["theComment"];
echo $comment;
So i try to get access to the 'theComment' value from the form .
<div id="products" class="row list-group">
<?php $counter = 1; foreach ($photo_products as $value) {
$product = new WC_Product( $value->ID ); ?>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="myImg" class="group list-group-image" src="<?php echo get_the_post_thumbnail_url($value->ID, array(324, 324)); ?>" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
<?php echo esc_attr($product->get_title()); ?></h4>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
<?php echo wc_price($product->get_price()); ?></p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success " href="<?php echo esc_attr($current_url).'/?add-to-cart='.esc_attr($value->ID); ?>">
<?php esc_html_e('Add to cart', 'woocommerce-photography-plugin'); ?>
</a>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img id="img01" class="modal-content" src="">
<div id="caption" class="modal-content">
<h4 class="group inner list-group-item-heading">
<?php echo esc_attr($product->get_title()); ?></h4>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead" >
<?php echo wc_price($product->get_price()); ?></p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success " href="<?php echo esc_attr($current_url).'/?add-to-cart='.esc_attr($value->ID); ?>">
<?php esc_html_e('Add to cart', 'woocommerce-photography-plugin'); ?>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<?php $counter++; } ?>
</div>
Instead of
$product = new WC_Product( $value->ID );
You can try, following code:
$product = WC_Product::find()->where('id'=>$value->ID);
My issue is owl carousel clone the item
i started with getting Reviews
<?php
if($total_num_of_rev > 0) { ?>
<div class="row">
<?php
$numOfCols = 6;
$rowCount = 0;
foreach($review_list_data as $key => $review_data) { ?>
and i put them in html code as following:
<div class="row">
<?php
if($total_num_of_rev > 0) { ?>
<div class="row">
<?php
$numOfCols = 6;
$rowCount = 0;
foreach($review_list_data as $key => $review_data) { ?>
<div class="col-md-12">
<div class="owl-carousel-3col" data-dots="false">
<div class="item">
<div class="testimonial style1">
<div class="comment bg-theme-colored">
<p class="font-15 pl-0 text-white"><?=$review_data['content']?></p>
</div>
<div class="thumb content mt-10 mb-10">
<?php
if($review_data['photo']) { ?>
<img class="img-circle" alt="" src="<?=SITE_URL.'images/review/'.$review_data['photo']?>">
<?php
} else { ?>
<img src="images/placeholder_avatar.jpg">
<?php
} ?>
</div>
<h4 class="author text-white mt-0 mb-0"><?=$review_data['name'].$i?></h4>
<h6 class="title text-white mt-0 mb-15">Designer</h6>
</div>
</div>
</div>
<div class="row"></div>
</div>
<?php
$rowCount++;
} ?>
<?php
} ?>
</div>
A screenshot of the issue
<section class="divide" data-bg-img="images/bg/bg8.jpg" style="background: 50% 97px rgb(17, 17, 17);">
<div class="container pt-60 pb-60">
<div class="section-title text-center">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-uppercase text-white line-bottom-center mt-0">What Claint's <span class="text-theme-colored2">Say</span></h2>
<div class="title-flaticon">
<i class="flaticon-charity-alms"></i>
</div>
<p class="text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem autem<br> voluptatem obcaecati!</p>
</div>
</div>
</div>
<div class="row">
<?php
if($total_num_of_rev > 0) { ?>
<div class="row">
<?php
$numOfCols = 6;
$rowCount = 0;
foreach($review_list_data as $key => $review_data) { ?>
<div class="col-md-12">
<div class="owl-carousel-3col" data-dots="false">
<div class="item">
<div class="testimonial style1">
<div class="comment bg-theme-colored">
<p class="font-15 pl-0 text-white"><?=$review_data['content']?></p>
</div>
<div class="thumb content mt-10 mb-10">
<?php
if($review_data['photo']) { ?>
<img class="img-circle" alt="" src="<?=SITE_URL.'images/review/'.$review_data['photo']?>">
<?php
} else { ?>
<img src="images/placeholder_avatar.jpg">
<?php
} ?>
</div>
<h4 class="author text-white mt-0 mb-0"><?=$review_data['name'].$i?></h4>
<h6 class="title text-white mt-0 mb-15">Designer</h6>
</div>
</div>
</div>
<div class="row"></div>
</div>
</div>
<h4 class="author text-white mt-0 mb-0"><?=$review_data['name'].$i?></h4>
<h6 class="title text-white mt-0 mb-15">Designer</h6>
</div>
</div>
</div>
<div class="row"></div>
</div>
<?php
$rowCount++;
} ?>
<?php
} ?>
</div>
</section>
I think i have mistake in javascript but not sure :
var $owl_carousel_3col = $('.owl-carousel-3col');
if ( $owl_carousel_3col.length > 0 ) {
if(!$owl_carousel_3col.hasClass("owl-carousel")){
$owl_carousel_3col.addClass("owl-carousel owl-theme");
}
$owl_carousel_3col.each(function() {
var data_dots = ( $(this).data("dots") === undefined ) ? false: $(this).data("dots");
var data_nav = ( $(this).data("nav")=== undefined ) ? false: $(this).data("nav");
var data_duration = ( $(this).data("duration") === undefined ) ? 4000: $(this).data("duration");
$(this).owlCarousel({
rtl: THEMEMASCOT.isRTL.check(),
autoplay: true,
autoplayTimeout: data_duration,
loop: false,
rewind: true,
items: 6,
margin: 15,
dots: data_dots,
nav: data_nav,
navText: [
'<i class="fa fa-chevron-left"></i>',
'<i class="fa fa-chevron-right"></i>'
],
responsive: {
0: {
items: 1,
center: false
},
480: {
items: 1,
center: false
},
600: {
items: 1,
center: false
},
750: {
items: 2,
center: false
},
960: {
items: 2
},
1170: {
items: 3
},
1300: {
items: 3
}
}
});
});
}
Your problem seems to be the position of your foreach loop. You want to loop the item, not the whole column.
Basically you are creating an carousel for each of your reviews and owl fills the whole width of your container with clones of the item.
Put your foreach loop around
<div class="item">
and try again.
i put foreach before item
one the following code :
<div class="row">
<div class="col-md-12">
<div class="owl-carousel-5col" data-dots="false">
<?php
if($total_num_of_rev > 0) { ?>
<div class="row">
<?php
$numOfCols = 6;
$rowCount = 0;
foreach($review_list_data as $key => $review_data) { ?>
<div class="item">
<div class="testimonial style1">
<div class="comment bg-theme-colored">
<p class="font-15 pl-0 text-white"><?=$review_data['content']?></p>
</div>
<div class="thumb content mt-10 mb-10">
<?php
if($review_data['photo']) { ?>
<img class="img-circle" alt="" src="<?=SITE_URL.'images/review/'.$review_data['photo']?>">
<?php
} else { ?>
<img src="images/placeholder_avatar.jpg">
<?php
} ?>
</div>
<h4 class="author text-white mt-0 mb-0"><?=$review_data['name'].$i?></h4>
<h6 class="title text-white mt-0 mb-15">Designer</h6>
</div>
</div>
</div>
<?php
$rowCount++;
} ?>
<?php
} ?>
</div>
</div>
</div>
but still an issue there
screenshot
i manage to fix the issue
To fix it i needed to put a div inside the loop
but it seems there is an empty item between every loop finish
<section class="divide" data-bg-img="images/bg/bg8.jpg" style="background: 50% 97px rgb(17, 17, 17);">
<div class="container pt-60 pb-60">
<div class="section-title text-center">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-uppercase text-white line-bottom-center mt-0">What Claint's <span class="text-theme-colored2">Say</span></h2>
<div class="title-flaticon">
<i class="flaticon-charity-alms"></i>
</div>
<p class="text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem autem<br> voluptatem obcaecati!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="owl-carousel-3col" data-dots="">
<?php
if($total_num_of_rev > 0) { ?>
<div class="">
<?php
$numOfCols = 3;
$rowCount = 0;
foreach($review_list_data as $key => $review_data) { ?>
<div class="item">
<div class="testimonial style1">
<div class="comment bg-theme-colored">
<p class="font-15 pl-0 text-white"><?=$review_data['content']?></p>
</div>
<div class="thumb content mt-10 mb-10">
<?php
if($review_data['photo']) { ?>
<img class="img-circle" alt="" src="<?=SITE_URL.'images/review/'.$review_data['photo']?>">
<?php
} else { ?>
<img src="images/placeholder_avatar.jpg">
<?php
} ?>
</div>
<h4 class="author text-white mt-0 mb-0"><?=$review_data['name'].$i?></h4>
<h6 class="title text-white mt-0 mb-15">Designer</h6>
</div>
</div>
</div>
<div class="">
<?php
$rowCount++;
} ?>
<?php
} ?>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
this is how it look
Screenshot 1
screenshot 2
any help?
Good Day All,
I am trying to align items in a row of 3. At the top of each row there is a div called "". The purpose of this div is to open a new and after every 3 items the div must be close and another one opened. I have tried the below code to my suprise it is not working. This is very weird as the MOD operand should work. Cna any of you see what I could be doing wrong?
The write picture should look like this
It is out of alignment and the blue colour fills the whole page. I do not know what I am doing wrong:
$currentRow = 1;
echo '<div class="top-box">';
while($Data=mysqli_fetch_array($Result))
{
echo '<div class="col_1_of_3 span_1_of_3">
<a href="Single.php?Query='.$Data[5].'">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/'.$Data[14].'" height="300" width="320" alt=""/>
</div>
<div class="price">
<div class="cart-left">
<p class="title">'.$Data[11].'</p>
<div class="price1">
<span class="actual">R'.$Data[13].'</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>';
$currentRow++;
if($currentRow % 3 == 0)
{
echo '</div> ';
echo '<div class="top-box">';
}
}
When I manually repeat the items every 3 items like below, it works perfectly:
<div class="top-box">
<div class="col_1_of_3 span_1_of_3">
<a href="Single.php">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/1st_Party_Boy.jpg" height="300" width="320" alt=""/>
</div>
<div class="price">
<div class="cart-left">
<p class="title">His First Party</p>
<div class="price1">
<span class="actual">R350.00</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>
<div class="col_1_of_3 span_1_of_3">
<a href="Single.php">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/Her_First_Party.jpg" height="300" width="320" alt=""/>
</div>
<div class="sale-box"><span class="on_sale title_shop">New</span></div>
<div class="price">
<div class="cart-left">
<p class="title">Her First of Many </p>
<div class="price1">
<span class="actual">R350.00</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>
<div class="col_1_of_3 span_1_of_3">
<a href="Single.php">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/First_one_for_boys_and_girls.jpg" height="300" width="320" alt=""/>
</div>
<div class="price">
<div class="cart-left">
<p class="title">Their First Birthday</p>
<div class="price1">
<span class="actual">R350.00</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>
<div class="clear"></div>
</div>
Hey change $currentRow to zero
$currentRow = 0;
echo '<div class="top-box">';
while($Data=mysqli_fetch_array($Result))
{
echo '<div class="col_1_of_3 span_1_of_3">
<a href="Single.php?Query='.$Data[5].'">
<div class="inner_content clearfix">
<div class="product_image">
<img src="images/'.$Data[14].'" height="300" width="320" alt=""/>
</div>
<div class="price">
<div class="cart-left">
<p class="title">'.$Data[11].'</p>
<div class="price1">
<span class="actual">R'.$Data[13].'</span>
</div>
</div>
<div class="cart-right"> </div>
<div class="clear"></div>
</div>
</div>
</a>
</div>';
$currentRow++;
if($currentRow % 3 == 0)
{
echo '</div> ';
echo '<div class="top-box">';
}
}
I have set of html block that are moved using jquery i need to make the correct loop of $posts array inside that i spent days trying to make it correct but it's not working for me.
The expected output should be
like this
Here is the my code
<?php if(!empty($posts)): ?>
<?php $count = 1; $countposts = count($posts); ?>
<?php for ($x = 0; $x <= $countposts; $x++): ?>
<?php if($x == 0): ?>
<div class="col-xs-12 col-sm-6 height-auto">
<?php else: ?>
<div class="col-sm-6 height-auto">
<?php endif; ?>
<?php foreach($posts as $post): ?>
<div class="col-sm-12 boxed no-padding-left">
<div class="col-sm-3 no-padding-left artical-thumb">
</div>
<div class="col-sm-9 padding-bottom-10">
<h4 class="text-right text-primary">post title</h4>
<h6 class="text-right">author name</h6>
<p class="text-right">
description text
</p>
more
</div>
</div>
<?php endforeach; ?>
</div>
<?php endfor; ?>
<?php $count++; endif; ?>
This is HTML output that i need
<div class="col-xs-12 col-sm-6 height-auto">
<div class="col-sm-12 boxed no-padding-left">
<div class="col-sm-3 no-padding-left artical-thumb">
</div>
<div class="col-sm-9 padding-bottom-10">
<h4 class="text-right text-primary">post title</h4>
<h6 class="text-right">author name</h6>
<p class="text-right">
description text
</p>
more
</div>
</div>
<div class="col-sm-12 boxed no-padding-left">
<div class="col-sm-3 no-padding-left artical-thumb">
</div>
<div class="col-sm-9 padding-bottom-10">
<h4 class="text-right text-primary">post title</h4>
<h6 class="text-right">author name</h6>
<p class="text-right">
description text
</p>
more
</div>
</div>
</div>
<div class="col-sm-6 height-auto">
<div class="col-sm-12 boxed no-padding-left">
<div class="col-sm-3 no-padding-left artical-thumb">
</div>
<div class="col-sm-9 padding-bottom-10">
<h4 class="text-right text-primary">post title</h4>
<h6 class="text-right">author name</h6>
<p class="text-right">
description text
</p>
more
</div>
</div>
<div class="col-sm-12 boxed no-padding-left">
<div class="col-sm-3 no-padding-left artical-thumb">
</div>
<div class="col-sm-9 padding-bottom-10">
<h4 class="text-right text-primary">post title</h4>
<h6 class="text-right">author name</h6>
<p class="text-right">
description text
</p>
more
</div>
</div>
</div>
<div class="col-sm-6 height-auto">
<div class="col-sm-12 boxed no-padding-left">
<div class="col-sm-3 no-padding-left artical-thumb">
</div>
<div class="col-sm-9 padding-bottom-10">
<h4 class="text-right text-primary">post title</h4>
<h6 class="text-right">author name</h6>
<p class="text-right">
description text
</p>
more
</div>
</div>
<div class="col-sm-12 boxed no-padding-left">
<div class="col-sm-3 no-padding-left artical-thumb">
</div>
<div class="col-sm-9 padding-bottom-10">
<h4 class="text-right text-primary">post title</h4>
<h6 class="text-right">author name</h6>
<p class="text-right">
description text
</p>
more
</div>
</div>
</div>
<div class="col-sm-6 height-auto">
<div class="col-sm-12 boxed no-padding-left">
<div class="col-sm-3 no-padding-left artical-thumb">
</div>
<div class="col-sm-9 padding-bottom-10">
<h4 class="text-right text-primary">post title</h4>
<h6 class="text-right">author name</h6>
<p class="text-right">
description text
</p>
more
</div>
</div>
<div class="col-sm-12 boxed no-padding-left">
<div class="col-sm-3 no-padding-left artical-thumb">
</div>
<div class="col-sm-9 padding-bottom-10">
<h4 class="text-right text-primary">post title</h4>
<h6 class="text-right">author name</h6>
<p class="text-right">
description text
</p>
more
</div>
</div>
</div>
Notice here that the main blocks the first one looks like that
<div class="col-xs-12 col-sm-6 height-auto">
But the others are
<div class="col-sm-6 height-auto">
Also inside each main block there are only 2 posts
You can simply achieve this by starting the loop inside this <div class="col-sm-6 height-auto"> (the one that acts as a slide) then close and open it with a check for each 2 posts, for example it should look like this:
<div class="col-xs-12 col-sm-6 height-auto">
<?php $counter = 0; foreach($posts as $post) : $counter++; ?>
<div class="col-sm-12 boxed no-padding-left">
<div class="col-sm-3 no-padding-left artical-thumb"></div>
<div class="col-sm-9 padding-bottom-10">
<h4 class="text-right text-primary">post title</h4>
<h6 class="text-right">author name</h6>
<p class="text-right">
description text
</p>
more
</div>
</div>
<?php if($counter == 2) : $counter = 0; ?>
</div><div class="col-sm-6 height-auto">
<?php endif; ?>
<?php endforeach; ?>
</div>
Hope I helped.
This is exactly what you want, im using a counter to determine the first post and so on:
<?php
$Posts = [
[
'title' => 'title',
'author' => 'author',
'desc' => 'desc',
'link' => 'link',
],
[
'title' => 'title',
'author' => 'author',
'desc' => 'desc',
'link' => 'link',
],
];
$Count = 0;
?>
<?php foreach( $Posts as $Post ) { ?>
<?php if ($Count == 0) {?>
<div class="col-xs-12 col-sm-6 height-auto">
<div class="col-sm-12 boxed no-padding-left">
<div class="col-sm-3 no-padding-left artical-thumb">
</div>
<div class="col-sm-9 padding-bottom-10">
<h4 class="text-right text-primary">
post title
</h4>
<h6 class="text-right">
author name
</h6>
<p class="text-right">
description text
</p>
<a href="#">
more
</a>
</div>
</div>
<div class="col-sm-12 boxed no-padding-left">
<div class="col-sm-3 no-padding-left artical-thumb">
</div>
<div class="col-sm-9 padding-bottom-10">
<h4 class="text-right text-primary">
post title
</h4>
<h6 class="text-right">
author name
</h6>
<p class="text-right">
description text
</p>
<a href="#">
more
</a>
</div>
</div>
</div>
<?php } else { ?>
<div class="col-sm-6 height-auto">
<div class="col-sm-12 boxed no-padding-left">
<div class="col-sm-3 no-padding-left artical-thumb">
</div>
<div class="col-sm-9 padding-bottom-10">
<h4 class="text-right text-primary">
post title
</h4>
<h6 class="text-right">
author name
</h6>
<p class="text-right">
description text
</p>
<a href="#">
more
</a>
</div>
</div>
<div class="col-sm-12 boxed no-padding-left">
<div class="col-sm-3 no-padding-left artical-thumb">
</div>
<div class="col-sm-9 padding-bottom-10">
<h4 class="text-right text-primary">
post title
</h4>
<h6 class="text-right">
author name
</h6>
<p class="text-right">
description text
</p>
<a href="#">
more
</a>
</div>
</div>
</div>
<?php } ?>
<?php $Count++; ?>
<?php } ?>