<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>

<div class="template">

	<nav class="centered-pills">  
        <ul class="nav nav-pills nav-stacked">  
            <li><a href="http://www.freetimelearning.com/">HOME</a></li>
            <li><a href="http://www.freetimelearning.com/">ABOUT</a></li>
            <li class="dropdown active"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials
            <span class="caret"></span></a>
            <ul class="dropdown-menu">
            <li><a href="http://www.freetimelearning.com/">Submenu 1-1</a></li>  
            <li><a href="http://www.freetimelearning.com/">Submenu 1-2</a></li>  
            <li><a href="http://www.freetimelearning.com/">Submenu 1-3</a></li>  
            </ul>  
            </li>  
            <li><a href="http://www.freetimelearning.com/">SERVICES</a></li>  
            <li><a href="http://www.freetimelearning.com/">CONTACT</a></li>  
        </ul>  
    </nav>
    
</div>

.template{ width:780px; margin:50px auto 10px; position:relative;}
.centered-pills { 
  text-align: center; 
  background: #EAEAEA; 
  font-size: 18px; 
} 
.centered-pills ul.nav-pills { 
  display: inline-block; 
} 
.centered-pills li { 
  display: inline; 
} 

/**change stacked nav to horizontal on md-lg displays**/ 
@media (min-width: 768px) { 
  .nav-stacked > li { 
    display: inline-block;}
   
  .nav-stacked > li + li { 
    margin-top: 0; 
    margin-left: 2px;} 
}