bsStyle of Bootstrap React doesn't work

6
votes

I have been working on boostrap react for 3 hours. I have tried to find questions and answers to my problem. bsStyle of Bootstrap React doesn't work at all, so i wonder it why? I have seen so many examples, and they just import like what i have done too.

import {Button} from 'react-bootstrap';

but i still get a simple button without any styles here my component

export class bsButton extends React.Component{
render () {
        return (
            <div>
                <Button bsStyle="primary">primary button</Button>
            </div>
        );
    }
}

what is wrong with my import or my component code? your help is appreciated :D

2
reactjsreact-bootstrap
Have you included the style sheets? react-bootstrap.github.io/getting-started.html - Will
Oh my god! I haven't read it and i never think i need to import raw bootstrap css file because i have it installed from npm. And i have material ui installed on my project too. Material ui doesn't have css so i just import its class name, then it will give me a nice style... but boostrap react... 😈 anyway thanks for your idea - Yiman Kaing
I have added an answer if you would mark it as correct :) - Will

2 Answers

9
votes

You need to make sure you have added the bootstrap CSS in the head of your page. Getting Started This can be easily forgotten when adding the library through NPM

6
votes

Include

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

in public/index.html

  <head>
  .
  .
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
  .
  .
  </head>

source: here