Is it possible to have a navbar on bootstrap cards when they are dynamically created?

Question

I'm working on a website where I have multiple cards representing a product. I want to have tabs on the top of each card so that the user can see more details; however, when I try doing this, no matter which card I click the tab on, only the very first one changes. I think it is because of the id and aria-controls is the same on each one due to the loop, but I do not know how to fix this. Please help.

UPDATE:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="card border-dark mb-3 mx-auto text-center" *ngFor="let p of products">

  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id='product-tab' data-toggle='tab' role="tab" aria-controls="product" aria-selected="true" href="#product">Product</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id='user-tab' data-toggle='tab' role="tab" aria-controls="user" aria-selected="false" href="#user">User</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id='details-tab' data-toggle='tab' role="tab" aria-controls="details" aria-selected="false" href="#details">Details</a>
      </li>
    </ul>
  </div>

  <div class="card-body">
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="product" role="tabpanel" aria-labelledby="product-tab">

        <h5 class="card-title">{{p.name}}</h5>
        <div role="separator" class="dropdown-divider"></div>
        <h6 class="card-subtitle">
          <i>{{p.location}} | {{p.quantity}} available</i>
          <br>
          <small class="text-muted">Uploaded {{p.datePosted | date}}</small>
        </h6>
        <div role="separator" class="dropdown-divider"></div>
        <p class="card-text">{{p.description}}</p>

      </div>
      <div class="tab-pane fade" id="user" role="tabpanel" aria-labelledby="user-tab">
        <h5 class="card-title">{{p.userName}}</h5>
        <hr>
        <h6 class="card-subtitle">
          Contact Information:
        </h6>
        {{p.phone | phone}} {{p.email}}
        <hr>
        <h6 class="card-subtitle">
          Bell Id:
        </h6>
        {{p.employeeNumber}}
      </div>
      <div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">{{p.datePosted}}</div>
    </div>



  </div>

  <div class="card-footer">
    <button type="button" class="btn btn-outline-primary" (click)='rejectProduct(p.id)' [routerLink]="['/admin/products']">REJECT</button>
    <button type="button" class="btn btn-outline-primary" (click)='approveProduct(p.id)' [routerLink]="['/admin/products']">APPROVE</button>
  </div>

</div>

Please, show some code of what you've done. – Azametzin Mar 09 '20 at 19:10 — Azametzin, Mar 09 '20 at 19:10

score 0 · Answer 1 · answered Mar 11 '20 at 03:15

First, remember to include the Bootstrap javascript files if you have not done so already (they are not present in your code example).

Assuming you have the correct Bootstrap files linked, you'll need to give your elements unique IDs on each loop so that your tabs will call the correct tab pane content. To do this, simply declare a variable in the script that generates the cards and append it to the ID in each loop (e.g. id="product-tab-0", id="product-tab-1", etc.).

Is it possible to have a navbar on bootstrap cards when they are dynamically created?

1 Answers1