title: React - Create grid using bootstrap
body: <p>I am trying to create a website and trying to create a grid. As I am not good with CSS I am using bootstrap. </p>
  
  <p>However I am not able to figure out how to create grid from an array of images I have such that it's reactive as well. </p>
  
  <pre><code>import Container from 'react-bootstrap/Container'
  import Row from 'react-bootstrap/Row'
  import Col from 'react-bootstrap/Col'
  
  import React, { Component } from 'react'
  
  
  export default class MoviesComponent extends Component {
      componentDidMount() {
          this.props.fetchShows()
      }
      render() {
          // console.log(this.props)
          let popular_movies = this.props.popular_movies
          // const items = popular_movies.length &gt; 0 ? popular_movies.map((item)=&gt; &lt;div key={item.id}&gt;item.title&lt;/div&gt;) : "tt"   
          return (
              popular_movies.length &gt; 0 ? 
              popular_movies.map((movie) =&gt; {
                  return &lt;Container className="container" key={movie.id}&gt; 
                              &lt;Row&gt;
                              &lt;Col&gt;&lt;img src= {"http://image.tmdb.org/t/p/w185"+movie.poster_path} alt={movie.title} /&gt;&lt;/Col&gt;
                              &lt;/Row&gt;
  
                   &lt;/Container&gt;
               })
               : &lt;div&gt;Loading...&lt;/div&gt;
  
          )
      }
  }
  </code></pre>