Adding custom css to React-Bootstrap Component

user_9544713 0
Viewed 1989

How to add some custom CSS styles to the Nav component to manage the padding between the nav items and make it float right of the page?

const navbar = props => (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
    <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
    <Navbar.Collapse id="responsive-navbar-nav">
      <Nav className="mr-auto">
        <Nav.Link href="#features">Home</Nav.Link>
        <Nav.Link href="#pricing">About Us</Nav.Link>
        <NavDropdown title="Facilities" id="collasible-nav-dropdown">
          <NavDropdown.Item href="#action/3.1">Library</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#action/3.2">Laboratories</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#action/3.3">Transportation</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#action/3.3">Hostel</NavDropdown.Item>
        </NavDropdown>
        <Nav.Link href="#pricing">Gallery</Nav.Link>
        <Nav.Link href="#pricing">Event</Nav.Link>
        <Nav.Link href="#pricing">Contact Us</Nav.Link>
      </Nav>
    </Navbar.Collapse>
  </Navbar>
);
react-bootstrap react-component bootstrap-4 reactjs css
1 Answers

you would need to override the default CSS of bootstrap, you could check the class names using the inspector of your browser and modify those classes since the react-bootstrap compiles to bootstrap anyways

create a css file called Navbar.css

 .navbar-nav {
  float: right !important;
}

.navbar-expand-lg .navbar-collapse {
  display: inline !important;
}

import it into navbar.js component

import "./Navbar.css";
    const navbar = props => (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
    <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
    <Navbar.Collapse id="responsive-navbar-nav">
      <Nav className="mr-auto">
        <Nav.Link href="#features">Home</Nav.Link>
        <Nav.Link href="#pricing">About Us</Nav.Link>
        <NavDropdown title="Facilities" id="collasible-nav-dropdown">
          <NavDropdown.Item href="#action/3.1">Library</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#action/3.2">Laboratories</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#action/3.3">Transportation</NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item href="#action/3.3">Hostel</NavDropdown.Item>
        </NavDropdown>
        <Nav.Link href="#pricing">Gallery</Nav.Link>
        <Nav.Link href="#pricing">Event</Nav.Link>
        <Nav.Link href="#pricing">Contact Us</Nav.Link>
      </Nav>
    </Navbar.Collapse>
  </Navbar>
);
user_98717560
Related