Take a look at this image https://i.sstatic.net/NUwDQ.png
I utilized Bootstrap to align the divs and created only one div. The contents within this div are added dynamically from the admin side, then looped through. It's functioning properly.
However, you'll notice that only 6 contents are available here. So, 2 divs are aligned to the left. I wish for these divs to be centered on the page. If there are 7 or 5 contents, the second row of contents should also be in the center. How can I align these divs in the middle? Please assist me in solving this issue.
Below is my code:
<div class="col-sm-6 col-md-3">
<div class="service-item hvr-grow wow fadeIn" data-wow-duration="500" data-wow-delay="100ms">
<img src="{{ 'assets/img/icon-services.png' |theme }} ">
<h4>{{ service['name'] }}</h4>
<p>{{ str_limit(service['description'], 100) }}</p>
<a href="{{ url('services') }}/{{ service['slug'] }}" class="read-more">Read More</a>
</div>
</div>Thank you in advance.