<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<br/><br/>
<div class="tabs">
<div class="tab-button-outer">
<ul id="tab-button">
<li><a href="#tab01">Tab 1</a></li>
<li><a href="#tab02">Tab 2</a></li>
<li><a href="#tab03">Tab 3</a></li>
<li><a href="#tab04">Tab 4</a></li>
<li><a href="#tab05">Tab 5</a></li>
</ul>
</div>
<div class="tab-select-outer">
<select id="tab-select">
<option value="#tab01">Tab 1</option>
<option value="#tab02">Tab 2</option>
<option value="#tab03">Tab 3</option>
<option value="#tab04">Tab 4</option>
<option value="#tab05">Tab 5</option>
</select>
</div>
<div id="tab01" class="tab-contents">
<h2>Tab 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
</div>
<div id="tab02" class="tab-contents">
<h2>Tab 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>
</div>
<div id="tab03" class="tab-contents">
<h2>Tab 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quos aliquam consequuntur, esse provident impedit minima porro! Laudantium laboriosam culpa quis fugiat ea, architecto velit ab, deserunt rem quibusdam voluptatum.</p>