6

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.

10 Answers 10

5

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>
Sign up to request clarification or add additional context in comments.

Comments

4

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

Comments

1

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.

Comments

1

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'

Comments

0

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

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

Comments

0

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.

Comments

0

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

Comments

0

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

Comments

0

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)

Comments

0

enter image description here

enter image description here

Look at these pictures, What happened when I resized the browser.

<Button variant="dark" onClick={appendToList} style={{width: '84%', height: '3%', display: "block", float:'left', marginLeft: '3%', marginBottom: '0.5%', marginTop: '0.5%'}}>LOG</Button>
            <Button variant="dark" onClick={clearPad} style={{width: '84%', height: '3%', display: "block", float:'left', marginLeft: '3%', marginBottom: '0.5%', marginTop: '0.0%'}}>Clear Text Pad</Button>
            <Button variant="dark" onClick={clearList} style={{width: '84%', height: '3%', display: "block", float:'left', marginLeft: '3%', marginBottom: '0.5%', marginTop: '0.0%'}}>Clear All Logs - (NOT Permanent Delete)</Button>
            <Button variant="dark" onClick={clearListPermanently} style={{width: '84%', height: '3%', display: "block", float:'left', marginLeft: '3%', marginBottom: '0.5%', marginTop: '0.0%'}}>Clear Storage (Permanent Delete)</Button>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.