Help!! Cara merubah bootstrap tabs jadi toggle menu ketika di mobile

Temen" mohon bantuannya, ada yg tau cara merubah bootstrap tabs jadi responsive, jadi ketika di mobile tampilannya kaya gini.

normalnya yg udah saya buat begini.

kalo di layar kecil malah numpuk kaya gini.

pengennya kaya gambar yg pertama, mohon bantuannya. ini link codepen saya, barang kali mau langsung ngedit silahkan https://codepen.io/kiwiranto/pen/aVVqmw?editors=1100

css html mobile

@kiwiranto

5 Kontribusi 0 Poin

Diperbarui 6 tahun yang lalu

4 Jawaban:

Bisa coba ikuti link brikut sbagai referensi gan https://openam.github.io/bootstrap-responsive-tabs/

@zergz

62 Kontribusi 47 Poin

Dipost 6 tahun yang lalu

sayangnya itu responsive jadi accordion gan, but Terima kasih responnya gan

@kiwiranto

5 Kontribusi 0 Poin

Dipost 6 tahun yang lalu

sbenernya lebih enak pake panel group dari pada make tab

kalo masih kurang puas di otak atik aja sendiri...


<div class="container">

  <nav >
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#tes" >
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
    </div>
  </nav>

   <div class="collapse navbar-collapse" id="tes">
  <div class="panel-group" id="accordion" >
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Tab 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">
        <h2>tab1</h2>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Tab 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">
        <h2>Tab 2</h2>

        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Tab 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">
        <h2>tab3</h2>
        </div>
      </div>
    </div>
  </div>
</div>
    </div>

untuk css nya tambahin ini biar keliatan karna background putih

 .icon-bar {
  color: black;
  border-color: black;
  background-color: black;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: black;
}

@kodrenk

18 Kontribusi 3 Poin

Dipost 6 tahun yang lalu

dari w3schools

 https://askprog.com/reads/4

@Nandar

648 Kontribusi 204 Poin

Dipost 6 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

Help!! Cara merubah bootstrap tabs jadi toggle menu ketika di mobile

Kelas Premium!
Belajar bikin website dari nol sekarang