CODEWITHSUNDEEP
reactjsreact-bootstrap
John Morris
John Morris

Reputation: 61

react-bootstrap <Button> not working properly

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.

Upvotes: 6

Views: 14293

Answers (10)

user204069
user204069

Reputation: 1081

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>

Upvotes: 0

Majid Aveiro
Majid Aveiro

Reputation: 1

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)

Upvotes: 0

ahmed alsaedi
ahmed alsaedi

Reputation: 11

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

Upvotes: 0

Bitan Debnath
Bitan Debnath

Reputation: 11

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'

Upvotes: 1

Nur Mohammad Rayhan
Nur Mohammad Rayhan

Reputation: 31

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

Upvotes: 0

Diego Benetti
Diego Benetti

Reputation: 107

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.

Upvotes: 0

Alfie
Alfie

Reputation: 163

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

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

Upvotes: 0

laxmi kamath
laxmi kamath

Reputation: 41

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

Upvotes: 4

Swift
Swift

Reputation: 820

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>

Upvotes: 5

Akshay Mulgavkar
Akshay Mulgavkar

Reputation: 1748

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.

Upvotes: 1

Related Questions