title: How to fix problem with bootstrap 4 grid system?
body: <p>I am facing a problem with the Bootstrap-4 grid system. There are 12 columns, and whenever I use less than 12 columns, the rows are automatically centered. I want left alignment, how can this be fixed?</p>
  
  <p>A snippet of my code:</p>
  
  <pre><code>&lt;div class="row justify-content-start con-flex"&gt;
      &lt;?php foreach($books as $book):?&gt;
      &lt;div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"&gt;
          &lt;div id="single-book"&gt;
              &lt;div id="book-image"&gt;
                  &lt;?php print '&lt;img src = "'.strip_tags($book-&gt;book_image).'" alt = ""&gt;';?&gt;
                  &lt;div id="addto-cart"&gt;&lt;a href=""&gt;&lt;i class="fas fa-shopping-cart"&gt;&lt;/i&gt; Add to cart&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="book-text"&gt;
                  &lt;div id="book-name"&gt;&lt;?= substr(htmlentities($book-&gt;book_name),0,21) ?&gt;&lt;/div&gt;
                  &lt;div id="author"&gt;By &lt;i&gt;&lt;?= htmlentities($book-&gt;author) ?&gt;&lt;/i&gt;&lt;/div&gt;
                  &lt;div id="price"&gt;&lt;?= htmlentities($book-&gt;price) ?&gt;.TK&lt;/div&gt;
                  &lt;div id="book-details"&gt;
                      &lt;?php print '&lt;a href = "'.base_url().'users/book_view/'.$book-&gt;id.'"&gt;View details&lt;/a&gt;'; ?&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
      &lt;/div&gt;
      &lt;?php endforeach;?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>image of code:</p>
  
  <p><a href="https://i.stack.imgur.com/2pliA.png" rel="nofollow noreferrer">enter image description here</a></p>