CODEWITHSUNDEEP
reactjsreact-bootstrap
Tienanh Nguyen
Tienanh Nguyen

Reputation: 211

how to import ReactBootstrap to React

I'm trying to set up to work with node, express and React. So it all work out when I just serve my html file with some React script using res.sendFile() but when I tried to import ReactBoostrap it start to call error 'require is not defined'. So I search google and find out I need to use something like webpack to fix it and I did. But now it just doesn't work like I import Button but it only show the plain button. So I just want to ask if someone could give me a guide on how to set up node, express with React and also how to import ReactBoostrap properly.

Upvotes: 0

Views: 792

Answers (1)

webdeb
webdeb

Reputation: 13211

You have to include bootstrap css to the page.

Taken from the react-bootstrap docs:

Stylesheets

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.
<!-- Latest compiled and minified CSS --> 

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

<!-- Optional theme --> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">

For more advanced use cases you can also use a bundler like Webpack or Browserify to include the css files for you as part of your build process but that is beyond the scope of this guide. Also see http://getbootstrap.com/customize/ for details about customizing stylesheets to match your component use.

So, just put this line into the <head>

 <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

Upvotes: 1

Related Questions