bootstrap 4 tabs with buttons with active class not working - button

Question

i have a small issue concerning my bootstrap 4 tabs:
My intention is too switch between buttons like this example: https://codepen.io/anon/pen/vwQamK but with bootstrap.
<div id="tab" class="btn-group btn-group-justified" data-toggle="buttons">
<a href="#prices" class="btn btn-primary active" data-toggle="tab">
<input type="radio" />Prices
</a>
<a href="#features" class="btn btn-default" data-toggle="tab">
<input type="radio" />Features
</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="prices">Prices content</div>
<div class="tab-pane" id="features">Features Content</div>
</div>
Currently the toggle between the tab content is not working!
Here is my codepen:
https://codepen.io/user1010/pen/mYQvVo

Answer 1

With .nav-pills
You can use .nav-pills: https://getbootstrap.com/docs/4.3/components/navs/#pills
<div class="container">
<div class="nav nav-pills">
<a href="#prices" class="nav-link active" data-toggle="pill">
Prices
</a>
<a href="#features" class="nav-link" data-toggle="pill">
Features
</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="prices">Prices content</div>
<div class="tab-pane" id="features">Features Content</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/dxzaufho/12/
With btn-group and custom styles
<div class="container">
<div class="nav btn-group">
<a href="#prices" class="btn active" data-toggle="tab">
Prices
</a>
<a href="#features" class="btn" data-toggle="tab">
Features
</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="prices">Prices content</div>
<div class="tab-pane" id="features">Features Content</div>
</div>
</div>
.btn-group.nav {
display: inline-flex;
}
.btn-group .btn.active {
background-color: var(--primary);
color: #fff;
}
demo: https://jsfiddle.net/davidliang2008/dxzaufho/19/
Regarding to your issue that your tab is not working, I've opened an issue in Github. Currently it looks like you need to have either .nav or .list-group as the tab's parent class, otherwise the tab won't work properly.

Answer 2

It looks like instead of being inputs that you can just use the text and it switches between content.
<div id="tab" class="btn-group btn-group-justified" data-toggle="buttons">
<a href="#prices" class="btn btn-primary active" data-toggle="tab">
Prices
</a>
<a href="#features" class="btn btn-default" data-toggle="tab">
Features
</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="prices">Prices content</div>
<div class="tab-pane" id="features">Features Content</div>
</div>

Answer 3

Bootstrap 4.3.1 working tabs as radio buttons - jsfiddle
$(document).ready(function () {
$('input[name="intervaltype"]').click(function () {
$(this).tab('show');
$(this).removeClass('active');
});
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="nav nav-tabs" role="tablist">
<div>
<input id="optDaily" checked name="intervaltype" type="radio" data-target="#scheduleDaily">
<label for="optDaily">Daily</label>
</div>
<div>
<input id="optWeekly" name="intervaltype" type="radio" data-target="#scheduleWeekly">
<label for="optWeekly">Weekly</label>
</div>
<div>
<input id="optMonthly" name="intervaltype" type="radio" data-target="#scheduleMonthly">
<label for="optMonthly">Monthly</label>
</div>
</div>
<div class="tab-content">
<div id="scheduleDaily" class="tab-pane active">Daily</div>
<div id="scheduleWeekly" class="tab-pane">Weekly</div>
<div id="scheduleMonthly" class="tab-pane">Montly</div>
</div>

Answer 4

I have the same problem. The group buttons worked very well on 4.31 but after I did an upgrade on bootstrap 4.4 or 4.4.1, on refresh they get active all and only after clicking each button they start to work properly.
I suggest you to try to use bootstrap 4.3.1 with the example from #Yevgeniy Afanasyev