react-bootstrap navbar not rendering correctly [duplicate]

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
– Shubham Khatri, Commented Nov 16, 2017 at 6:36

Elias Ghali · Accepted Answer · 2017-11-16 06:43:04Z

1

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';

answered Nov 16, 2017 at 6:43

Elias Ghali

8631 gold badge13 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pavindu · Accepted Answer · 2019-03-12 18:48:53Z

1

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.

edited Mar 12, 2019 at 18:48

Pavindu

3,1338 gold badges54 silver badges91 bronze badges

answered Nov 16, 2017 at 6:45

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

Collectives™ on Stack Overflow

react-bootstrap navbar not rendering correctly [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related