How to userounded-pill Class in ReactJS

Q: How to userounded-pill Class in ReactJS

In the Approach, we have used the “rounded-pill” class to create rounded corners for the navbar. This class is applied to the Navbar component within the className prop, and it is a part of Bootstrap’s utility classes. When applied, it rounds the corners of the navbar, giving it a sleek and modern appearance. The “rounded-pill” class is a great choice for creating a navigation bar with a subtle, pill-shaped edge, making it visually appealing and user-friendly.

Steps to create the project:

Approach 2: Using Style Prop

In the Approach, we have used the “rounded-pill” class to create rounded corners for the navbar. This class is applied to the Navbar component within the className prop, and it is a part of Bootstrap’s utility classes. When applied, it rounds the corners of the navbar, giving it a sleek and modern appearance. The “rounded-pill” class is a great choice for creating a navigation bar with a subtle, pill-shaped edge, making it visually appealing and user-friendly.

Example: Below is an example of the above-discussed approach.

Javascript

import React from 'react';
import {
    Navbar, Nav,
    Container, Image
} from 'react-bootstrap';
function App() {
    const geeksForGeeksLogo =
'https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png';
    return (
        <div>
            <center>
                <h1 style={{ color: 'green' }}>w3wiki</h1>
                <h5>
                    Approach 1: Using rounded-pill class
                </h5>
            </center>
            <Navbar bg="dark" variant="dark"
                className="rounded-pill m-1">
                <Container>
                    <Navbar.Brand href="#">
                        <Image src={geeksForGeeksLogo} width="30"
                            height="30" className="d-inline-block align-top"
                            alt="w3wiki Logo" />
                        w3wiki
                    </Navbar.Brand>
                    <Nav className="ml-auto">
                        <Nav.Link href="#">Articles</Nav.Link>
                        <Nav.Link href="#">Courses</Nav.Link>
                        <Nav.Link href="#">Tutorials</Nav.Link>
                        <Nav.Link href="#">Videos</Nav.Link>
                    </Nav>
                </Container>
            </Navbar>
        </div>
    );
}
export default App;

Output:

Output

How to make rounded corner for navbar using react-bootstrap?

In single-page applications, Navigation Bars are the most important components of web applications to provide national access to different sections and features of the applications. We can customize the navigation bar by adjusting the colors, width, and we can also make the rounded corners for the navbar using react-bootstrap. So this article will help us to learn to make rounded corners for the navbar using react-bootstrap.