Introduction
Bootstrap has stolen the heart of many developers over the years. This is understandable because it helps developers write shorter and cleaner codes, it saves time and is sophisticated enough to handle a lot of developers concerns especially when it comes to those who do not like writing CSS.
We also have React which has become one of the most popular frontend framework. It has a very large community by it.
Well, there is more good news.
To ensure even easier and faster development with React, Bootstrap has gone ahead to develop a new code base called React-Bootstrap.
React-Bootstrap is still Bootstrap but it has been designed to fit in properly to React. This ensures that there is little or no bug while building your application.
Why Use React-Bootstrap instead of Bootstrap
React-Bootstrap has been built and tailored to React applications. This means that it is more compatible and less buggy.
React-Bootstrap codes are generally shorter than Bootstrap codes. For example, if you want to create a 3-grid column in one row, you will do it the following ways
- Bootstrap
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
two of three columns
</div>
<div class="col-sm">
three of three columns
</div>
</div>
</div>
- React-Bootstrap
<Container>
<Row>
<Col>One of three columns</Col>
<Col>two of three columns</Col>
<Col>three of three columns</Col>
</Row>
</Container>
How to Use React-Bootstrap
I want to walk you through the steps to create a simple form in React using React-Bootstrap.
Let's get to it!
Setting Up Our Project
- Create a React project and name it
react-auth
. There will be a continuation of this article asReact Authentication
npx create-react-app react-auth
- Open the project in a terminal and navigate into the project folder. I will be using VS Code
cd react-auth
- Install React-Bootstrap
npm install react-bootstrap bootstrap
- Import bootstrap CSS file in the
index.js
file
import 'bootstrap/dist/css/bootstrap.min.css';
Creating a form
Create a new file in the
src
folder. Name it:Register.js
In the file, start with the following code
import React from 'react'
export default function Register() {
return (
<>
</>
)
}
- Enter the following code in the
return
statement
<h2>Register</h2>
<Form>
{/* email */}
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
{/* password */}
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
{/* submit button */}
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
- Now, we have to inform bootstrap that we want to use the
Form
andButton
components. So we import them at the top like so:
import { Form, Button } from "react-bootstrap";
You can also choose to do it individually like so:
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'
- Now let's show our Register component on our page. First, replace the code in the
App.js
file with the following code
import { Container, Col, Row } from "react-bootstrap";
import "./App.css";
function App() {
return (
<Container>
<Row>
</Row>
</Container>
);
}
export default App;
- In the
Row
component, enter the following
<Col xs={12} sm={12} md={6} lg={6}></Col>
<Col xs={12} sm={12} md={6} lg={6}></Col>
This will ensure that there are two columns in large and medium devices while there will be one column on each row on small and extra small devices
- In the first column, Add the
Register
Component we created and import it at the top of the file. OurApp.js
file will look like this:
import { Container, Col, Row } from "react-bootstrap";
import Register from "./Register";
function App() {
return (
<Container>
<Row>
<Col xs={12} sm={12} md={6} lg={6}>
<Register />
</Col>
<Col xs={12} sm={12} md={6} lg={6}></Col>
</Row>
</Container>
);
}
export default App;
- Run
npm start
in the terminal and see the output on the browser. This is mine
You will notice that only one column is taken. Now your job is to create a LOGIN component with the same code as in the REGISTER component. The add it in the second column. Checkout my output below:
Checkout the codes here
Walah!!! You can now create React applications faster leveraging on React-Bootstrap.
Conclusion
We have so far seen the usefulness of React-Bootstrap over Bootstrap. We have also seen how to use it.
I urge you to take time and look into the documentation. There is a lot of hidden gems there. Only practice can help you dig out the awesome gems in React-Bootstrap.
We will be diving into an Authentication series for react soon. It will be a continuation of this article. Stick around.
Thank you for reading...
Top comments (0)