troubleshooting Question

Bootstrap 5 Pills

Avatar of ucohockey
ucohockey asked on
HTMLBootstrap
8 Comments1 Solution15 ViewsLast Modified:
I'm trying to add a next and back button to Bootstrap 5 Pills. I have it working in bootstrap 3 with tabs but I need Bootstrap 5 with pills.
New Code
<ul class="nav nav-pills nav-fill mb-5" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-first-tab" data-bs-toggle="pill" data-bs-target="#pills-first" type="button" role="tab" aria-controls="pills-property" aria-selected="true">First</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-second-tab" data-bs-toggle="pill" data-bs-target="#pills-second" type="button" role="tab" aria-controls="pills-second" aria-selected="false">Second</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-third-tab" data-bs-toggle="pill" data-bs-target="#pills-third" type="button" role="tab" aria-controls="pills-third" aria-selected="false">Third</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-first" role="tabpanel" aria-labelledby="pills-first-tab">1 content
    <button class="btn btn-warning" type="button">Next</button>
  </div>
  <div class="tab-pane fade show" id="pills-second" role="tabpanel" aria-labelledby="pills-second-tab">2 content
    <button class="btn btn-warning" type="button">Back</button>
    <button class="btn btn-warning" type="button">Next</button>
  </div>
  <div class="tab-pane fade show" id="pills-third" role="tabpanel" aria-labelledby="pills-third-tab">3 content
    <button class="btn btn-warning" type="button">Back</button>
    <button class="btn btn-warning" type="submit">Submit</button>
  </div>
</div>


Old Code
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"> <a href="#billing" aria-controls="billing" role="tab" data-toggle="tab" aria-expanded="true">Billing Address</a> </li>
    <li> <a href="#shipping" aria-controls="shipping" role="tab" data-toggle="tab" aria-expanded="false">Delivery Address</a> </li>
    <li> <a href="#review" aria-controls="review" role="tab" data-toggle="tab" aria-expanded="false">Review &amp; Payment</a> </li>
  </ul>
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="billing">
      <h3 class="">Billing Address</h3>
      <p>Billing Address Form</p>
      <a class="btn btn-primary continue">Continue</a> </div>
    <div role="tabpanel" class="tab-pane" id="shipping">
      <h3 class="">Shipping Address</h3>
      <p>Shipping Address Form</p>
      <a class="btn btn-primary back">Go Back</a> <a class="btn btn-primary continue">Continue</a> </div>
    <div role="tabpanel" class="tab-pane" id="review">
      <h3 class="">Review &amp; Place Order</h3>
      <p>Review &amp; Payment Tab</p>
      <a class="btn btn-primary back">Go Back</a> <a class="btn btn-primary continue">Place Order</a> </div>
  </div>

ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 8 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 8 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros