<div class="container">
<ul class="nav nav-tabs nav-justified ">
  <li class="active"><a href="#tab_a" data-toggle="tab" ><i class="fa fa-home" aria-hidden="true"></i>
All</a></li>
  <li id="#tab_on"><a href="#tab_b" data-toggle="tab"><i class="fa fa-wifi" aria-hidden="true"></i>
Online</a></li>
  <li id="#tab_off"><a href="#tab_c" data-toggle="tab"><i class="fa fa-ban" aria-hidden="true"></i>
Offline</a></li>
</ul>
<div class="tab-content">
        <!--Tab Online and Offline-->
        <div class="tab-pane active" id="tab_a"></div>

        <div class="tab-pane" id="tab_b"></div>

        <div class="tab-pane" id="tab_c"></div>
</div><!-- tab content -->
</div><!-- end of container -->