title: Bootstrap 4 card not responsive, it just align it in 1 straight row
body: <p>Bootstrap 4 card not responsive, it just align it in one straight row. How do I make it responsive? as i resize the browser the cards doesn't rearrange it stay as one row in meteor with react. i want to make it in a way it rearrange and go to the next row as i resize my browser width.</p>
  
  <p><a href="https://i.stack.imgur.com/S3UU9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S3UU9.png" alt="enter image description here"></a></p>
  
  <pre><code>BrowseCourseCard = React.createClass ({
  
      propTypes: {
          courseId: React.PropTypes.string.isRequired,
          title: React.PropTypes.string.isRequired,
          shortDes: React.PropTypes.string.isRequired,
      },
  
      render() {
  
          const courseLink = "/browsecourses/" + this.props.courseId
  
          return(
              &lt;div className="card"&gt;
                  &lt;img className="card-img-top" src="img/storeImage.png" alt="Card image cap"/&gt;
                  &lt;div&gt;
                      &lt;h4 className="card-title"&gt;{this.props.title}&lt;/h4&gt;
                      &lt;p className="card-text"&gt;{this.props.shortDes}&lt;/p&gt;
                      &lt;a className="btn btn-primary" href={courseLink}&gt; More Details &amp;raquo; &lt;/a&gt;
                      &lt;p className="card-text"&gt;&lt;small className="text-muted"&gt; Downloaded 5003 times &lt;/small&gt;&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  })
  
  BrowseCourses = React.createClass({
  
      mixins: [ReactMeteorData],
  
      getMeteorData() {
          const sub = Meteor.subscribe('getAllCourses')
  
          return {
              ready: sub.ready(),
              allCourses: Col_AllCourses.find().fetch()
          }
      },
  
      render() {
  
          if (!this.data.ready) {
            return &lt;div&gt;Loading...&lt;/div&gt;
          }
  
          console.log(this.data.allCourses)
          let displayCourses = this.data.allCourses.map((data) =&gt; {
              return &lt;BrowseCourseCard key={data._id} courseId={data._id} title={data.title} shortDes={data.short_des}/&gt;
          })
  
          return (
              &lt;div className="container-fluid"&gt;
                  &lt;div className="card-deck-wrapper"&gt;
                      &lt;div className="card-deck"&gt;
                          {displayCourses}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  })
  </code></pre>