How to useStyle Prop in ReactJS

Approach 1: Using rounded-pill Class

In this approach, we have used the “style” prop, the navbarStyle object is defined to include a border-radius property set to ’30px,’ which controls the rounding of the navbar’s corners. By applying this style object to the Navbar component using the style prop, you can easily customize the visual appearance of the navbar. In this case, a value of ’30px’ for borderRadius creates rounded corners.

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/uploads/20230816191453/gfglogo.png';
    const navbarStyle = {
        borderRadius: '30px',
        margin: "10px"
    };
    return (
        <div className="text-center">
            <h1 style={{ color: 'green' }}>w3wiki</h1>
            <h5>Approach 2: Using Style Prop</h5>
            <Navbar bg="dark" variant="dark" style={navbarStyle}>
                <Container>
                    <Navbar.Brand href="#">
                        <Image src={geeksForGeeksLogo} width="40"
                            height="40" className="d-inline-block align-top"
                            alt="w3wiki Logo" />
                        w3wiki
                    </Navbar.Brand>
                    <Nav className="ml-auto">
                        <Nav.Link href="#">Programming</Nav.Link>
                        <Nav.Link href="#">Articles</Nav.Link>
                        <Nav.Link href="#">Courses</Nav.Link>
                        <Nav.Link href="#">Tutorials</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.