Bootstrap 4 is the most popular CSS framework for building responsive layouts with many new features such as the support for Flexbox and a new Card component.
Bootstrap 4 depends on both jQuery and Popper.js but using jQuery with React is not recommended since jQuery uses direct DOM manipulation.
If you need to add to add Bootstrap 4 styling to your React app the community has created some packages for making it possibly to use Bootstrap 4 without jQuery but still be able to use the complete features and components of BS 4.
In this tutorial we'll see how to use Reactstrap
So head back to your terminal and navigate inside your React project the run the following command to install bootstrap and reactstrap
npm install --save bootstrap reactstrap@next
We need to install bootstrap because reactstrap requires the Bootstrap 4 CSS files
Import Bootstrap CSS in the src/index.js file using:
import 'bootstrap/dist/css/bootstrap.css';
You can also use a <link> tag in your project index.html file.
You can then import individual Bootstrap 4 components and use them.
Open src/App.js then add the following example:
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" inverse toggleable>
<NavbarToggler right onClick={this.toggle} />
<NavbarBrand href="/">reactstrap</NavbarBrand>
<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;
If are unable to import the Bootstrap CSS file inside your React app you can check this StackOverflow solution
Top comments (0)