import React, { Component } from 'react';
import logo from './logo.svg';
import { Grid, Navbar, Jumbotron, Button, Row, Col} from 'react-bootstrap';
import './App.css';
import NotesContainer from './components/NotesContainer';

class App extends Component {
  render() {
    return (
      <div>
        <Navbar inverse fixedTop>
          <Grid>
            <Navbar.Header>
              <Navbar.Brand>
                <a href="/">React App</a>
              </Navbar.Brand>
              <Navbar.Toggle />
            </Navbar.Header>
          </Grid>
        </Navbar>
        <Jumbotron>
          <Grid>
            <h1>Welcome to React <img src={logo} className="App-logo" alt="logo" /></h1>
            <p>
              <Button
                bsStyle="success"
                bsSize="large"
                href="http://react-bootstrap.github.io/components.html"
                target="_blank">
                View React Bootstrap Docs
              </Button>
            </p>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
          </Grid>
        </Jumbotron>
        <Grid>
          <Row>
            <Col xs={12} md={12}>
              <NotesContainer />
            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

export default App;