How can I make Bootstrap Pills work with anchor links?


Topic: How can I make Bootstrap Pills work with anchor links?

cwalladev pro premium asked 2 years ago

I want to set up Pills so they work like the Overview and API buttons at the top of this page: https://mdbootstrap.com/docs/standard/navigation/pills/#docsTabsOverview

Out of the box, they work like the examples (tab 1, tab 2, tab 3)

How can I make Pills work with anchor links so I can link directly to content?


mlazaru staff answered 2 years ago

You can take code from examples and add your content inside pills to achieve similar effect.

This is how you can connect anchor links with the content:

add href attribute with id of the tab-pane you want to controll:

  <li class="nav-item" role="presentation">
  <a
  class="nav-link active"
  id="tab1"
  data-mdb-toggle="pill"
  href="#content1"
  role="tab"
  aria-controls="content1"
  aria-selected="true"
  >Tab 1</a
>

Add tabs to the .tab-content wrapper:

<div class="tab-content">
  <div
  class="tab-pane fade show active"
  id="content1"
  role="tabpanel"
  aria-labelledby="tab1"
  >
Tab 1 content
  </div>
</div>

cwalladev pro premium answered 2 years ago

I don't have LinkedIn. Can you please send Rick's email address so I can contact him about the plugin?


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.2
  • Device: MacBook Air M1
  • Browser: Chrome
  • OS: macOS Monterey
  • Provided sample code: No
  • Provided link: Yes