React Bootstrap Dropdown component doesn't receive any styling

Question

I already installed react-bootstrap with yarn yarn add react-bootstrap bootstrap.

I am using dropdown component but when I display it, it doesn't show like it's suppose to:

This is what I need

This is my code for that

import React from "react";
import { Dropdown } from "react-bootstrap";
// import PropTypes from "prop-types";
import "../Dropdown/index.css";

const DropdownItem = () => {
  return (
    <Dropdown>
      <Dropdown.Toggle variant="success" id="dropdown-basic">
        Dropdown Button
      </Dropdown.Toggle>

      <Dropdown.Menu>
        <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
}

export default DropdownItem;

I don't know why the dropdown is unstyled.

Did you import the core Bootstrap stylesheet to index.js? React Bootstrap depends on them. — Juan Marco
– Juan Marco, Commented Aug 19, 2020 at 13:58
Looks like you forgot to ad the loader to handle your css file in terms of using webpack? — tmhao2005
– tmhao2005, Commented Aug 20, 2020 at 5:34

Raja Rahul · Accepted Answer · 2020-08-19 14:03:26Z

2

That's because you might not have imported the CSS in your index.html file.

You need to add something like this in your projects public/index.html file

 <link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
  integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
  crossorigin="anonymous"
/>

OR

You can import the CSS in your App.js or index.js file like this

import 'bootstrap/dist/css/bootstrap.min.css';

You can check more about it in the react-bootstrap docs

answered Aug 19, 2020 at 14:03

Raja Rahul

711 silver badge3 bronze badges

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

Collectives™ on Stack Overflow

React Bootstrap Dropdown component doesn't receive any styling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related