CODEWITHSUNDEEP
reactjsbootstrap-4react-bootstrap
Josh Douglas
Josh Douglas

Reputation: 43

React-bootstrap NavBar not getting correct styles

I am just beginning to learn about react-bootstrap and I am having an issue getting the NavBar component to render correctly. To begin with I copied the code for a basic navbar found on https://react-bootstrap.github.io/components/navbar/ yet all I get is the below.

As seen here: navbar-component

From what I can tell I have everything in place including the css in the head of index.html and using webpack with css-loader. Clearly I am missing something and need some help!

Navigation.js

import React from 'react';
import { NavLink } from 'react-router-dom';
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react- 
bootstrap';

    const Navigation = () => ( 
    <div>
    <Navbar>
      <Navbar.Header>
        <Navbar.Brand>
          <a href="#home">React-Bootstrap</a>
        </Navbar.Brand>
      </Navbar.Header>
      <Nav>
        <NavItem eventKey={1} href="#">
          Link
        </NavItem>
        <NavItem eventKey={2} href="#">
          Link
        </NavItem>
        <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
          <MenuItem eventKey={3.1}>Action</MenuItem>
          <MenuItem eventKey={3.2}>Another action</MenuItem>
          <MenuItem eventKey={3.3}>Something else here</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey={3.4}>Separated link</MenuItem>
        </NavDropdown>
      </Nav>
    </Navbar>
  </div>
);

export default Navigation;

webpack.config.js

const path = require('path');

console.log(path.join(__dirname, 'public'));

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    }, {
      test: /\.s?css$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    }]
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    historyApiFallback: true
  }
};

link in index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

my app has not been built using create-react-app, but from scratch from a course on udemy I have been going through, so perhaps there is something messing it up that I am not aware of?

Appreciate any help!

Upvotes: 4

Views: 7116

Answers (2)

Hokagoka
Hokagoka

Reputation: 139

I believe react-bootstrap currently works only with v3 .. Use this link instead .. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

If you want Bootstrap 4 try using reactstrap

Upvotes: 5

jstice4all
jstice4all

Reputation: 1948

react-bootstrap is meant to be used with Bootstrap 3.

In the introduction section there is a warning:

React-Bootstrap currently targets Bootstrap v3. To use React-Bootstrap, include the CSS for Bootstrap v3 instead of Bootstrap v4.

Upvotes: 3

Related Questions