"Bootstrap icon Tabs"
Bootstrap 3.3.0 Snippet by grandteddy

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> <div class="container"> <div class="row"> <h2>Bootstrap icon Tabs</h2> <div class="row"> <div class="board"> <!-- <h2>Welcome to IGHALO!<sup>™</sup></h2>--> <div class="board-inner"> <ul class="nav nav-tabs" id="myTab"> <div class="liner"></div> <li class=""> <a href="#profile" data-toggle="tab" title="profile" aria-expanded="false"> <span class="round-tabs two"> <i class="fa fa-user"></i> </span> </a> </li> <li class=""> <a href="#picture" data-toggle="tab" title="picture" aria-expanded="false"> <span class="round-tabs two"> <i class="fa fa-picture"></i> </span> </a> </li> <li class="active"> <a href="#video" data-toggle="tab" title="video" aria-expanded="true"> <span class="round-tabs three"> <i class="fa fa-facetime-video"></i> </span> </a> </li> <li class=""> <a href="#Event" data-toggle="tab" title="Event" aria-expanded="false"> <span class="round-tabs four"> <i class="fa fa-calendar"></i> </span> </a> </li> <li class=""> <a href="#Club" data-toggle="tab" title="Club" aria-expanded="false"> <span class="round-tabs four"> <i class="fa fa-comment"></i> </span> </a> </li> <li class=""> <a href="#messages" data-toggle="tab" title="messages" aria-expanded="false"> <span class="round-tabs five"> <i class="fa fa-envelope"></i> </span> </a> </li> </ul> </div> <div class="tab-content"> <div class="tab-pane fade" id="profile"> User Profile </div> <div class="tab-pane fade" id="picture"> User Pictures </div> <div class="tab-pane fade active in" id="video"> User Video </div> <div class="tab-pane fade" id="Event"> User Events </div> <div class="tab-pane fade" id="Club"> User Club </div> <div class="tab-pane fade" id="messages"> User Messages </div> </div> </div> </div> </div> </div>

Related: See More


Questions / Comments: