JSFiddle - React, Tailwind, and code Playground

HTML

<div id="twitterbootstrap">
            <div class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="navbar-inner">
                    <div class="container">
                            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
<a class="brand hidden-desktop" href="#">BrandHidden</a>
                        <div class="collapse navbar-collapse navHeaderCollapse">
                            <ul class="nav navbar-nav">
                                <li><a class="brand visible-desktop" href="#">BrandVisible</a></li>
                                <li class="active"><a href="#">Home</a></li>
                                <li><a href="#">Link 1</a></li>
                                <li><a href="#">Link 2</a></li>
                                <li><a href="#">Link 3</a></li>
                                <li><a href="#">Link 4</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

CSS

/* Centers the navbar */

#twitterbootstrap .navbar .nav,
#twitterbootstrap .navbar .nav > li
{
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}


#twitterbootstrap .navbar-inner {
    text-align:center;
}

.navbar .brand.hidden-desktop{
    float:none;
}

/* Hides .hidden-desktop on large screens */

.hidden-desktop {
     display: none !important;
    position:relative;
}

/* Shows .visible-desktop on large screens */
.visible-desktop {
     display: inherit !important;
}

/* Hides .visible-desktop on small screens */

@media (max-width: 979px){
    .nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a {
           padding: 9px 15px;
           font-weight: bold;
           color: #777777;
          -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
           border-radius: 3px;
           
     }
}

@media (max-width: 979px){
    .navbar .brand.visible-desktop {
           display: none !important;
     }
}

@media (min-width: 768px) {
    .navbar .brand.hidden-desktop {
         display:none !important ;  
    }
}

@media (max-width: 767px){
    .hidden-desktop {
           display: inherit !important;
           padding: 15px;
           margin: 0 0 0 -5px;
     }
}

/*!
 * Bootstrap v3.2.0 (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*!
 * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=c9cbe48d2c8a8af11f92)
 * Config saved to config.json and https://gist.github.com/c9cbe48d2c8a8af11f92
 */
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video...