Comment afficher la table Bootstrap avec l'icône de tri

je Suis nouveau sur Bootstrap, j'ai une exigence pour afficher un tableau avec tri en haut et en bas flèche à côté du titre de la table. C'est ma structure de la table

<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>

je veux afficher des flèches de tri Haut/Bas similaires à l'image suivante.

Merci de m'aider à résoudre ce problème. Votre aide est très appréciée. Remercier.