Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by Sergio Flores

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/2.0.0/ReactRouter.min.js"></script>
<div id="root"></div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

Babel + JSX

/* Latest compiled and minified JavaScript included as External Resource */
const { Component, PropTypes } =  React;
const { Router, hashHistory, Route, IndexRoute, Link } = ReactRouter;

class Navbar extends Component {
  render() {
    return (
      <nav className="navbar navbar-inverse">
      <div className="container-fluid">
        <div className="navbar-header">
        	<a className="navbar-brand" href="#">
          	{this.props.title}
        	</a>
        </div>
      	<ul className="nav navbar-nav">
      		<li><Link to="/">Home</Link></li>
      		<li><Link to="/list">List</Link></li>
      		<li><Link to="/auth/login">Login</Link></li>
      	</ul>
      </div>
	  </nav>
	);
  }
}

Navbar.propTypes = {
  title: PropTypes.string.isRequired,
};


class Sidebar extends Component {
  render() {
    return (
      <div className="col-xs-3 col-sm-3 col-md-3 col-lg-3">
        <div className="panel panel-primary">
        	<div className="panel-heading">Links</div>
          <div className="panel-body">
            <ul>
              <li>Link</li>
              <li>Link</li>
              <li>Link</li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

// Layouts
class MainLayout extends Component {
  render() {console.log(this.props);
    return (
      <div className="container-fluid">
        <Navbar
          title="APP"
        />
        <div className="row">
          <div className="col-xs-9 col-sm-9 col-md-9 col-lg-9">
            <div className="panel panel-default">
              <div className="panel-body">
                AAA{this.props.children}
              </div>
            </div>
          </div>
          <Sidebar />
        </div>
      </div>
    );
  }
}

MainLayout.propTypes = {
  //children: PropTypes.element,
};

MainLayout.path = '/';

class AuthLayout extends Component {
  render() {
    return (
      <div className="container-fluid">
        <div className="row">
          <div className="col-xs-12...