react-bootstrap <Button> not working properly

Question

So recently I decided to try and use the react-bootstrap library to make my code look simpler but for some reason the tag isn't working correctly.

I have this code with all the imports in my index.js file and the stylesheet import in my index.html

<Button variant="primary">Hello</Button>

This is what i used to create the button

I just don't get why it won't use the variant, and when I remove the variant tag it looks the same.

Answer 1

By default btn btn-default class is added you need to override that class with className="btn-primary". This will fix your issue

   <Button variant="primary" className="btn-primary">Primary</Button>

Answer 2

Check If you have installed Bootstrap in your node-modules.

Install it if haven't: npm install bootstrap

Use the below import on the .js file where <Button> component is being used:

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

Answer 3

I just faced this issue. Look for where the element is imported from. It should be imported from

import { Button } from 'react-bootstrap'

instead of

import { Button } from 'react'