Как сделать переключение вкладок на основе Bootstrap-4, но не использую list-group?

Question

[Дмитрий Дев]

Добрый день.
В Bootstrap есть возможность использовать группу списка с переключением Табов:

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

Но привязано это к list-group, который идет вертикальный и добавлены много свойств, которые мне не нужны. А как сделать это к моим переключателям? Или может есть в bootstap вариант переключения Табов горизантальных - я что-то не нашел?

Answer 1

[NaN]

напишите свои классы-модификаторы и поиграйте со стилями. там же с помощью флексов сделано, измените flex-direction. ну и остально.

а вообще если можете что-то сделать сами - делайте. это не очень сложная компонента.