grig
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.
<--
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-responsive" src="demo_files/images/brands/1.jpg" alt="client" />
</a>
</li>
<li class="p-20">
<a href="#">
<img class="img-responsive" src="demo_files/images/brands/2.jpg" alt="client" />
</a>
</li>
<li class="p-20">
<a href="#">
<img class="img-responsive" src="demo_files/images/brands/3.jpg" alt="client" />
</a>
</li>
<li class="p-20">
<a href="#">
<img class="img-responsive" src="demo_files/images/brands/4.jpg" alt="client" />
</a>
</li>
<li class="p-20">
<a href="#">
<img class="img-responsive" src="demo_files/images/brands/5.jpg" alt="client" />
</a>
</li>
<li class="p-20">
<a href="#">
<img class="img-responsive" src="demo_files/images/brands/6.jpg" alt="client" />
</a>
</li>
<li class="p-20">
<a href="#">
<img class="img-responsive" src="demo_files/images/brands/7.jpg" alt="client" />
</a>
</li>
<li class="p-20">
<a href="#">
<img class="img-responsive" src="demo_files/images/brands/8.jpg" alt="client" />
</a>
</li>
<li class="p-20">
<a href="#">
<img class="img-responsive" src="demo_files/images/brands/1.jpg" alt="client" />
</a>
</li>
<li class="p-20">
<a href="#">
<img class="img-responsive" src="demo_files/images/brands/2.jpg" alt="client" />
</a>
</li>
<li class="p-20">
<a href="#">
<img class="img-responsive" src="demo_files/images/brands/3.jpg" alt="client" />
</a>
</li>
<li class="p-20">
<a href="#">
<img class="img-responsive" src="demo_files/images/brands/4.jpg" alt="client" />
</a>
</li>
</ul>
<ul class="row clients-dotted list-inline"> <li class="col-md-2 col-sm-2 col-xs-6"> <a href="#"> <img class="img-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" src="demo_files/images/brands/4.jpg" alt="client" /> </a> </li> </ul>
<ul class="row clients-dotted list-inline"> <li class="col-md-5th col-sm-5th col-xs-6"> <a href="#"> <img class="img-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" src="demo_files/images/brands/2.jpg" alt="client" /> </a> </li> </ul>
<ul class="row clients-dotted list-inline"> <li class="col-md-3 col-sm-3 col-xs-6"> <a href="#"> <img class="img-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" 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-responsive" src="demo_files/images/brands/8.jpg" alt="client" /> </a> </li> </ul>
<!--
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 nomargin" data-plugin-options='{"singleItem": false, "autoPlay": true}'>
<div>
<img class="img-responsive" src="demo_files/images/brands/1.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/2.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/3.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/4.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/5.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/6.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/7.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/8.jpg" alt="">
</div>
</div>
</div>
<!--
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 nomargin" data-plugin-options='{"singleItem": false, "autoPlay": true, "items":"8"}'>
<div>
<img class="img-responsive" src="demo_files/images/brands/1.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/2.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/3.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/4.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/5.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/6.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/7.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/8.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/3.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/4.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/5.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="demo_files/images/brands/6.jpg" alt="">
</div>
</div>
</div>