Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Reactstrap App.js Example for create-react-app
import React, { Component } from 'react';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
Container,
Row,
Col,
Jumbotron,
Button
} from 'reactstrap';
class App extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (
<div>
<Navbar color="inverse" light expand="md">
<NavbarBrand href="/">reactstrap</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
<Jumbotron>
<Container>
<Row>
<Col>
<h1>Welcome to React</h1>
<p>
<Button
tag="a"
color="success"
size="large"
href="http://reactstrap.github.io"
target="_blank"
>
View Reactstrap Docs
</Button>
</p>
</Col>
</Row>
</Container>
</Jumbotron>
</div>
);
}
}
export default App;
@hannangujar

This comment has been minimized.

Copy link

commented Jun 21, 2018

Working

@PeterC66

This comment has been minimized.

Copy link

commented Aug 30, 2018

This all worked for me in reactstrap 6.4.0 out of the box, except for the NavbarToggler, which is not showing at all. Using the React console I see it rendered as a 0 * 0 pixel button at top left.

Any clues as to how to solve this? I note there are issues with the NavbarToggler on Bootstrap v4 itself (eg Bootstrap 4 navbar toggler not showing
)., but could not see how to use the solution given there within the reactstrap context.

@lukevp

This comment has been minimized.

Copy link

commented Sep 18, 2018

@PeterC66 The navbar toggler is responsive, so it only shows when the page gets below a certain width. It seems to work fine for me in this example. Try narrowing the page and see if it shows the toggler.

@kingingcole

This comment has been minimized.

Copy link

commented Jan 21, 2019

How do I use col-md-6 or similar please?

@kevinsheth

This comment has been minimized.

Copy link

commented Jan 28, 2019

How do I use col-md-6 or similar please?

Col md="12"

You can check out the Reactstrap docs for more information.https://reactstrap.github.io/components/layout/

@whyyunuz

This comment has been minimized.

Copy link

commented Mar 17, 2019

its Working

@SoftwareEngineeringLLC

This comment has been minimized.

Copy link

commented May 6, 2019

Thanks! Great example.

@EgboUchenna

This comment has been minimized.

Copy link

commented Jul 7, 2019

How do i add custom styles to the react bootstrap styled components to be able to modify my own display?

@Thomas-Smyth

This comment has been minimized.

Copy link
Owner Author

commented Jul 7, 2019

<Navbar color="inverse" light expand="md" className="your-class-name"> ...

@EgboUchenna

This comment has been minimized.

Copy link

commented Jul 8, 2019

Alright, thanks.

@Barnabas-Chimaobi

This comment has been minimized.

Copy link

commented Aug 8, 2019

had this error while trying to use react bootsrap:

Error: ENOENT: no such file or directory, open '/home/barnabas/Desktop/my-chat-app/node_modules/chalk/node_modules/supports-color/browser.js

pls help me out

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.