grig Smarty - Multipurpose + Admin
WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

RECENTLY VISITED
CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

CLIENTS

  1. Home
  2. Shortcodes
  3. Clients

Clients : Non Bootstrap

Show Code 
<--
Available Grid Columns:
.grid-2
.grid-3
.grid-4
.grid-5
.grid-6
.grid-7
.grid-8
.grid-9
.grid-10

.grid-md-*  (desktop - force X no. of columns)
.grid-sm-*  (tablet - force X no. of column)
.grid-xs-*	(mobile - force X no. of column)


To remove fixed height, add to your custom css:
ul.grid>li {
  height: auto;
  line-height: 1;
}


More usage examples: 
pack-megashop-home-1.html
-->


<ul class="grid grid-4 grid-xs-3">
	<li class="p-20">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/1.jpg" alt="client" />
		</a>
	</li>
	<li class="p-20">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/2.jpg" alt="client" />
		</a>
	</li>
	<li class="p-20">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/3.jpg" alt="client" />
		</a>
	</li>
	<li class="p-20">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/4.jpg" alt="client" />
		</a>
	</li>
	<li class="p-20">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/5.jpg" alt="client" />
		</a>
	</li>
	<li class="p-20">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/6.jpg" alt="client" />
		</a>
	</li>

	<li class="p-20">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/7.jpg" alt="client" />
		</a>
	</li>
	<li class="p-20">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/8.jpg" alt="client" />
		</a>
	</li>
	<li class="p-20">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/1.jpg" alt="client" />
		</a>
	</li>
	<li class="p-20">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/2.jpg" alt="client" />
		</a>
	</li>
	<li class="p-20">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/3.jpg" alt="client" />
		</a>
	</li>
	<li class="p-20">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/4.jpg" alt="client" />
		</a>
	</li>
</ul>

Clients : Grid : 6 Columns

Show Code 
<ul class="row clients-dotted list-inline">
	<li class="col-md-2 col-sm-2 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/1.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-2 col-sm-2 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/2.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-2 col-sm-2 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/3.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-2 col-sm-2 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/4.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-2 col-sm-2 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/5.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-2 col-sm-2 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/6.jpg" alt="client" />
		</a>
	</li>

	<li class="col-md-2 col-sm-2 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/7.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-2 col-sm-2 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/8.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-2 col-sm-2 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/1.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-2 col-sm-2 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/2.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-2 col-sm-2 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/3.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-2 col-sm-2 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/4.jpg" alt="client" />
		</a>
	</li>
</ul>

Clients : Grid : 5 Columns

Show Code 
<ul class="row clients-dotted list-inline">
	<li class="col-md-5th col-sm-5th col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/1.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-5th col-sm-5th col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/2.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-5th col-sm-5th col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/3.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-5th col-sm-5th col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/4.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-5th col-sm-5th col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/5.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-5th col-sm-5th col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/6.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-5th col-sm-5th col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/7.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-5th col-sm-5th col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/8.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-5th col-sm-5th col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/1.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-5th col-sm-5th col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/2.jpg" alt="client" />
		</a>
	</li>
</ul>

Clients : Grid : 4 Columns

Show Code 
<ul class="row clients-dotted list-inline">
	<li class="col-md-3 col-sm-3 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/1.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-3 col-sm-3 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/2.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-3 col-sm-3 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/3.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-3 col-sm-3 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/4.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-3 col-sm-3 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/5.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-3 col-sm-3 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/6.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-3 col-sm-3 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/7.jpg" alt="client" />
		</a>
	</li>
	<li class="col-md-3 col-sm-3 col-xs-6">
		<a href="#">
			<img class="img-fluid" src="demo_files/images/brands/8.jpg" alt="client" />
		</a>
	</li>
</ul>

Carousel

Show Code 
<!-- 
	controlls-over		= navigation buttons over the image 
	buttons-autohide 	= navigation buttons visible on mouse hover only
	
	data-plugin-options:
		"singleItem": true
		"autoPlay": true
		"navigation": true
		"pagination": true
-->
<div class="text-center">
	<div class="owl-carousel m-0" data-plugin-options='{"singleItem": false, "autoPlay": true}'>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/1.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/2.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/3.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/4.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/5.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/6.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/7.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/8.jpg" alt="">
		</div>
	</div>
</div>

Carousel Fullwidth

Show Code 
<!-- 
	controlls-over		= navigation buttons over the image 
	buttons-autohide 	= navigation buttons visible on mouse hover only
	
	data-plugin-options:
		"singleItem": true
		"autoPlay": true
		"navigation": true
		"pagination": true
		"items":"8"
-->
<div class="text-center alternate">
	<div class="owl-carousel m-0" data-plugin-options='{"singleItem": false, "autoPlay": true, "items":"8"}'>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/1.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/2.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/3.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/4.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/5.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/6.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/7.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/8.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/3.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/4.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/5.jpg" alt="">
		</div>
		<div>
			<img class="img-fluid" src="demo_files/images/brands/6.jpg" alt="">
		</div>
	</div>
</div>