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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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>