React with react-bootstrap-4

Question

I'm trying to get my hands on writing my first component using bootstrap 4.

import React,{Component} from 'react';
import {Button} from 'react-bootstrap-4';

class TextField extends Component {
constructor(props){
  super(props);
}

render() {
  return (
    <Button bsStyle="primary" bsSize="large">Default</Button>
    );
  }
}

export default TextField;

In my index.js I call it as follows:

import React, {Component} from 'react';
import ReactDOM from "react-dom";

import TextField from './components/custom/text_field';

class App extends Component{
  constructor(props){
    super(props);
  }

  render(){
    return (
      <div>
       Helo World1
       <br/>
       <TextField id="test" />
      </div>
  );
  }
  }

  ReactDOM.render(<App />, document.querySelector('.container'));

When I run the app I don't get any errors but the button is not looking like its suppose to

Am I missing something?

reactstrap.github.io is better than it.

Nishchit
– Nishchit

2017-06-22 03:50:40 +00:00
Commented Jun 22, 2017 at 3:50 — Nishchit
– Nishchit, Commented Jun 22, 2017 at 3:50

Jonny Buchanan · Accepted Answer · 2016-06-22 05:08:46Z

You're responsible for including Bootstrap's CSS yourself with react-bootstrap, which react-bootstrap-4 is a (temporary) fork of.

As per its Getting Started guide:

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.

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


<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.

You would need to do the equivalent for Bootstrap 4.

Richard · Accepted Answer · 2017-06-30 03:24:12Z

by including Bootstrap 4 via CDN as above you only get css and any JS dependent component will not work. I've been facing this problems with React on Meteor.js.

What I did was to npm install:

"bootstrap": "^4.0.0-alpha.6",
"tether": "^1.4.0"  // Tether is required by bootstrap.js

Import the css through the main js file:

import 'bootstrap/dist/css/bootstrap.css'

The only way I got full Bootstrap with JS was to grab a copy of bootstrap.js into my libs folder (any front end folder), modify it to import Tether at the top:

import tether from 'tether'

global.Tether = tether

For some reasons I couldn't find another way to resolve the Tether dependency.

Meteor does its own minification so I was not really bothered with the .min.js, however, you cannot import tether into a minified bootstrap.js.

Like many others I am waiting for a more "final" release of bootstrap 4 and possibly a simple npm i bootstrap --save procedure.

Collectives™ on Stack Overflow

React with react-bootstrap-4

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related