JSFiddle - React, Tailwind, and code Playground

by Doeke Wartena

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<div class="container">


<nav class="navbar navbar-dark bg-inverse">
  
  <span class="">Menu</span>
  
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
    +
  </button>
  
  
  <div class="collapse navbar-toggleable-xs" id="collapsingNavbar">
    
    <ul class="nav navbar-nav os_menu">
      <li class="nav-item active">
        <a class="nav-link" href="#">Watch the Trailer<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Screening & Events</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Synopsis</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">The Protagonist</a>
      </li>
    </ul>
    
  </div>
</nav>

</div>

CSS

.os_menu li {
  display: inline;
}