DEV Community

loading...

Introduction to React-Bootstrap

NJOKU SAMSON EBERE
I love providing solutions to real world problems. When I am not coding, I enjoy movies, hanging out and working out.
・4 min read

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

  1. React-Bootstrap has been built and tailored to React applications. This means that it is more compatible and less buggy.

  2. 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>

Enter fullscreen mode Exit fullscreen mode
  • React-Bootstrap

<Container>
  <Row>
    <Col>One of three columns</Col>
    <Col>two of three columns</Col>
    <Col>three of three columns</Col>
  </Row>
</Container>

Enter fullscreen mode Exit fullscreen mode

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 as React Authentication

npx create-react-app react-auth

Enter fullscreen mode Exit fullscreen mode
  • Open the project in a terminal and navigate into the project folder. I will be using VS Code

cd react-auth

Enter fullscreen mode Exit fullscreen mode
  • Install React-Bootstrap

npm install react-bootstrap bootstrap

Enter fullscreen mode Exit fullscreen mode
  • Import bootstrap CSS file in the index.js file

import 'bootstrap/dist/css/bootstrap.min.css';

Enter fullscreen mode Exit fullscreen mode

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 fullscreen mode Exit fullscreen mode
  • 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>

Enter fullscreen mode Exit fullscreen mode
  • Now, we have to inform bootstrap that we want to use the Form and Button components. So we import them at the top like so:

import { Form, Button } from "react-bootstrap";

Enter fullscreen mode Exit fullscreen mode

You can also choose to do it individually like so:


import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'

Enter fullscreen mode Exit fullscreen mode
  • 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;

Enter fullscreen mode Exit fullscreen mode
  • 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>

Enter fullscreen mode Exit fullscreen mode

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. Our App.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;


Enter fullscreen mode Exit fullscreen mode
  • Run npm start in the terminal and see the output on the browser. This is mine

Alt Text

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:

Alt Text

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...

Discussion (0)