Topic: How can I make Bootstrap Pills work with anchor links?
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?
Bootstrap Pills can be used with anchor links by creating a list of links and setting the data-toggle attribute to "pill" on the parent ul element.
Here is an example code snippet for using Bootstrap Pills with anchor links:
html Copy code
Section 1 Section 2 Section 3Section 1
This is the content of section 1.
Section 2
This is the content of section 2.
Section 3
This is the content of section 3.
In this code, the ul element has the nav and nav-pills classes to style the links as pills. The data-toggle attribute is set to "pill" to enable the pills functionality.
Each li element contains an a element with a href attribute set to the ID of the corresponding content section. The first li element has the active class to make it the default active link.
The content sections are placed in div elements with the tab-content class. Each div element has an id attribute that matches the href attribute of the corresponding link, and the tab-pane and fade classes to style the content as a tab pane.
When a link is clicked, its corresponding content section is shown and the active link is updated.
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>
I don't have LinkedIn. Can you please send Rick's email address so I can contact him about the plugin?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- User: Premium
- 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