Go directly to the code:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Nav_Bottom</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </ head > <!-- Introduce bootstrap's css package and js package in the head --> <body> <div class="main_nav_bottom"> <nav class="navbar navbar-default navbar-fixed-bottom"> <div class="container" align="center"> <style> .nav-tabs { text-align: center; height: 40px; line-height: 40px; } </style> <ul class="nav nav-tabs nav-tabs-justified"> <div class="row" align="center"> <div class="col-md-4 col-sm-4 col-xs-4" align="center"><li><a href="#">Bootstrap1</a></li></div> <div class="col-md-4 col-sm-4 col-xs-4" align="center"><li><a href="#">Bootstrap2</a></li></div> <div class="col-md-4 col-sm-4 col-xs-4" align="center"><li><a href="#">Bootstrap3</a></li></div> </div> </ul> </div> </nav> </div> </body> </html>
The final rendering is as follows:
