1

I am trying to create categories nav-pill with bootstrap 5. İt has two cols first one is futured post and second one displays 5 posts.

I have tried like this but it wasn't right because they are in different columns (side by side), simple example:

$sql = "SELECT * FROM articles WHERE article_id = ? ORDER BY article_id DESC";
$result = $pdo->prepare($sql);
$result->execute([$cats['cat_id']]);
  if ($result->rowCount() > 0) {
    $array = array('class 1', 'class 2');    
    $i=0;  
    while($row = $result->fetch()) { ?>

     <div class="<?php $array[$i];?>">

     </div>

    <?php 
     $i++;
    } 
}
?>

My html:

<div class="row">

<!-- first futured column ->
  <div class="col-sm-6">
    <div class="whats-news-single mb-40 mb-40">
      <div class="whates-img">
        <img src="..." alt="">
      </div>
      <div class="whates-caption">
        <a href="latest_news.html">Secretart for Economic Air plane that looks like</a>
        <p>Struggling to sell one the market won’t stop actress and the and singer Jennifer Lopez.</p>
        <span class="small">by Alice cloe - Jun 19, 2020</span>
      </div>
    </div>
  </div>
  
<!-- second column displays 5 articles ->
  <div class="col-sm-6">
    <div class="card mb-3">
      <div class="row g-3">
        <div class="col-4">
          <img class="rounded" src="..." alt="">
        </div>
        <div class="col-8">
          <h6><a href="post-single-2.html" class="btn-link stretched-link text-reset fw-bold">The pros and cons of business agency</a></h6>
          <div class="small mt-1">May 17, 2021</div>
        </div>
      </div>
    </div>
    <div class="card mb-3">
      <div class="row g-3">
        <div class="col-4">
          <img class="rounded" src="..." alt="">
        </div>
        <div class="col-8">
          <h6><a href="post-single-2.html" class="btn-link stretched-link text-reset fw-bold">5 reasons why you shouldn't startup</a></h6>
          <div class="small mt-1">Apr 04, 2021</div>
        </div>
      </div>
    </div>
    <div class="card mb-3">
      <div class="row g-3">
        <div class="col-4">
          <img class="rounded" src="..." alt="">
        </div>
        <div class="col-8">
          <h6><a href="post-single-2.html" class="btn-link stretched-link text-reset fw-bold">Ten questions you should answer truthfully.</a></h6>
          <div class="small mt-1">Jun 30, 2021</div>
        </div>
      </div>
    </div>
    <div class="card mb-3">
      <div class="row g-3">
        <div class="col-4">
          <img class="rounded" src="..." alt="">
        </div>
        <div class="col-8">
          <h6><a href="post-single-2.html" class="btn-link stretched-link text-reset fw-bold">Five unbelievable facts about money.</a></h6>
          <div class="small mt-1">Nov 29, 2021</div>
        </div>
      </div>
    </div>
  </div>
</div>

This is how it has to look like enter image description here

j08691
  • 204,283
  • 31
  • 260
  • 272
Backlink Tr
  • 11
  • 1

1 Answers1

0

I'm a bit confused by your question. Is the featured Post a randomly selected post, or is it always the newest in the database? If its always the newest, you could just query by article_id desc (as you're currently doing) and then access the first post via:

$array[0]

That way you can now create your featured post view by using all the data available in the first index of your array.This only works if you put your query results into an array, as described here:. Note that you should use mysqli functions, and not mysql. For the next five, you can then make use of for to display five more articles:

for($i = 1; $i <= 5;$i++) {
 // repeat the section for one post five times
}

This will allow you to create the view you described.

lum_dev
  • 1
  • 1