Bootstrap4 tabs not rendering properly

[Sorjak]

• Package version: 1.6.1
• Django version: 1.10.3
• Python version: 3.4.2

Description:

Trying to get tabs to render, using TabHolder and Tabs as documented.

TabHolder( 
    Tab('Header Block',
        InlineField('first_image_upload'),
        InlineField('first_video_upload'),
    ),
    Tab('Main Block',
        InlineField('second_image_upload'),
        InlineField('second_video_upload')
    ),
),

This results in the main tabs nav with <li> elements that have the "tab-pane" css class, where they should have the "nav-item" css class, and the <a> links under them should have the "nav-link" css class, according to this

This is the current result:

I've tried overriding the "tab-link.html" template under bootstrap4/layout, but it doesn't seem like there's a way to override the "link_template" field in the Tab object.

Am I missing something obvious?

[carltongibson]

Hi @Sorjak — Can you review #676? Does that help? (Tests were failing there so it needs updating at the least but, Is that your issue?)

[nyejon]

Hi,

I solved this on my side using the below edit to the template pack:

tab-link.html:
<li class="nav-item"><a class="nav-link{% if 'active' in link.css_class %} active{% endif %}" href="#{{ link.css_id }}" data-toggle="tab">{{ link.name|capfirst }}{% if tab.errors %}!{% endif %}</a></li>

[carltongibson]

See #732: I've asked for help finalising Bootstrap 4 support, and we'll do a new release in the autumn before Django 2.0, or sooner if we get lots of input.