React-Bootstrap is a front-end framework that was designed keeping react in mind. Bootstrap was re-built and revamped for React, hence it is known as React-Bootstrap.
Badges are used for indication purposes like to show the notifications number, and we can also display messages using variants that come with this framework.
Badge props:
- pill: It is used to make the more rounded badges and adds some horizontal padding.
- variant: It is used to add different themes and visual styles for badges.
- variant: It is used for visual styling.
- bsPrefix: It is an escape hatch for working with strongly customized bootstrap css.
Creating React Application And Installing Module:
-
Step 1: Create a React application using the following command:
npx create-react-app foldername
-
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
-
Step 3: After creating the ReactJS application, Install the required modules using the following command:
npm install react-bootstrap bootstrap
-
Step 4: Add the below line in index.js file:
import 'bootstrap/dist/css/bootstrap.css';
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React from "react"; import Badge from "react-bootstrap/Badge"; import Button from "react-bootstrap/Button";   export default function BadgeExample() {   return (     <>       <div>         <h3>Notification Indication Badge with multiple variants</h3>         <Button variant="secondary">           Primary variant           <Badge variant="primary">             10           </Badge>         </Button>{" "}         <Button variant="secondary">           Secondary variant           <Badge variant="secondary">             10           </Badge>         </Button>{" "}         <Button variant="secondary">           Success variant           <Badge variant="success">             10           </Badge>         </Button>{" "}         <Button variant="secondary">           Danger variant           <Badge variant="danger">             10           </Badge>         </Button>{" "}         <Button variant="secondary">           Warning variant           <Badge variant="warning">             10           </Badge>         </Button>{" "}         <Button variant="secondary">           Light variant           <Badge variant="light">             10           </Badge>         </Button>{" "}       </div>       <br />         <div>         <h3>Pill Type Badge with multiple variants</h3>         <Badge pill variant="primary">           Primary pill variant         </Badge>{" "}         <Badge pill variant="secondary">           Secondary pill variant         </Badge>{" "}         <Badge pill variant="success">           Success pill variant         </Badge>{" "}         <Badge pill variant="danger">           Danger pill variant         </Badge>{" "}         <Badge pill variant="warning">           Warning pill variant         </Badge>{" "}         <Badge pill variant="info">           Info pill variant         </Badge>{" "}         <Badge pill variant="light">           Light pill variant         </Badge>{" "}         <Badge pill variant="dark">           Dark pill variant         </Badge>       </div>       <br />       <div>         <h3>Contextual Badge with multiple variants</h3>         <Badge variant="primary">           Primary variant</Badge>{" "}         <Badge variant="secondary">           Secondary variant</Badge>{" "}         <Badge variant="success">           Success variant</Badge>{" "}         <Badge variant="danger">           Danger variant</Badge>{" "}         <Badge variant="warning">           Warning variant</Badge>{" "}         <Badge variant="info">           Info variant</Badge>{" "}         <Badge variant="light">           Light variant</Badge>{" "}         <Badge variant="dark">           Dark variant </Badge>       </div>       <br />       <div>         <h3>Use of badges in normal text</h3>         <h5>           Heading           <Badge variant="primary">             primary badge variant !!!           </Badge>         </h5>         <h5>           Heading           <Badge variant="secondary">             secondary badge variant           </Badge>         </h5>         <h5>           Heading           <Badge variant="success">             success badge variant           </Badge>         </h5>         <h5>           Heading           <Badge variant="danger">             danger badge variant           </Badge>         </h5>         <h5>           Heading           <Badge variant="warning">             warning badge variant           </Badge>         </h5>         <h5>           Heading           <Badge variant="info">             info badge variant           </Badge>         </h5>         <h5>           Heading           <Badge variant="dark">             dark badge variant           </Badge>         </h5>       </div>     </>   ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output.
Reference: https://react-bootstrap.netlify.app/components/badge/#badges
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
