How to add tabs through button group in bootstrap 4?

Question

HTML

You need to make tabs, but the buttons and content should be in different blocks. I want to do it through button-group on bootstrap 4, I wrote everything but it doesn’t work .. I attached the source code, tell me how to figure it out
Here is the structure

<div class="btn-group btn-group-sm btn-group-toggle d-flex justify-content-center pt-2" data-toggle="buttons">
                  <label class="btn btn-outline-tablet active">
                    <input type="radio" name="options" id="option1" autocomplete="off" onclick="openCity('London')" checked> London'
                  </label>
                  <label class="btn btn-outline-tablet">
                    <input type="radio" name="options" id="option2" autocomplete="off" onclick="openCity('Paris')"> Paris
                  </label>
                  <label class="btn btn-outline-tablet">
                    <input type="radio" name="options" id="option3" autocomplete="off" onclick="openCity('Tokyo')"> Tokyo
                  </label>
                </div>
<div id="London" class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div id="Paris" class="city" style="display:none">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p> 
</div>ы
<div id="Tokyo" class="city" style="display:none">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

and js

function openCity(cityName) {
    var i;
    var x = document.getElementsByClassName("city");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none"; 
    }
    document.getElementById(cityName).style.display = "block"; 
}

Answer 1

And why implementation through radiobuttons? If a purely designer conceived this way, then it is easier to make pseudo-radio buttons. In 4 booths there are ready-made tabstyts . Navigation - separately, tab content - separately