How to create image icon navigation bar in bootstrap

Question

Is it possible to create navigation bar with image icon at page bottom by using twitter bootstrap, here is sample image of the icon bar,

Answer 1

Here is an example for you :

<div class="nav-bottom">
  <ul class="container nav nav-pills">
    <li class="col-xs-4 col-sm-2 active">
      <a href="#">
        <i class="glyphicon glyphicon-comment"></i><br>
        Message Board
      </a>
    </li>
    <li class="col-xs-4 col-sm-2">
      <a href="#">
        <i class="glyphicon glyphicon-home"></i><br>
        Rooms
      </a>
    </li>
    <li class="col-xs-4 col-sm-2">
      <a href="#">
        <i class="glyphicon glyphicon-shopping-cart"></i><br>
        Shopping List
      </a>
    </li>
    <li class="col-xs-4 col-sm-2">
      <a href="#">
        <i class="glyphicon glyphicon-wrench"></i><br>
        Home Helpers
      </a>
    </li>
    <li class="col-xs-4 col-sm-2">
      <a href="#">
        <i class="glyphicon glyphicon-cog"></i><br>
        Settings
      </a>
    </li>
    <li class="col-xs-4 col-sm-2">
      <a href="#">
        <i class="glyphicon glyphicon-user"></i><br>
        User
      </a>
    </li>
  </ul>
</div>

.nav-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: black;
    padding: 5px 0;
}
.nav-bottom li + li {
    margin-left: 0px;
}
.nav-bottom li a {
    text-align: center;
    background: black;
    color: #ecf0f1;
}
.nav-bottom li:hover a,
.nav-bottom li:focus a {
    background: #2980b9;
    color: #ecf0f1;
}
.nav-bottom li.active a {
    background: black;
    color: #3498db;
}

Bootply