React and Bootstrap columns are not working together - html

Question

I am just jumping into React, as my first project I wanted to convert a Bootstrap project into React and Bootstrap.
What I had was:
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-xs-12">
<div class="row">
<div class="btn heading_button col-xs-12" data-toggle="collapse" href="#collapseTwo">
<h4> Header </h4>
</div>
</div>
<div class="row">
<div id="collapseTwo">
<span>
Content
</span>
</div>
</div>
</div>
</div>
</div>
It was an expanding header that look like this:
My React version so far looks like
var Campaign_Setup = React.createClass({
render: function() {
// transferPropsTo() is smart enough to merge classes provided
// to this component.
return (
<div className="container-fluid">
<div className="row">
<div className="col-md-8 col-xs-12">
<div className="row">
<div className="btn heading_button col-xs-12" data-toggle="collapse" href="#collapseTwo">
<h4> Header</h4>
</div>
</div>
<div class="row">
<div id="collapseTwo">
<span> Content </span>
</div>
</div>
</div>
</div>
</div>
);
}
});
React.renderComponent(<Campaign_Setup />, document.getElementById('Campaign_Settings'));
But it turns out
The header is supposed to take up the whole width, but the React version is squeezing it, and the arrow icon, created in CSS with:
.heading_button:before {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: #999999; /* adjust as needed */
margin-top: 10px;
}
doesn't render. What is wrong with this?
It's worth noting that when looking in the inspector. The container, and rows fill the width, but the button/header does not.

Answer 1

You forgot to convert one class into className for Content.
There should be a warning in your console.