css - So bootstrap is separating my buttons? -

my issue code when added links around buttons separated buttons up. , instead of them being joined no longer joined.

 <div class="btn-group btn-group-justified" role="group" aria-label="...">   <div class="btn-group" role="group">     <a href="/learn/popular-tags/all"><button type="button" class="btn btn-default <? if ($type == 'all'){ ?>active<? } ?>">all</button></a>   </div>   <div class="btn-group" role="group">     <a href="/learn/popular-tags/male"><button type="button" class="btn btn-default <? if ($type == 'male'){ ?>active<? } ?>">male</button></a>   </div>   <div class="btn-group" role="group">     <a href="/learn/popular-tags/female"><button type="button" class="btn btn-default <? if ($type == 'female'){ ?>active<? } ?>">female</button></a>   </div>     <div class="btn-group" role="group">     <a href="/learn/popular-tags/couples"><button type="button" class="btn btn-default <? if ($type == 'couples'){ ?>active<? } ?>">couples</button></a>   </div>   <div class="btn-group" role="group">     <a href="/learn/popular-tags/trans"><button type="button" class="btn btn-default <? if ($type == 'trans'){ ?>active<? } ?>">trans</button></a>   </div> </div> 

appreciate

instead of putting button in a href code can this:

<a href="https://stackoverflow.com" class="btn btn-default">click here</a> 

the link button instead.