React.js rendering differences with Bootstrap 3

Question

I am using React.js with Bootstrap 3 and am seeing an odd rendering issue.

The basic issue is that if I display a form in straight HTML with bootstrap classes it looks correct. However if I return the same markup from within a React component, then the spacing is missing between the controls and they are all touching. The only difference between the two versions is that "class" is replaced by "className" in the JSX.

I put together a small sample to show the issue.

HTML

<div class="container">
    <h3>In Raw HTML</h3>
    <form class="form-inline" role="form">
        <div class="form-group">
            <label class="sr-only">Field 1</label>
            <input class="form-control" placeholder="Field 1" />
        </div>
        <div class="form-group">
            <label class="sr-only">Field 2</label>
            <input class="form-control" placeholder="Field 2" />
        </div>
        <button type="submit" class="btn btn-primary">Apply</button>
        <button type="button" class="btn">Reset</button>
    </form>   
    <h3>In React Component</h3>
    <div id="container"></div>
</div>

Javascript

/** @jsx React.DOM */

var App = React.createClass({
    render: function() {
        return (
        <form className="form-inline" role="form">
            <div className="form-group">
                <label className="sr-only">Field 1</label>
                <input className="form-control" placeholder="Field 1" />
            </div>
            <div className="form-group">
                <label className="sr-only">Field 2</label>
                <input className="form-control" placeholder="Field 2" />
            </div>
            <button type="submit" className="btn btn-primary">Apply</button>
            <button type="button" className="btn">Reset</button>
        </form>
        );
    }
});

I put this code in a JSFiddle which shows the issue:

http://jsfiddle.net/TerrapinM/p75TH/

Answer 1

I was just guessing that this is an effect of React removing all white space in the html you send to it. Seems I was right adding white space characters to your fiddle worked.

  //space

http://jsfiddle.net/p75TH/12/

You could also add an extra div with the class button-toolbar like so

<div className="btn-toolbar">
  <button type="submit" className="btn btn-primary">Apply</button>
  <button type="button" className="btn">Reset</button>
</div>

http://jsfiddle.net/p75TH/13/

More info can be found in the Bootstrap docs.

Answer 2

Try use {' '} between buttons

/** @jsx React.DOM */

var App = React.createClass({
    render: function() {
        return (
        <form className="form-inline" role="form">
            <div className="form-group">
                <label className="sr-only">Field 1</label>
                <input className="form-control" placeholder="Field 1" />
            </div>
            <div className="form-group">
                <label className="sr-only">Field 2</label>
                <input className="form-control" placeholder="Field 2" />
            </div>
            <button type="submit" className="btn btn-primary">Apply</button>
            {' '}
            <button type="button" className="btn">Reset</button>
        </form>
        );
    }
});

Answer 3

Just wrap the two buttons in react.js with a div with a className of btn-toolbar.

        <div className="btn-toolbar">
        <button type="submit" className="btn btn-primary">Apply</button>
        <button type="button" className="btn">Reset</button>
        </div>

Else you can just add a space between them to work if you don't want an extra bootstrap class.