The Twitter Bootstrap CSS Framework is and will be for a lot of time one of the most awesome and known HTML, CSS and JavaScript frameworks that you can use as a boilerplate for creating web sites or web applications. The main features of the frameworks are base CSS and HTML for typography, icons, forms, buttons, tables, layout grids, and navigation, along with custom-built jquery-plugins and support for responsive layouts. If you are working in some React project and you want to make your life easier when designing the user interface using Bootstrap, we have good news for you. Today, it's possible to use the lates version of Bootstrap as React components. We are talking about Reactstrap. This library can help you to work in the React way while using the awesome, latest and easy to use Bootstrap 4 features.
Note
If you are looking for the Bootstrap 3 components in ReactJS, please check out this other article.
1. Install Reactstrap
The Reactstrap module implements all of the Bootstrap 4 components as React components, so they can be easily embedded into your application. It doesn't depend on jQuery, so your code will be kept so clean as possible. However, it relies on Tether (a dependency of Bootstrap) to produce efficient and nice tooltips. To install it, switch to the directory of your project with the terminal and install as first step Bootstrap 4 executing the following command:
npm install [email protected] --saveThen install the Reactstrap module that allows you to use bootstrap 4 as react components:
npm install --save reactstrap react-addons-transition-group react-addons-css-transition-group react react-domAfter the installation, you will be able to require any of the components that the original Bootstrap 4 library has to offer. For more information about this library, please visit the official repository at Github here. Don't forget to visit their official website as well.
2. Define your Bootstrap 4 Theme
You will need to include a stylesheet with the bootstrap 4 classes, so there are 2 options according to the way you work. If you are using webpack and you can configure to include CSS files importing it from JavaScript, then you can simply import the default bootstrap 4 stylesheets in your main JS file like:
// Import default Bootstrap 4 CSS
import 'bootstrap/dist/css/bootstrap.css';Otherwise if you want either to include a third party theme of Bootstrap 4 (like Bootswatch 4) then you can simply include it in your HTML document with a link tag:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Awesome React App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
Include some Bootstrap 4 CSS Theme e.g from the Bootswatch CDN
-->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/thomaspark/bootswatch/gh-pages/4-alpha/cerulean/bootstrap.min.css">
</head>
<body>
<div class="container">
<div id="app">Loading...</div>
</div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>3. Using Bootstrap Components in React
As a tipical approach in React, every Bootstrap 4 component can be imported from the library:
Layout
The widely known features of Bootstrap is its revolutionary layout grid system. Using the Grid system of Bootstrap will help you to create page layouts through a series of rows and columns that house your content. Tipically, every row of bootstrap is wrapped inside a container either normal or container-fluid. In the React version, this component is named Container as well and can be used in the following way:
import {Container} from 'reactstrap';
const ContainerComponent = (
<Container>
{/* Content here */}
</Container>
);
const ContainerFluid = (
<Container fluid={true}>
{/* Content here */}
</Container>
);As next comes the Row component that defines an horizontal div where you can place some columns:
import { Row } from 'reactstrap';
const MyRow = (
<Row>
{/* My Content */}
</Row>
);Finally the columns that you can use in group with the Container, Rows to create your awesome layout:
import React from 'react';
import { Container, Row, Col } from 'reactstrap';
export default class Example extends React.Component {
render() {
return (
<Container>
<Row>
<Col>.col</Col>
</Row>
<Row>
<Col>.col</Col>
<Col>.col</Col>
<Col>.col</Col>
<Col>.col</Col>
</Row>
<Row>
<Col xs="3">.col-3</Col>
<Col xs="auto">.col-auto - variable width content</Col>
<Col xs="3">.col-3</Col>
</Row>
<Row>
<Col xs="6">.col-6</Col>
<Col xs="6">.col-6</Col>
</Row>
<Row>
<Col xs="6" sm="4">.col-6 .col-sm-4</Col>
<Col xs="6" sm="4">.col-6 .col-sm-4</Col>
<Col sm="4">.col .col-sm-4</Col>
</Row>
<Row>
<Col sm={{ size: 6, push: 2, pull: 2, offset: 1 }}>.col .col-sm-6 .col-sm-push-2 .col-sm-pull-2 .col-sm-offset-2</Col>
</Row>
<Row>
<Col sm="12" md={{ size: 8, offset: 2 }}>.col .col-sm-12 .col-md-6 .col-md-offset-3</Col>
</Row>
<Row>
<Col sm={{ size: 'auto', offset: 1 }}>.col .col-sm .col-sm-offset-1</Col>
<Col sm={{ size: 'auto', offset: 1 }}>.col .col-sm .col-sm-offset-1</Col>
</Row>
</Container>
);
}
}Buttons
Bootstrap provides different styles of buttons that can be used easily in the same way with React. With plain bootstrap, you only needed to provide a class to define the style of the button, now in ReactJS you can set its type with the color property:
import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import { Button } from 'reactstrap';
export default class App extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
return (
<div>
<Button color="primary">primary</Button>{' '}
<Button color="secondary">secondary</Button>{' '}
<Button color="success">success</Button>{' '}
<Button color="info">info</Button>{' '}
<Button color="warning">warning</Button>{' '}
<Button color="danger">danger</Button>{' '}
<Button color="link">link</Button>
</div>
);
}
}
Modals
The following component creates a button that displays a modal when clicked. Once you click the close button, the dialog will be closed automatically:
import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
export default class App extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
return (
<div>
<Button color="danger" onClick={this.toggle}> Open Modal </Button>
<Modal isOpen={this.state.modal} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
As we didn't want to list all the components of bootstrap 4 but the most used, you will find all the components in the documentation on the official Reactstrap Website here.
Happy coding !
