react-bootstrap <Button> not working properly

user_12951049 0
Viewed 7952

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

enter image description here

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

react-bootstrap reactjs
9 Answers

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>
user_124892790

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

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

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.

user_106795240

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

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

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.

user_71582770

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

user_100851040

After installation got to the INDEX.JS and place this code

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

this will allow you to use the components in your project

now this if you import { Button } from 'react-bootstrap'

call the component primary or warning in the variant you will get the style

user_172436450

I had the same problem, styles were not applied to the buttons, You should import them to your component:

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

If you have multiple components imported on different files, you may want to import the styles on your entry file (app.js by default)

user_181554950
Related