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.
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>
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';
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.
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'
I know its late to answer but someone may find this helpful. You can use the color attribute.
<Button color='primary'> Primary </Button>
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.
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
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
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)
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>
