Bootstrap Client Logo Slider Example

Today, We want to share with you bootstrap client slider.In this post we will show you bootstrap client logo grid, hear for Adding an Infinite Client Logo Carousel to your Website we will give you demo and example for implement.In this post, we will learn about Bootstrap Multiple Image Slider with an example.

Bootstrap 4 clients brand logo carousel slider Example

here best example of the “Bootstrap client slider”.
Added External libs

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js

HTML

<div class="col-md-8 col-md-offset-2">
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Simple Bootstrap Client Slider - www.pakainfo.com</h3>
  </div>
<div class="panel-body">
    <div id="liveImgSlider" class="carousel slide" >       

      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <div class="col-md-12">
            <div class="col-md-4 profile">
              <a class="thumbnail" href="#"><img src="https://www.pakainfo.com/455x255" alt="">
                <h5>Dr Priyanka Vasoya</h5>
                <p>CEO</p>
              </a>
            </div>          
            <div class="col-md-4 profile">
              <a class="thumbnail" href="#"><img src="https://www.pakainfo.com/455x255" alt="">
                <h5>Dr Ravi Patel</h5>
                <p>Online Website Developer</p>
              </a> 
            </div>
            <div class="col-md-4 profile">
              <a class="thumbnail" href="#"><img src="https://www.pakainfo.com/455x255" alt="">
                <h5>Satyaban Rath</h5>
                <p>Online Website Developer</p>
              </a> 
            </div>        
          </div>
          <div class="col-md-12">
            <div class="col-md-4 profile">
              <a class="thumbnail" href="#"><img src="https://www.pakainfo.com/455x255" alt="">
                <h5>Pragyan Patodiya</h5>
                <p>Manager</p>
              </a>
            </div>          
            <div class="col-md-4 profile">
              <a class="thumbnail" href="#"><img src="https://www.pakainfo.com/455x255" alt="">
                <h5>Barsa Triguna Jeram</h5>
                <p>Web Designer</p>
              </a>
            </div>
            <div class="col-md-4 profile">
              <a class="thumbnail" href="#"><img src="https://www.pakainfo.com/455x255" alt="">
                <h5>Lalji Beera</h5>
                <p>Online Website Developer</p>
              </a>
            </div>        
          </div>
        </div>
        <div class="item">
          <div class="col-md-12">
            <div class="col-md-4 profile">
              <a class="thumbnail" href="#"><img src="https://www.pakainfo.com/455x255" alt="">
                <h5>Gudiya Ghelani Patodiya</h5>
                <p>Project lead</p>
              </a> 
            </div>          
            <div class="col-md-4 profile">
              <a class="thumbnail" href="#"><img src="https://www.pakainfo.com/455x255" alt="">
                <h5>Mena Patodiya</h5>
                <p>Online Website Developer</p>
              </a> 
            </div>
            <div class="col-md-4 profile">
              <a class="thumbnail" href="#"><img src="https://www.pakainfo.com/455x255" alt="">
                <h5>Divya Ramachandra</h5>
                <p>Online Website Developer</p>
              </a> 
            </div>        
          </div>
          <div class="col-md-12">
            <div class="col-md-4 profile">
              <a class="thumbnail" href="#"><img src="https://www.pakainfo.com/455x255" alt="">
                <h5>Sejal Ramani</h5>
                <p>Online Website Developer</p>
              </a> 
            </div>          
            <div class="col-md-4 profile">
              <a class="thumbnail" href="#"><img src="https://www.pakainfo.com/455x255" alt="">
                <h5>Bhavika</h5>
                <p>Sales manager</p>
              </a>
            </div>
            <div class="col-md-4 profile">
              <a class="thumbnail" href="#"><img src="https://www.pakainfo.com/455x255" alt="">
                <h5>Mayur</h5>
                <p>HR manager</p>
              </a>
            </div>        
          </div>
        </div>
      </div>

      <a class="left carousel-control" href="#liveImgSlider" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#liveImgSlider" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
       </div>
   </div>
</div> 

CSS

.carousel-control{width: 8%;}
.profile{text-align:center;}
.profile a{transition:all linear 0.35s;}
.profile a:hover{text-decoration:none;
-webkit-box-shadow: 14px 15px 9px -1px rgba(0,0,0,0.49);
-moz-box-shadow: 14px 15px 9px -1px rgba(0,0,0,0.49);
box-shadow: 14px 15px 9px -1px rgba(0,0,0,0.49);
}

I hope you get an idea about Client Logo Slider.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.