Bootstrap 4 tabs don't work in Wordpress Understrap theme

Question

I'm currently using the Understrap theme in Bootstrap 4. I have tried everything to make tabs work.

I have:
- Copied and pasted many working solutions from the web
- Added manually the jQuery and Bootstrap CSS
- Tried it in different pages
- Tried with /# and only #

And nothing seems to work.

Here's my code:

<!-- Nav tabs -->
                <ul class="nav nav-tabs text-xs-center" role="tablist">
                    <li class="nav-item">
                        <div class="nav-item-content">
                            <a class="nav-link active" data-toggle="tab" href="/#innovation" role="tab">
                                <div class="icon-wrapper innovation"></div>
                                <h4>Innovation &<br/>Investigation</h4>
                            </a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <div class="nav-item-content">
                            <a class="nav-link" data-toggle="tab" href="/#electronic-engineering" role="tab">
                                <div class="icon-wrapper electronic-engineering"></div>
                                <h4>Electronic<br/>Engineering</h4>
                            </a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <div class="nav-item-content">
                            <a class="nav-link manufacturing" data-toggle="tab" href="/#manufacturing" role="tab">
                                <div class="icon-wrapper manufacturing"></div>
                                <h4>Manufacturing</h4>
                            </a>
                        </div>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content clearfix">

                    <!-- Innovation -->
                    <div class="tab-pane" id="innovation" role="tabpanel">
                        <div class="col-sm-5 text-xs-center">
                            <img src="<?php echo get_template_directory_uri(); ?>/imgs/icons/Innovation-Azul.png">
                        </div>
                        <div class="col-sm-5">
                            <p>Mostly done in tight cooperation with local and European partners, Exatronic engages in complex long term I+I projects, lasting up to 3 years, to address innovation opportunities that combines multidisciplinary hard skills. In former and current projects, Exatronic partnered with companies and Investigation entities with expertise in telecommunications, mechanics, industrial product design, cloud computing, plastic moulding, health, precision agriculture and more. Usually, such I+I projects are funded by national or European programs.</p>

                            <a href="<?php echo site_url(); ?>/how-to-start-up/" class="btn btn-primary">How Can I Start</a>
                        </div>
                    </div>

                    <!-- Electronic Engineering -->
                    <div class="tab-pane" id="electronic-engineering" role="tabpanel">
                        <div class="col-sm-5 text-xs-center">
                            <img src="<?php echo get_template_directory_uri(); ?>/imgs/icons/Engineering_Azul.png">
                        </div>
                        <div class="col-sm-5">
                            <p>Having as starting point a simple idea or concept, we carry out the technical viability analysis, we build the whole R&D process, we manufacture the solution and we finish by delivering the new product viability analysis, we build the whole R&D process, we manufacture the solution and we finish by delivering the new product.</p>

                            <a href="<?php echo site_url(); ?>/how-to-start-up/" class="btn btn-primary">How Can I Start</a>
                        </div>
                    </div>

                    <!-- Manufacturing -->
                    <div class="tab-pane active" id="manufacturing" role="tabpanel">
                        <div class="col-sm-5 text-xs-center">
                            <img src="<?php echo get_template_directory_uri(); ?>/imgs/icons/Supply-Azul.png">
                        </div>
                        <div class="col-sm-5">
                            <p>Having as starting point a simple idea or concept, we carry out the technical viability analysis, we build the whole R&D process, we manufacture the solution and we finish by delivering the new product viability analysis, we build the whole R&D process, we manufacture the solution and we finish by delivering the new product.</p>

                            <a href="<?php echo site_url(); ?>/how-to-start-up/" class="btn btn-primary">How Can I Start</a>
                        </div>
                    </div>
                </div>

And here's a live example: - http://www.exatronic.pt/services/

Thanks

Answer 1

I test the default Bootstrap 4 markup on the UnderStrap demo site here: https://understrap.com/understrap/?page_id=1817

And the markup works fine. Maybe its this href="/#innovation" in your code. Remove the / slash before to target the right content item.

Thats what I use on the demo site: https://v4-alpha.getbootstrap.com/components/navs/#using-data-attributes

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">one</div>
  <div class="tab-pane" id="profile" role="tabpanel">two</div>
  <div class="tab-pane" id="messages" role="tabpanel">three</div>
  <div class="tab-pane" id="settings" role="tabpanel">four</div>
</div>

Answer 2

The URL you provided loads a script vertical-one-page.js for smooth scrolling, which is adding a 'click' event handler to the links that make up the tabs. That event handler changes the location and also returns 'false', which prevents other event handlers from running. You might need to remove that script, or modify it so that its actions do not affect clicks on the tabs.

The href changes that holger1411 mentioned are necessary too. Using href="/#hash" refers to #hash at the location / rather than on the current page ( /services/ ). Using only href="#hash" refers to #hash on the current page.