У меня есть табы созданные с помощью bootstrap.

Я хочу что бы количество табов зависело от того сколько я добавил в бд. Я добавил таблицу в бд
с id и tabs то есть название таба.

У меня все табы выводятся только разметка теряется!
В function.php создаю подключение к бд и чтение из бд
<?php
include 'config/config.php';
$get_id = $_GET['id'];
$get_tabs = $_GET['tabs'];
//Read
$sql = $pdo->prepare("SELECT * FROM x_tabs");
$sql->execute();
$result = $sql->fetchAll(PDO::FETCH_OBJ);
А в индексном файле создаю табы таким образом
<?php foreach ($result as $res) { ?>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="<?php echo $res->id; ?>" data-toggle="tab" href="#<?php echo $res->tabs; ?>" role="tab" aria-controls="<?php echo $res->tabs; ?>" aria-selected="true"><?php echo $res->tabs; ?></a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
</div>
<?php } ?>