React bootstrap rounded corners for Navbar

Question

I've recently started teaching myself a bit about React-Bootstrap and I'm trying to get the hang of customising certain elements.

I've built this Navbar below in standard JavaScript, HTML and CSS, and I'll like to replicate the rounded corners in bootstrap, and to have the links centered on each strip of the Navbar, but I'm really struggling to make this happen, and figuring out which element I should target, can anyone help please?

This is what I have so far for my React-bootstrap version:

Code for React-bootstrap that I have so far:

import React from "react";
import {
  Container,
  Row,
  Col,
  Navbar,
  Nav,
  NavDropdown,
  Image,
} from "react-bootstrap";
import { Link } from "@reach/router";
import styles from "../CSS/NavbarLinks.module.css";

function NavbarLinks(props) {
  return (
    <div style={{ backgroundColor: "#98c01f" }}>
      <Container>
        <Row className="nopadding">
          <Col className="no-gutters" xs={12} md={5}>
            <Navbar
              bg="light"
              variant="light"
              expand="lg"
              style={{ padding: "0px" }}
              className={styles.displayPadding}
            >
              <Navbar.Toggle aria-controls="basic-navbar-nav" />
              <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                  <Nav.Link as={Link} to="/about">
                    About
                  </Nav.Link>
                  <NavDropdown title="Guinea Pigs" id="basic-nav-dropdown">
                    <NavDropdown.Item as={Link} to="/boars">
                      Boars
                    </NavDropdown.Item>
                    <NavDropdown.Item as={Link} to="/sows">
                      Sows
                    </NavDropdown.Item>
                    <NavDropdown.Item as={Link} to="/GPCareTips">
                      Care Tips
                    </NavDropdown.Item>
                  </NavDropdown>
                  <NavDropdown title="Rabbits" id="basic-nav-dropdown">
                    <NavDropdown.Item as={Link} to="/bucks">
                      Bucks
                    </NavDropdown.Item>
                    <NavDropdown.Item as={Link} to="/does">
                      Does
                    </NavDropdown.Item>
                    <NavDropdown.Item href="#rabbitCareTips">
                      Care Tips
                    </NavDropdown.Item>
                  </NavDropdown>
                </Nav>
              </Navbar.Collapse>
            </Navbar>
          </Col>
          <Col className="no-gutters" xs={12} md={2}>
            <Link to="/">
              <center>
                <Image
                  src="/TamesideTextandLogo.png"
                  roundedCircle
                  className={styles.logo}
                />
              </center>
            </Link>
          </Col>
          <Col className="no-gutters" xs={12} md={5}>
            <Navbar
              bg="light"
              variant="light"
              expand="lg"
              style={{ padding: "0px" }}
              className={styles.displayPadding}
            >
              <Navbar.Toggle aria-controls="basic-navbar-nav" />
              <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                  <NavDropdown title="Services" id="basic-nav-dropdown">
                    <NavDropdown.Item as={Link} to="/grooming">
                      Grooming
                    </NavDropdown.Item>
                    <NavDropdown.Item as={Link} to="/boarding">
                      Boarding
                    </NavDropdown.Item>
                  </NavDropdown>
                  <NavDropdown title="Help Us" id="basic-nav-dropdown">
                    <NavDropdown.Item as={Link} to="/adoption">
                      Adoption
                    </NavDropdown.Item>
                    <NavDropdown.Item as={Link} to="/donations">
                      Donations
                    </NavDropdown.Item>
                    <NavDropdown.Item as={Link} to="/sponsor">
                      Sponsor
                    </NavDropdown.Item>
                  </NavDropdown>
                  <Nav.Link as={Link} to="/contactUs">
                    Contact
                  </Nav.Link>
                </Nav>
              </Navbar.Collapse>
            </Navbar>
          </Col>
        </Row>
      </Container>
    </div>
  );
}

export default NavbarLinks;

and the styling CSS module:

.logo {
  height: 150px;
  width: 150px;
  border-radius: 300px;
}

.displayPadding {
  margin-top: 60px;
}

@media only screen and (max-width: 768px) {
  .displayPadding {
    margin-top: 0px;
  }
}

How do I made the links centered on the react-bootstrap navbar, and how to I round the corners of the navbar like my first version, can anyone help please? Thank you.

Answer 1

Apply css class to your menu first menu add class uvs-left second menu class uvs-right and below css check below example

.uvs-left {border-radius: 30px 0 0 30px; padding-left: 40px;} .uvs-right {border-radius: 0 30px 30px 0; padding-right: 40px;}

 .uvs-left {border-radius: 30px 0 0 30px;
    padding-left: 40px;}
    
    
   .uvs-right {border-radius: 0 30px 30px 0;
    padding-right: 40px;}

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  
    
<div class="container">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark uvs-left">
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
  </ul>
  <!-- Navbar text-->
  <span class="navbar-text">
    Navbar text
  </span>
</nav><br/><br/><br/>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark uvs-right">
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
  </ul>
  <!-- Navbar text-->
  <span class="navbar-text">
    Navbar text
  </span>
</nav>
</div>