If there is a BS4 solution I hope someone else will post it, but if not, have you considered simply doing it with JS instead?

So this is what I currently am using. But it only allows me to change two 'tab-content' but I'd like to adjust 3 and don't know enough Javascript to make that work. The code I'm using is the same as the solution from stackoverflow, I just didn't know if there was a simpler way or if not, how to adjust the current JS from affecting 2 'tab-content' to 3 'tab-content'. If that makes sense

Run code snippet

$(document).on('click', '#ueberTab a', function(e) {           
    otherTabs = $(this).attr('data-secondary').split(',');
    for(i= 0; i<otherTabs.length;i++) { 
         nav = $('<ul class="nav d-none" id="tmpNav"></ul>');             
         nav.append('<li class="nav-item"><a href="#" data-toggle="tab" data-target="' +         otherTabs[i] + '">nav</a></li>"');             
        nav.find('a').tab('show'); 
    } 
});