[twitter-bootstrap] How to show Bootstrap table with sort icon

Am new to Bootstrap, i have a requirement to show a table with sort up and down arrow near to title of the table. This is my table structure

<table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th><b>#</b>  <i class='icon-arrow-up'></i><i class='icon-arrow-down'></th> **// tried** 
            <th ><b>Name</b></th>
            <th><b>Email</b></th>
            <th><b>Team</b></th>
            <th ><b>Role</b></th>
            <th ><b>Timezone</b></th>
            <th><b>Connections</b></th>
            <th><b># Posts available</b></th>
            <th><b>Last Login</b></th>
            <th><b>Posts</b></th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

I want to display sort up/down arrows similar to the following image.

Please help me to solve this issue. Your help is much appreciated. Thank you.

BOOTSTRAP 4

you can use a combination of

• fa-chevron-down, fa-chevron-up

• fa-sort-down, fa-sort-up

<th class="text-center">
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-xs btn-link py-0 pl-0 pr-1">
             Some Text OR icon
        </button>
        <div class="btn-group-vertical">
            <a href="?sort=asc" class="btn btn-xs btn-link p-0">
                <i class="fas fa-sort-up"></i>
            </a>
            <a href="?sort=desc" class="btn btn-xs btn-link p-0">
                <i class="fas fa-sort-down"></i>
            </a>
        </div>
    </div>
</th>

Use this icons with bootstrap (glyphicon):

<span class="glyphicon glyphicon-triangle-bottom"></span>
<span class="glyphicon glyphicon-triangle-top"></span>

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_glyph_triangle-bottom&stacked=h

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_glyph_triangle-bottom&stacked=h