Unable to use Bootstrap classes in Reactstrap Navbar component

Viewed 2423

I am using the Reactstrap implementation of Bootstrap 4 on a Node application and trying to render a navbar component using the following JSX:

return (
    <Navbar color="inverse" inverse toggleable={`md`} fixed={`top`} className="h-50">
      <NavbarToggler right onClick={this.toggle} />
      <NavbarBrand href="/">reactstrap</NavbarBrand>
      <Collapse isOpen={this.state.isOpen} navbar>
        <Nav className="ml-auto" navbar>
          <NavItem>
            <NavLink href="/components/">Components</NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
          </NavItem>
        </Nav>
      </Collapse>
    </Navbar>
);

But when the component renders, it skips the class I added (h-50) entirely:

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">...</nav>

The Reactstrap documentation gives a list of props one can use for most of the regular ones such as navbar-inverse, navbar-faded, etc. but none for custom classes like the one I have. Any suggestions?

1 Answers
Related