Skip to content

Instantly share code, notes, and snippets.

@Thomas-Smyth
Forked from eddywashere/App.js
Created January 14, 2018 11:56
Show Gist options
  • Save Thomas-Smyth/006fd507a7295f17a8473451938f9935 to your computer and use it in GitHub Desktop.
Save Thomas-Smyth/006fd507a7295f17a8473451938f9935 to your computer and use it in GitHub Desktop.
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;
@PeterC66
Copy link

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
Copy link

lukevp 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
Copy link

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

@kevinsheth
Copy link

kevinsheth 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
Copy link

its Working

@SoftwareEngineeringLLC
Copy link

Thanks! Great example.

@yuhcee
Copy link

yuhcee 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
Copy link
Author

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

@yuhcee
Copy link

yuhcee commented Jul 8, 2019

Alright, thanks.

@Barnabas-Chimaobi
Copy link

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

@abhusa
Copy link

abhusa commented Dec 24, 2019

Hi, I'm new to reactstrap. I am trying to implement the reactstrap navbar, but it just renders vertically, no matter what. I have added the import 'bootstrap/dist/css/bootstrap.min.css' to the src/index.js. I have copied pasted the code exactly as is from here as well as the reactstrap website, but i still just get a vertical column with no css. Just plain text. This is how it looks.

Capture

Anyone able to help me.

Thanx.
A.

@DeveloperNaeem41
Copy link

'../node-modules/'bootstrap/dist/css/bootstrap.min.css'

@KhalidSidow
Copy link

Hi, I'm new to reactstrap. I am trying to implement the reactstrap navbar, but it just renders vertically, no matter what. I have added the import 'bootstrap/dist/css/bootstrap.min.css' to the src/index.js. I have copied pasted the code exactly as is from here as well as the reactstrap website, but i still just get a vertical column with no css. Just plain text. This is how it looks.

Capture

Anyone able to help me.

Thanx.
A.

Just add this import 'bootstrap/dist/css/bootstrap.min.css'; in your index.js file, that’s all.

@row-star-134
Copy link

In react , we know use the className instead of class. but , In bootstrap site code has class so in react error will occure. so we need to change lot of thing in code. so we have option for use bootstrap in react js without change code. it has already changed code for react developer.
https://debuggingsolution.blogspot.com/2021/04/use-bootstrap-in-reactjs.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment