Navigation bars allow movement between primary destinations in an app.
<!-- Place your own number of tabs -->
<div class="tab-container">
<a href="#" class="child">Tab one</a>
<a href="#" class="child">Tab two</a>
<a href="#" class="child">Tab three</a>
<a href="#" class="child">Tab four</a>
<a href="#" class="child">Tab five</a>
<a href="#" class="child">Tab six</a>
<a href="#" class="child">Tab seven</a>
<a href="#" class="child">Tab eight</a>
<a href="#" class="child">Tab nine</a>
<a href="#" class="child">Tab ten</a>
<a href="#" class="child">Tab eleven</a>
<a href="#" class="child">Tab twelve</a>
</div>
<!-- Place your own number of tabs -->
<div class="tab-container">
<a href="#" class="child"><i class="fa fa-car"></i> Tab one</a>
<a href="#" class="child"><i class="fa fa-apple"></i> Tab two</a>
<a href="#" class="child"><i class="fa fa-book"></i> Tab three</a>
<a href="#" class="child"><i class="fa fa-calendar"></i> Tab four</a>
<a href="#" class="child"><i class="fa fa-bath"></i> Tab five</a>
<a href="#" class="child"><i class="fa fa-bell"></i> Tab six</a>
<a href="#" class="child"><i class="fa fa-cart-plus"></i> Tab seven</a>
<a href="#" class="child"><i class="fa fa-coffee"></i> Tab eight</a>
<a href="#" class="child"><i class="fa fa-anchor"></i> Tab nine</a>
<a href="#" class="child"><i class="fa fa-compass"></i> Tab ten</a>
<a href="#" class="child"><i class="fa fa-bicycle"></i> Tab eleven</a>
<a href="#" class="child"><i class="fa fa-graduation-cap"></i> Tab twelve</a>
</div>
<!-- Place your own number of tabs -->
<div class="tab-container">
<a href="#" class="child top-icons"><i class="fa fa-car"></i> Tab one</a>
<a href="#" class="child top-icons"><i class="fa fa-apple"></i> Tab two</a>
<a href="#" class="child top-icons"><i class="fa fa-book"></i> Tab three</a>
<a href="#" class="child top-icons"><i class="fa fa-calendar"></i> Tab four</a>
<a href="#" class="child top-icons"><i class="fa fa-bath"></i> Tab five</a>
<a href="#" class="child top-icons"><i class="fa fa-bell"></i> Tab six</a>
<a href="#" class="child top-icons"><i class="fa fa-cart-plus"></i> Tab seven</a>
<a href="#" class="child top-icons"><i class="fa fa-coffee"></i> Tab eight</a>
<a href="#" class="child top-icons"><i class="fa fa-anchor"></i> Tab nine</a>
<a href="#" class="child top-icons"><i class="fa fa-compass"></i> Tab ten</a>
<a href="#" class="child top-icons"><i class="fa fa-bicycle"></i> Tab eleven</a>
<a href="#" class="child top-icons"><i class="fa fa-graduation-cap"></i> Tab twelve</a>
</div>
<div class="tab-container tab-align-container">
<a href="#" class="child">Tab one</a>
<a href="#" class="child">Tab two</a>
<a href="#" class="child">Tab three</a>
</div>
<div class="tab-container tab-align-container">
<a href="#" class="child"><i class="fa fa-car"></i> Tab one</a>
<a href="#" class="child"><i class="fa fa-apple"></i> Tab two</a>
<a href="#" class="child"><i class="fa fa-book"></i> Tab three</a>
</div>
<div class="tab-container tab-align-container">
<a href="#" class="child top-icons"><i class="fa fa-car"></i> Tab one</a>
<a href="#" class="child top-icons"><i class="fa fa-apple"></i> Tab two</a>
<a href="#" class="child top-icons"><i class="fa fa-book"></i> Tab three</a>
</div>