Bootstrap 3 is unable to unmark the justified dropdown button group for the inactive options

Question

With Bootstrap 3.3.7, I am trying to have a justified navigation dropdown button group, to mark correctly, after selection. I am having the problem of both menu options being marked, in the dropdown button, when one after another options being selected. Are there anyways to have the dropdown menu to mark only the option being selected, while being a justified group dropdown navigation button? Thank you!

sample code

<div class="row">
<div class="col-md-7">
    <div class="btn-group btn-group-justified" role="group">
        <a href="#left" class="btn btn-primary" role="button" data-toggle="tab">Left</a>
        <a href="#middle" class="btn btn-primary" role="button" data-toggle="tab">Middle</a>
        <div class="btn-group" role="group">
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" role="button"> Dropdown <span class="caret"></span> </a>
            <ul class="dropdown-menu">
                <li><a href="#drop1" role="tab" data-toggle="tab">drop 1</a></li>
                <li><a href="#drop2" role="tab" data-toggle="tab">drop 2</a></li>
            </ul>
        </div>
    </div>

    <div class="tab-content">
        <div class="tab-pane active" role="tabpanel" id="left">please select 1 of the options in the dropdown</div>
        <div class="tab-pane" role="tabpanel" id="middle">please try the dropdown on the right</div>
        <div class="tab-pane" role="tabpanel" id="drop1">please try select drop 2 also, then both are marked under the dropdown</div>
        <div class="tab-pane" role="tabpanel" id="drop2">please try select drop 1 also, then both are marked under the dropdown</div>
    </div>
</div>

Answer 1

I tailored @partypete25 answers, to my needs. Thanks again @partypete25!

sample code

<style>
    .nav.nav-pills.nav-justified.nav-group > li:not(:first-child):not(:last-child) > .btn {
        border-radius: 0;
        margin-bottom: 0;
    }

    @media(max-width:768px){
        .nav.nav-pills.nav-justified.nav-group > li:first-child:not(:last-child) > .btn {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            margin-bottom: 0;

        }
        .nav.nav-pills.nav-justified.nav-group > li:last-child:not(:first-child) > .btn {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        .nav.nav-pills.nav-justified.nav-group li + li {
            margin-left: 0;
        }
    }
    @media(min-width:768px){
        .nav.nav-pills.nav-justified.nav-group > li:first-child:not(:last-child) > .btn {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        .nav.nav-pills.nav-justified.nav-group > li:last-child:not(:first-child) > .btn {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
</style>

<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-pills nav-justified nav-group">
            <li class="active"><a href="#left" class="btn btn-primary" role="tab" data-toggle="tab">Left</a></li>
            <li><a href="#middle" class="btn btn-primary" role="tab" data-toggle="tab">Middle</a></li>
            <li class="dropdown">
                <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" role="button"> Dropdown <span class="caret"></span> </a>
                <ul class="dropdown-menu">
                    <li><a href="#drop1" role="tab" data-toggle="tab">drop 1</a></li>
                    <li><a href="#drop2" role="tab" data-toggle="tab">drop 2</a></li>
                </ul>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" role="tabpanel" id="left">please select 1 of the options in the dropdown</div>
            <div class="tab-pane" role="tabpanel" id="middle">please try the dropdown on the right</div>
            <div class="tab-pane" role="tabpanel" id="drop1">please try select drop 2 also, then both are marked under the dropdown</div>
            <div class="tab-pane" role="tabpanel" id="drop2">please try select drop 1 also, then both are marked under the dropdown</div>
        </div>
    </div>
</div>

Answer 2

Instead of using button groups I'd recommend using the Nav component instead styled with the pills modifier class. It's not the same but very close and the Tab panels are built to work with the pills styling.

It will solve the problem you have now with the active class remaining on the dropdown options.

<div>
  <ul class="nav nav-pills nav-justified" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="pill">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="pill">Profile</a></li>
    <li role="presentation" class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
      <ul class="dropdown-menu">
        <li><a href="#messages" aria-controls="messages" role="tab" data-toggle="pill">Messages</a></li>
        <li><a href="#settings" aria-controls="settings" role="tab" data-toggle="pill">Settings</a></li>
      </ul>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">home</div>
    <div role="tabpanel" class="tab-pane" id="profile">profile</div>
    <div role="tabpanel" class="tab-pane" id="messages">messages</div>
    <div role="tabpanel" class="tab-pane" id="settings">settings</div>
  </div>
</div>

https://codepen.io/partypete25/pen/Moooaq?editors=1100