Top pick on bootstrap 5 navigation pane

Hey everyone, I'm currently working on setting up a featured post within a Bootstrap nav-pill that includes categories. The goal is to display 5 contents from the selected category in two separate divs and designate the first article as the featured one.

The issue I'm facing is with the second $tab_content displaying the 

<div class="col-md-6 col-sm-12 col-lg-5">
multiple times, causing it not to align properly.

Here's how it should look: 

<div class="col-md-6 col-sm-12 col-lg-5"> 5 contents in here </div>

Edit: The first tab_content, which represents the first article, should go inside this structure:

<div class="col-md-6 col-sm-12 col-lg-7"></div>

The second tab_content, which displays 5 articles, should be contained within this layout:

<div class="col-md-6 col-sm-12 col-lg-5"></div>

Below are the corresponding codes for reference:

[Code snippet provided here]

This code setup can be used in the following way:

<div class="row">
<?php require_once('modules/tabs.php'); ?>
   <ul class="nav nav-tabs nav-tabs-line">
    <?php echo $tab_menu; ?>
   </ul>
  <div class="tab-content">
    <?php echo $tab_content; ?>
  </div> 
</div>

I appreciate any assistance or guidance you may offer. Thank you!

cssbootstrap-5

Answer №1

Providing a solution to your query, I have reorganized the categories and articles arrays to ensure that all the necessary data is included. Additionally, I have implemented an if condition within the articles' foreach loop to display the relevant category tab data.


<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1c1111060106157627022d332d31">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"&...;
</head>
<body>

<?php
$categories =   array(
  array('tab_title'=>'Category-1','catId'=>1,'catName'=>'Category-1'),
  array('tab_title'=>'Category-2','catId'=>2,'catName'=>'Category-2'),
  array('tab_title'=>'Category-3','catId'=>3,'catName'=>'Category-3'),
  array('tab_title'=>'Category-4','catId'=>4,'catName'=>'Category-4')
);

$tab_menu = '';
$tab_content = '';
$i = 0;

foreach($categories as $row){
    if($i == 0){
      $tab_menu .= '<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab-'.$row["catId"].'"> '.$row["catName"].' </a> </li>';
      $tab_content .= '<div class="tab-pane show active" id="tab-'.$row["catId"].'">';
    } else {
      $tab_menu .= '<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab-'.$row["catId"].'">'.$row["catName"].'</a> </li>';
      $tab_content .= '<div class="tab-pane" id="tab-'.$row["catId"].'">';
    }

$articles = array(
  array(
  'post_title'=>'Some Text for Title Category 1',
  'post_id'=>'1',
  'catId'=>'1',
  'post_desc'=>'Some text for post content',
  'catName'=>'Category Name',
  'post_seo_url'=>'site.com/post_url',
  'post_image'=>'site.com/images/image',
  'cat_seo_url'=> 'url',
  'username'=>'username',
  'user_id'=>'id',
  'post_created_at'=>date('Y-m-d')
  ),
  array(...),
  array(...),
  array(...),
);

$first = true;
foreach($articles as $sub_row){

       if($sub_row['catId'] == $row['catId']){

                if ($first == true) { 
              
                      if (!empty($row['post_video_url']) OR !empty($row['post_video_embed_code'])) { 
                          $show = '<div class="w-100 mb-auto d-flex justify-content-end"> ...';
                      } else {
                          $show = '<span class="card-featured" title="Featured post"><i class="fas fa-star"></i></span>';
                      }
              
                    $tab_content .= ' ...';
                    
                    $first = false;
                
                } else {
                
                    $tab_content .= ' ...';
                  }
              }
       }
      $tab_content .= '</div>';
      $i++;

}

?>
   <ul class="nav nav-tabs nav-tabs-line">
    <?php echo $tab_menu; ?>
   </ul>
  <div class="tab-content">
    <?php echo $tab_content; ?>
  </div> 




</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Curious as to why body.scrollTop functions differently in Google Chrome and Firefox compared to Microsoft Edge

Up until recently, the code body.scrollTop was functioning correctly in my Chrome browser. However, I've noticed that now it is returning 0 in both Firefox and Chrome, but still giving the proper value in Microsoft Edge. Is there anyone who can assis ...

javascripthtmlcss

Toggle the Bootstrap navbar class based on the current scroll position

I'm currently working on the development of a website that includes a feature where a static navbar transforms into a fixed navbar after scrolling down 500px. The transition from "navbar-static-top" to "navbar-fixed-top" is functioning properly. Howev ...

javascriptjqueryhtmlcsstwitter-bootstrap

The notification panel pop-up box keeps moving away from the right side

I'm currently in the process of creating a straightforward vertical notification panel, similar to the one seen on Stack Overflow. However, I've encountered an issue where the pop-up is not staying positioned correctly to the right side. It behav ...

javascripthtmljquerycss

How to align several DIVs within a container with an unspecified size

I have several blue rectangles with known dimensions (180 x 180 px) within a container of unknown size. <html> <head> <style> @import url('http://getbootstrap.com/dist/css/bootstrap.css&a ...

htmlcsstwitter-bootstrapcenter

Text aligned vertically within an element using the table-cell display attribute in the Chrome browser

Struggling to align text inside an element styled with display: table-cell? The issue arises when dealing with multiline text in a tab format. Achieving the correct vertical-align: middle; requires displaying it as a table-cell, which works well in most ca ...

cssgoogle-chrome

CSS: Struggling with Div Alignment

Here is a visual representation of the issue I am facing: View the screenshot of the rendered page here: http://cl.ly/image/0E2N1W1m420V/Image%202012-07-22%20at%203.25.44%20PM.png The first problem I have encountered is the excessive empty space between ...

htmlcss

Ensure a div stays on a single line when viewed in Internet Explorer

My current setup is structured in the following way. <div id="header"> <div id="heading">Title</div> <div id="flow"> Enter Something: <input type="textbox" size="30" id="id" class="class" onkeyup="dosomething()" /> &l ...

jqueryhtmlcss

Grid item overlay

Currently, I am facing an issue with React where I am attempting to place an overlay on top of each grid item in a grid. Despite trying multiple approaches, the overlay appears beneath each grid item instead of over it. Even setting the position: absolute ...

cssreactjscss-grid

What is the best way to prevent blank space when splitting a div into two parts?

Currently in the process of working on a school project that involves creating a website with an integrated database. The foundation for this project is an existing website from a previous assignment, created using PHP/HTML. The layout of my prior website ...

htmlcss

How can I delete the header and footer on a personalized homepage design?

After crafting a unique home page/landing page for my website that stands out from the rest, I've come across an issue. The header and footer are appearing on this new page, but I only want to display what I specifically coded. I attempted using Site ...

htmlcsswordpressweb

Issue with readonly is preventing the ability to alter the font color of the input

I need to change the font color of a disabled input. When it is disabled, it appears gray and I want it to be black instead. I attempted to use readonly but that did not have the desired effect, and now the input is showing [object Object]. Below is my HTM ...

javascripthtmlcssangulartypescript

Utilizing data attributes and JavaScript to dynamically assign a class to carousel navigation items

Hello there! I recently created a carousel and carousel navigation system using Bootstrap. I am now trying to figure out how to detect the value of 'data-slide-to' and then apply a specific style to the corresponding navigation item based on that ...

javascriptjquerycsstwitter-bootstrap

CSS - Overlapping <a> elements when resized

My buttons have the following properties: background: #c6cdf2; border: 1px solid #8896e4; border-radius: 3px; padding: 6px 10px 3px 10px; When the page resizes, the buttons don't respect the padding and start overlapping each other. https://i.sstat ...

htmlcssresponsive-design

How to display only the thumbnail on WordPress archive page and remove the post excerpt

I am currently in the process of revamping my category archive to resemble a grid layout by utilizing custom CSS. I have successfully eliminated the elements I desired using code like this: .archive .entry-footer { display: none; } Now, I only have t ...

csswordpress

duplicate styling for individual table cells

I am in need of a span element inside a td tag that I am generating within a table. In order to ensure the span fills the td, I have set it as an inline-block with a width and height of 100%. However, when pressing the delete key in the last cell, it star ...

htmlcss

Combining multiple images into one CSS image sprite to create 4 clickable

Could someone please review this segment of the CSS to ensure its accuracy? CSS #nav-list { list-style-type: none; background-repeat: no-repeat; background-image:url("../_img/Footersprite.png") } #nav-list li, #nav-footer a { height: 40 ...

htmlcss

Preventing attribute or tag cloning in Jquery: What you need to know

I'm having some trouble with JQuery. I want to clone an attribute or tag that is dragged from one div1 to another div2, which is working fine. But the issue arises when I drag or move the position of an existing tag on div2, then the cloning process s ...

javascriptjqueryhtmlcss

Media Queries seem to be unresponsive on Tablet and Desktop devices

I've been trying to resolve this issue for quite some time now, but I'm still unable to find a solution. My goal is to center the Wufoo Forms visually on different screen sizes using media queries, however, despite rewriting them multiple times a ...

cssmedia-querieswufoo

Tips for arranging divs in the exact way you want

Can you assist me in creating a layout like the one shown in the image below? I have attempted to achieve it, but my understanding of CSS is lacking and the layout needs to be completed quickly... I experimented with CSS properties such as float, overflow ...

csshtml

How can I stack images on top of each other using Div, CSS, and ZIndex?

Currently, I am facing a challenge with overlapping 5 pictures. Despite reading numerous tutorials on CSS and div overlapping techniques, I still don't quite understand how to achieve it. The container where I want these images to overlap has a widt ...

css