react-bootstrap navbar not rendering correctly

Question

I'm trying to make a navbar using react-bootstrap, but when I render it I get this:

I'm not getting any error messages, and I can't find any documentation explaining what I've got, but clearly I'm doing something wrong. Any ideas?

This is the code I'm using:

import React from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap/lib/';

const Toolbar = () => {
  return (
    <Navbar staticTop collapseOnSelect>
      <Navbar.Header>
        <Navbar.Brand>
          <a href="test">Brandname Goes Here</a>
        </Navbar.Brand>
        <Navbar.Toggle />
      </Navbar.Header>
      <Navbar.Collapse>
        <Nav>
          <NavItem eventKey={1}>Contact Us</NavItem>
          <NavItem eventKey={2}>About Us</NavItem>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  )
}

export default Toolbar;

Looks like you haven't imported bootstrap.css in your project — Shubham Khatri, Nov 16 '17 at 06:36

score 1 · Accepted Answer · answered Nov 16 '17 at 06:43

go to react-bootsrap getting started tab

and copy the link under the  description into your index.html <head> tag, and if you installed react-bootstrap using npm, then you can import the navbar like so: import { Navbar, Nav, NavItem } from 'react-bootstrap';

score 1 · Answer 2 · edited Mar 12 '19 at 18:48

It is clear that you haven't imported bootstrap.min.css. Import it in your index.html as follows.

<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>

I cannot recommend to use something like import 'react-bootstrap/*/*.css' because I am not sure which framework and which loaders(eg: webpack) you are using.

react-bootstrap navbar not rendering correctly

2 Answers2