title: how to make the created post four in a row and continue it on the next line?
body: <p><a href="https://i.stack.imgur.com/Ltn3N.jpg" rel="nofollow noreferrer">enter image description here</a>Title: CSS styling problem
  Question: how do I style four picture in a row? then the other picture will auto to next row
  Background information:<a href="https://i.stack.imgur.com/pcCP9.png" rel="nofollow noreferrer">enter image description here</a>
  <a href="https://i.stack.imgur.com/afxp0.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>Question: here is my product.html. It shows the product in HTML. It becomes weird, the picture likes a stair dropping down.</p>
  <pre><code>{% for product in product_images %}
      
              &lt;div class=&quot;container&quot; id=&quot;big&quot;&gt;
                  &lt;div class=&quot;row&quot;&gt;
                      &lt;div class=&quot;card&quot;  style=&quot;width: 18rem;&quot;&gt;
                          &lt;img src=&quot;{{url_for('static',filename='products/' + product.product_images)}}&quot;  class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
                          
                          &lt;div class=&quot;card-body&quot;&gt;
                          &lt;h5 class=&quot;card-title&quot;&gt;{{ product.product_name }}&lt;/h5&gt;
                          &lt;p class=&quot;card-text&quot;&gt;price:${{ product.price }}&lt;/p&gt;
              
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      
        {% endfor %}
      &lt;style&gt;
  .row {
  display: flex;
  width: 100% ;
  }    
  .card {
  width: 25%
  }
  &lt;/style&gt;
      
  </code></pre>
  <p>here is my create product.html. i use the form create the upload the product image for the program. I can create the product image, but the product image shows in one line, I want the product image have 4 images in one line, then the 5th product will go to next line auto.</p>
  <pre><code>{% extends &quot;base.html&quot; %}
  {% block body %}
  &lt;div class=&quot;content-section&quot;&gt;
      &lt;form method=&quot;POST&quot; enctype=&quot;multipart/form-data&quot;&gt;
          {{form.hidden_tag()}}
          &lt;fieldset class=&quot;form-group&quot;&gt;
              &lt;legend class=&quot;border-bottom mb-4&quot;&gt;{{ legend }}&lt;/legend&gt;
  
              &lt;div class=&quot;form-group&quot;&gt;
                  {{form.product_name.label(class=&quot;form-control-label&quot;)}}
                  {% if form.product_name.errors %}
                      {{form.product_name(class=&quot;form-control form-control-lg is-invalid&quot;)}}
                      &lt;div class=&quot;invalid-feedback&quot;&gt;
                          {%for error in form.product_name.errors %}
                          &lt;span&gt;{{ error }}&lt;/span&gt;
                          {% endfor %}
                      &lt;/div&gt;
                  {% else %}
                      {{form.product_name(class=&quot;form-control form-control-lg&quot;)}}
                  {% endif %}
              &lt;/div&gt;
  
  
              &lt;div class=&quot;form-group&quot;&gt;
                  {{form.product_price.label(class=&quot;form-control-label&quot;)}}
                  {% if form.product_price.errors %}
                      {{form.product_price(class=&quot;form-control form-control-lg is-invalid&quot;)}}
                      &lt;div class=&quot;invalid-feedback&quot;&gt;
                          {%for error in form.product_price.errors %}
                          &lt;span&gt;{{ error }}&lt;/span&gt;
                          {% endfor %}
                      &lt;/div&gt;
                  {% else %}
                      {{form.product_price(class=&quot;form-control form-control-lg&quot;)}}
                  {% endif %}
              &lt;/div&gt;
  
              &lt;div class=&quot;upload-file&quot;&gt;
                  {{form.product_image.label}}
                  &lt;input type=&quot;file&quot; accept=&quot;image/png, image/jpeg&quot; name=&quot;violin_product&quot; /&gt;
              &lt;/div&gt;
          &lt;/fieldset&gt; 
          &lt;div class=&quot;form-group&quot;&gt;
              {{form.submit(class=&quot;btn btn-outline-info&quot;)}}
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  {% endblock body %}
  </code></pre>
  <p>Here is my base.html code</p>
  <pre><code>&lt;main role=&quot;main&quot; class=&quot;container&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-md-12&quot;&gt;
            {% with messages = get_flashed_messages(with_categories=true) %}
              {% if messages %}
                {% for category, message in messages %}
                  &lt;div class=&quot;alert alert-{{ category }}&quot;&gt;
                    {{ message }}
                  &lt;/div&gt;
                {% endfor %}
              {% endif %}
            {% endwith %}
            {% block body %}{% endblock %}
          &lt;/div&gt;
         
        &lt;/div&gt;
      &lt;/main&gt;
  </code></pre>