Bootstrap 4 Pills with sub-pills-Twitter bootstrap

ArtemDumanov
July 1, 2019
195 views
0 votes
2 Answers

The goal is to make pills in pills like that with bootstrap 4 pills or navs. So it has tree structure like each category has subcategories and them dynamic.

You can see structure here

And should looks like

Here’s what I’ve tried so far:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-cvar-summary-tab" data-toggle="pill" href="#pills-cvar-summary" role="tab" aria-controls="pills-cvar-summary" aria-selected="true">Climate VaR Summary</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-cvar-sector-analysis-tab" data-toggle="pill" href="#pills-cvar-sector-analysis" role="tab" aria-controls="#pills-cvar-sector-analysis" aria-selected="false">Sector Analysis</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-cvar-country-analysis-tab" data-toggle="pill" href="#pills-cvar-country-analysis" role="tab" aria-controls="#pills-cvar-country-analysis" aria-selected="false">Country Analysis</a>
  </li>
</ul>

<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-cvar-summary" role="tabpanel" aria-labelledby="pills-cvar-summary-tab">

    <ul class="nav nav-pills mb-3" id="pills-tab-1" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="pills-cvar-summary-primary-tab" data-toggle="pill" href="#pills-cvar-summary-primary" role="tab" aria-controls="pills-cvar-summary-primary" aria-selected="true">Primary Info & Allocation</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" id="pills-cvar-summary-portfolio-analysis-tab" data-toggle="pill" href="#pills-cvar-summary-portfolio-analysis" role="tab" aria-controls="#pills-cvar-summary-portfolio-analysis" aria-selected="false">Portfolio Analysis</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" id="pills-cvar-summary-spread-tab" data-toggle="pill" href="#pills-cvar-summary-spread" role="tab" aria-controls="#pills-cvar-summary-spread" aria-selected="false">spread</a>
      </li>
    </ul>

    <div class="tab-content" id="pills-tab-1Content">
      <div class="tab-pane fade" id="pills-cvar-summary-primary" role="tabpanel" aria-labelledby="pills-cvar-summary-primary-tab">
        11111111
      </div>
    </div>
  </div>
  <div class="tab-pane fade" id="pills-cvar-summary-portfolio-analysis" role="tabpanel" aria-labelledby="pills-cvar-summary-portfolio-analysis-tab">
    2
  </div>
  <div class="tab-pane fade" id="pills-cvar-summary-spread" role="tabpanel" aria-labelledby="pills-cvar-summary-spread-tab">
    3
  </div>
</div>

Answers

Chosen as BEST ANSWER

I ended up with @Irin upgraded solution 1) use navs not button 2) Added content for the first section

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Climate VaR Summary</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Sector Analysis</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Country Analysis</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
    <ul class="nav nav-pills mb-3" id="pills-tab-1" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="pills-home-tab-1" data-toggle="pill" href="#pills-home-1" role="tab" aria-controls="pills-home-1" aria-selected="true">test 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="pills-home-tab-2" data-toggle="pill" href="#pills-home-2" role="tab" aria-controls="pills-home-2" aria-selected="false">test 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="pills-home-tab-3" data-toggle="pill" href="#pills-home-3" role="tab" aria-controls="pills-home-3" aria-selected="false">test 3</a>
      </li>
    </ul>

    <div class="tab-content" id="pills-tab-1Content">
      <div class="tab-pane fade show active" id="pills-home-1" role="tabpanel" aria-labelledby="pills-home-1">
        tabby 1
      </div>
      <div class="tab-pane fade show" id="pills-home-2" role="tabpanel" aria-labelledby="pills-home-2">
        tabby 2
      </div>
      <div class="tab-pane fade show" id="pills-home-3" role="tabpanel" aria-labelledby="pills-home-3">
        tabby 3
      </div>
    </div>
  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" type="button" class="btn btn-primary">test 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" type="button" class="btn btn-primary">test 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" type="button" class="btn btn-primary">test 2</a>
      </li>
    </ul>
  </div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" type="button" class="btn btn-primary">test 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" type="button" class="btn btn-primary">test 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" type="button" class="btn btn-primary">test 3</a>
      </li>
    </ul>
  </div>
</div>

(Edit)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Climate VaR Summary</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Sector Analysis</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Country Analysis</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" type="button" class="btn btn-primary">test 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" type="button" class="btn btn-primary">test 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" type="button" class="btn btn-primary">test 1</a>
      </li>
    </ul>
  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" type="button" class="btn btn-primary">test 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" type="button" class="btn btn-primary">test 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" type="button" class="btn btn-primary">test 2</a>
      </li>
    </ul>
  </div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" type="button" class="btn btn-primary">test 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" type="button" class="btn btn-primary">test 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" type="button" class="btn btn-primary">test 3</a>
      </li>
    </ul>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.