title: How can I automatically limit 4 images per row?
body: <p>Hi I am new to react and bootstrap coding... it's pretty cool stuff... but I think the bootstrap CSS is just a little confusing...</p>
  
  <p>I am trying to display only 4 images, on a row, for "n" number of images</p>
  
  <p><a href="https://i.stack.imgur.com/rCbUV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rCbUV.png" alt="enter image description here"></a></p>
  
  <p>This is a component that I would like to reuse to add images to any page.</p>
  
  <p>I can successfully add images, by clicking the 'choose file' button, but they stack vertically.</p>
  
  <p><a href="https://i.stack.imgur.com/qE4lb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qE4lb.png" alt="enter image description here"></a></p>
  
  <p>I have tried several different "col-md-x" formatting styles, but I just can't quite figure out how to wrap the images.</p>
  
  <p>Additionally, I would like to to stick with the bootstrap "column" / "row" formatting styles of "col-md-1", "col-md-2" (etc)</p>
  
  <p>I have these files that are involved with the component:</p>
  
  <p>FileDropZone.css</p>
  
  <pre><code>/* 
  this simply hides the "no file chosen" and file name of the input button
  */
  input[type='file'] {
  color: transparent;
  }
  </code></pre>
  
  <p>FileDropZone:</p>
  
  <pre><code>import './FileDropZone.css';
  
  import React, { Component } from 'react';
  import FileDropZoneFeed from './FileDropZoneFeed';
  
  class FileDropZone extends Component {
  constructor(props) {
      super(props);
      this.state = {
          files: null,
      }
  
      this.handleInputChange = this.handleInputChange.bind(this)
  }
  
  
  handleAddFile = (field, file) =&gt; {
  
      //console.log("handleAddFile");
  
      let temp = this.state[field] || [];
      temp.push(file);
      this.setState({[field]: temp});
  }
  
  
  handleInputChange(event){
  
      const input = event.target.files[0]
  
      if (!input) {
          // user has hit the cancel button
          return;
        }        
  
      let r = new FileReader();
      r.readAsDataURL(input);
      r.onload = (e) =&gt;{
  
       this.handleAddFile("files", e.target.result);
      } 
  }
  
  
  render() {
      let inputSelector = (
  
          // simple choose file button
          &lt;div&gt;
              &lt;input type="file" onChange={this.handleInputChange}/&gt;
          &lt;/div&gt;
      );
  
      let content = null;
      if(this.state.files !== null){
          content = (
              &lt;FileDropZoneFeed files={this.state.files} /&gt;
              ); }
  
      return (
          &lt;div className="container"&gt;
              {inputSelector}
  
              {content}
          &lt;/div&gt;
          );} 
  }
  export default FileDropZone;
  </code></pre>
  
  <p>FileDropZoneFeed:</p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import FileDropZoneItem from './FileDropZoneItem';
  
  class FileDropZoneFeed extends Component {
  render() {
  const { files } = this.props;
  
  return files.map((file, index) =&gt; (
    &lt;FileDropZoneItem key={index} id={index} file={file} /&gt;
  ));
    }
      }
  
  FileDropZoneFeed.propTypes = {
    files: PropTypes.array.isRequired,
  };
  
  export default FileDropZoneFeed;
  </code></pre>
  
  <p>FileDropZoneItem.js</p>
  
  <pre><code>import './FileDropZone.css';
  
  import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  
  class FileDropZoneItem extends Component {
  
  render() {
  const { id, file } = this.props;
  
  return (
    &lt;div&gt;
      &lt;div className="col-md-3"&gt;
        &lt;img src={file} width="200" height="200"/&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    ); } 
  }
  
  FileDropZoneItem.propTypes = {
  id: PropTypes.number.isRequired,
  file: PropTypes.string.isRequired
  };
  
  const mapStateToProps = state =&gt; ({ });
  
  export default connect(mapStateToProps)(FileDropZoneItem);
  </code></pre>
  
  <p>I expect 4 images (or less) to be placed on a row, and if there are more than 4 images, the next 4 will wrap down to the next row (and so on)</p>
  
  <p>What is happening now, is all the images stack vertically.</p>
  
  <p><strong>Update 1: 18 Jan 2019</strong></p>
  
  <p>Per patricks suggestion, remove this "<strong></strong>" from FileDropZoneItem render, so it just does this:</p>
  
  <pre><code>return (
    &lt;div&gt;
        &lt;img src={file} width="200" height="200"/&gt;
    &lt;/div&gt;
    ); } 
  }
  </code></pre>
  
  <p>This is what I now get:</p>
  
  <p><a href="https://i.stack.imgur.com/KL1bx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KL1bx.png" alt="enter image description here"></a></p>
  
  <p><strong>Update 2: 18 Jan 2019</strong></p>
  
  <p>trying the suggestion of using flex-container and flex-item and this is what I see when I inspect my app.  I have added two "images" (I took out the img object and replaced it with a square), but as you can see the squares are still stacking, but it looks like the flex-item is going all the way across the page?</p>
  
  <p><a href="https://i.stack.imgur.com/2COmB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2COmB.png" alt="enter image description here"></a></p>
  
  <p><strong>Update 3: 18 Jan 2019</strong></p>
  
  <p>I used stever's suggestion about going to CSS-tricks and just copied the code from one of their flex grid demos and ta-da... it worked.  I only had to change my div's to ul and ui elements</p>
  
  <pre><code>    &lt;ul className="flex-container wrap"&gt;
            {content}
      &lt;/ul&gt;
  
      &lt;ul className="flex-item "&gt;
        &lt;img src={file} width="200" height="200"/&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>here is the result, looks pretty good:</p>
  
  <p><a href="https://i.stack.imgur.com/na3G6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/na3G6.png" alt="enter image description here"></a></p>