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

Your <Button> looks more like variant="outline-primary" when you have just passed <Button variant="primary">Hello</Button> a normal primary. Maybe its a cache issue with the browser to render the button in correct format. I suggest you to try the same code on a incognito or private window. Also you must check browser compatibility for the Button Variant prop.

I have also seen that framing the Button tag inside <ButtonToolbar> gives it a different styling. You can try that too.

Answer 4

I know its late to answer but someone may find this helpful. You can use the color attribute.

<Button color='primary'> Primary </Button>

Answer 5

I know I'm a little late here, but it may still be useful. This different style may be caused by another css lib overwriting bootstrap instructions.

If possible, try loading bootstrap after other css's you have in your application.

Answer 6

After installing react-bootstrap using the Node package module then

The following line can be included in your src/index.js or App.js file

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

I also face this problem and include this line in my project index.js file and the problem solved

Answer 7

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'