-
-
Save Thomas-Smyth/006fd507a7295f17a8473451938f9935 to your computer and use it in GitHub Desktop.
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; |
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.
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.
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
'../node-modules/'bootstrap/dist/css/bootstrap.min.css'