title: React bootstrap Navbar: How to right align a navbar item
body: <p>I'm trying to right align a navbar item (Contribute) within a <code>navbar.js</code> but I can't seem to figure it out.  The navbar is a React component and looks like the following,</p>
  
  <p><strong>navbar.js</strong> <a href="https://github.com/ipatch/crj-frontend/blob/master/src/components/common/navbar.js" rel="noreferrer">here</a></p>
  
  <pre><code>import React, {PropTypes} from 'react';
  import { Link, IndexLink } from 'react-router';
  import { browserHistory, Router, Route } from 'react-router'
  var ReactDOM = require('react-dom');
  
  // create classes
  var NavBar = React.createClass({
    render: function(){
      return(
        &lt;nav className="navbar navbar-inverse navbar-static-top"&gt;
          &lt;div className="container-fluid"&gt;
            &lt;div className="navbar-header"&gt;
              &lt;button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"&gt;
                &lt;span className="sr-only"&gt;Toggle navigation&lt;/span&gt;
                &lt;span className="icon-bar"&gt;&lt;/span&gt;
                &lt;span className="icon-bar"&gt;&lt;/span&gt;
                &lt;span className="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;NavBrand linkTo={this.props.brand.linkTo} text={this.props.brand.text} /&gt;
            &lt;/div&gt;
            &lt;div className="collapse navbar-collapse" id="navbar-collapse"&gt;
              &lt;NavMenu links={this.props.links} /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      );
    }
  });
  
  var NavBrand = React.createClass({
    render: function(){
      return (
        &lt;Link to={ this.props.linkTo }&gt;
          &lt;span className="navbar-brand"&gt;{this.props.text}&lt;/span&gt;
        &lt;/Link&gt;
      );
    }
  });
  
  var NavMenu = React.createClass({
    render: function(){
      var links = this.props.links.map(function(link){
        if(link.dropdown) {
          return (
            &lt;NavLinkDropdown key={link.text} links={link.links} text={link.text} active={link.active} /&gt;
          );
        }
        else {
          return (
            &lt;NavLink key={link.text} linkTo={link.linkTo} text={link.text} active={link.active} /&gt;
          );
        }
      });
      return (
        &lt;ul className="nav navbar-nav"&gt;
          {links}
        &lt;/ul&gt;
      );
    }
  });
  
  var NavLinkDropdown = React.createClass({
    render: function(){
      var active = false;
      var links = this.props.links.map(function(link){
        if(link.active){
          active = true;
        }
        return (
  
          &lt;NavLink key={link.text} linkTo={link.linkTo} text={link.text} active={link.active} /&gt;
  
        );
      });
      return (
        &lt;ul className="nav navbar-nav navbar-right"&gt;
        &lt;li className={"dropdown" + (active ? "active" : "")}&gt;
          &lt;a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;
            {this.props.text}
            &lt;span className="caret"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul className="dropdown-menu"&gt;
            {links}
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;/ul&gt;
  
      );
    }
  });
  
  var NavLink = React.createClass({
    render: function(){
      return(
        &lt;li className={(this.props.active ? "active" : "")}&gt;
          {/*&lt;a href={this.props.linkTo}&gt;{this.props.text}&lt;/a&gt;*/}
          &lt;Link to={ this.props.linkTo }&gt;
            &lt;span className="NavLink"&gt;{this.props.text}&lt;/span&gt;
          &lt;/Link&gt;
        &lt;/li&gt;
      );
    }
  });
  
  module.exports = NavBar;
  </code></pre>
  
  <p>Presently, my navbar looks like the following,</p>
  
  <p><a href="https://github.com/ipatch/crj-frontend/blob/master/src/components/common/navbar.js" rel="noreferrer"><img src="https://i.stack.imgur.com/pv0X8.png" alt="navbar"></a></p>