JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Stories</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Photos</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->

CSS

.navbar-nav {
    width: 100%;
    text-align: center;
  }
  
  .navbar-nav > li {
      float: none;
      display: inline-block;
    }

JavaScript

//jsfiddle.net/5ud8jkvf/9475/embed/