React-Boostrap

Ever used BOOTSTRAP? Bootstrap is a CSS framework that is used to build responsive designs faster and easier. You can check out my post on CSS frameworks here. But using bootstrap with react is not the same way as using bootstrap with HTML. In this post I will show you to use bootstrap with react.

1. Install react-bootstrap

React-Boostrap is different from bootstrap. It doesn't have all the features of the latest bootstrap. You can check the docs here. We will install react bootsrap with npm. Open your code editor. Open your terminal and create your react app

npx create-react-app your-project-name

Then install react-bootstrap

npm install react-bootstrap bootstrap

2. Importing the CSS

Since we will be using the bootstrap CSS. We have to import it. This can be added in the index.js or App.js file

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

3. Importing Components

Since we have imported how CSS, now let's import our component. It's better we import individual components than importing everything so that we won't add load to the website. We will be importing a button here. There are two ways to import a component in react-bootstrap

import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';

4. Using the components

After importing the component, now we will use it on how react app.

import React from 'react';
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
  return (
    <>
      <Button type='submit'>Submit</Button>
    </>
  );
};

You can also style your buttons

<Button variant="outline-primary">Primary</Button>

Check the docs for more

If you enjoy my posts, kindly follow me on twitter

Don't forget to share, leave a like and comment. Thanks.