Clients

Clients

Display partner and client logos in a responsive grid with the .clients-grid shortcode. Logos sit in a Bootstrap row-cols-* grid and fade until hovered, keeping the section clean. Bordered and dark variants are included.

Structure

• .clients-grid - the <ul> logo grid wrapper, combined with Bootstrap .row and .row-cols-* classes to set columns
• .col - each logo cell (a Bootstrap grid column)
• .clients-bordered - adds dividing borders between logo cells
• .clients-dark - inverts logos for dark backgrounds

Structure Markup

<ul class="clients-grid row row-cols-2 row-cols-sm-3 row-cols-md-6">
	<li class="col"><a href="#"><img src="images/clients/1.png" alt="Clients"></a></li>
	<li class="col"><a href="#"><img src="images/clients/2.png" alt="Clients"></a></li>
	<li class="col"><a href="#"><img src="images/clients/3.png" alt="Clients"></a></li>
	<li class="col"><a href="#"><img src="images/clients/4.png" alt="Clients"></a></li>
	<li class="col"><a href="#"><img src="images/clients/5.png" alt="Clients"></a></li>
	<li class="col"><a href="#"><img src="images/clients/6.png" alt="Clients"></a></li>
</ul>

Variants

Column count: change the Bootstrap .row-cols-* classes to set how many logos per row.

<!-- 5 columns on small and up -->
<ul class="clients-grid row row-cols-2 row-cols-sm-5">...</ul>

<!-- 4 columns on small and up -->
<ul class="clients-grid row row-cols-2 row-cols-sm-4">...</ul>

Bordered: add .clients-bordered (with .list-unstyled to reset list styles).

<ul class="clients-bordered row row-cols-2 row-cols-sm-3 row-cols-md-5 list-unstyled mb-0">
	<li class="col"><a href="#"><img src="images/clients/1.png" alt="Clients"></a></li>
</ul>

Dark: stack .clients-dark with .clients-grid on dark sections.

<ul class="clients-dark clients-grid row row-cols-2 row-cols-sm-3 row-cols-md-6 list-unstyled mb-0">
	<li class="col"><a href="#"><img src="images/clients/1.png" alt="Clients"></a></li>
</ul>

Tips

• Keep logo images the same height for a tidy grid; the grid handles horizontal spacing.
• Wrap each logo in an <a> so the whole cell is clickable.
• Combine breakpoints (row-cols-2 row-cols-sm-3 row-cols-md-6) so the grid reflows from 2 up to 6 columns as the screen widens.