Module does not support Bootstrap v3 syntax for vertical tabs

@seattlehimay
Which drupal version is using by you?

@ravi kant
Drupal 9.5.10.
Horizontal Tabs: 2.0.4
Bootstrap Theme: 3.29

Thank you.

@seattlehimay
The module has upgraded according bootstrap5.
data-toggle="tab" is working for bootstrap3 but it updated as data-bs-toggle="tab" according bootstrap5.

Also there is one more ticket related to this.
https://www.drupal.org/project/bootstrap_horizontal_tabs/issues/3377313 🐛 Tab is not working in Bootstrap 5 Needs work

Thank you for looking at this, but I don't think this is the same problem. I am using bootstrap 3, and I see data-toggle="tab" which *should* be working, right? Regardless, changing them all to data-bs-toggle didn't help either.

Tabs work as expected in the horizontal. When set to vertical, they still appear horizontal.

It seems like maybe the "vertical" setting relies on styles (flex) that aren't supplied by bootstrap 3(which uses floats)?

After looking at this more, I see for sure that the code they used to add vertical tabs was available in bootstrap 4, not 3. So while it appears as if this module is compatible with 3, not all features are.

Hi all, I've created a patch that adds the 'nav-stacked' class to the tab's

element per the documentation for Bootstrap 3. I have not tested this with Bootstrap 4 and 5.

https://getbootstrap.com/docs/3.4/components/#nav

Tested #8 - resolves issue in Bootstrap 3, but makes tab buttons non-functional in Bootstrap 5.

Correction to #10 - the bug with Bootstrap 5 happens even without the patch, as described here 🐛 Tab is not working in Bootstrap 5 Needs work . I've also confirmed that it still works with Bootstrap 4.

Based on this issue and 🐛 Tab is not working in Bootstrap 5 Needs work , it appears that the differences between Bootstrap 3, 4, and 5 necessitate some level of conditional logic to correctly render markup for each version of the framework.

I've therefore created ✨ Configuration option to set which version of Bootstrap is being used Fixed . Once that is completed, we can return to this issue and add conditional logic in the code to vary the rendering as needed to match the version of the Bootstrap framework being used.

Setting status to "Postponed."

The changes required by 🐛 Tab is not working in Bootstrap 5 Needs work do break things in 3 and 4. I agree that a configuration option indicating which version is being used would be a good fix.

I've tested and confirmed that #8 fixes this specific issue without impeding anything in Bootstrap 4 or 5, so this change doesn't need to be conditional and can be merged now.

Automatically closed - issue fixed for 2 weeks with no activity.