title: Bootstrap Card components not rendering in React
body: <p>I'm using bootstrap for styling my react app. This is working great most of the time. However for some reason I can't render Card components correctly. Other bootstrap components like Navbar and forms work great - it's just the card components that are mis-behaving.</p>
  
  <p>Other than renaming class to className, is anything else necessary for rendering cards? Complete code below. Any insight greatly appreciated!</p>
  
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom';
  import TrackerReact from 'meteor/ultimatejs:tracker-react';
  export default class CardCollectionWrapper extends TrackerReact(React.Component) {
  
  
      constructor() {
      super();
  
      this.state = {
      }
      }
  
      componentWillMount() {
      }
  
      componentWillUnmount() {
      }
  
      loadMore() {
      }
  
      sortBy(){
      }
  
      render() {
      return(
        &lt;div className="card-deck-wrapper"&gt;
        &lt;div className ="container"&gt;
          &lt;div className="card-deck"&gt;
            &lt;div className="card"&gt;
              &lt;img className="card-img-top" src="/images/wire240.jpeg" alt="Card image cap"/&gt;
              &lt;div className="card-block"&gt;
                &lt;h4 className="card-title"&gt;Card title&lt;/h4&gt;
                &lt;p className="card-text"&gt;This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
                &lt;p className="card-text"&gt;&lt;small className="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className="card"&gt;
              &lt;img className="card-img-top" src="/images/wireframe.png" alt="Card image cap"/&gt;
              &lt;div className="card-block"&gt;
                &lt;h4 className="card-title"&gt;Card title&lt;/h4&gt;
                &lt;p className="card-text"&gt;This card has supporting text below as a natural lead-in to additional content.&lt;/p&gt;
                &lt;p className="card-text"&gt;&lt;small className="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className="card"&gt;
              &lt;img className="card-img-top" src="/images/wireframe.png" alt="Card image cap"/&gt;
              &lt;div className="card-block"&gt;
                &lt;h4 className="card-title"&gt;Card title&lt;/h4&gt;
                &lt;p className="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.&lt;/p&gt;
                &lt;p className="card-text"&gt;&lt;small className="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      )}}
  </code></pre>