How to loop Bootstrap Client Carousel?

i have following code. i need to keep active 4 product item at a time like shown in the picture.Now its showing single item each time

 <div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                <?php  $isFirst=4; ?>
                <?php   $i=1; ?>
                    @foreach($data as $val)


                    <div class="item {{{ ($isFirst==$i) ? ' active' : '' }}}">

                        <div class="row">


                            <div class="col-sm-3">
                                <div class="col-item">
                                    <div class="photo">
                                        <img src="{{asset($val->avatar)}}" style="max-height:260px;min-height:260px;" class="img-responsive" alt="a" />
                                    </div>
                                    <div class="info">
                                        <div class="row">
                                            <div class="price col-md-6">
                                                <h5>
                                                    Sample Product</h5>
                                                <h5 class="price-text-color">
                                                    $199.99</h5>
                                            </div>
                                            <div class="rating hidden-sm col-md-6">
                                                <i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
                                                </i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
                                                </i><i class="fa fa-star"></i>
                                            </div>
                                        </div>
                                        <div class="separator clear-left">
                                            <p class="btn-add">
                                                <i class="fa fa-shopping-cart"></i><a href="http://ift.tt/1kH0iEY" class="hidden-sm">Add to cart</a></p>
                                            <p class="btn-details">
                                                <i class="fa fa-list"></i><a href="http://ift.tt/1kH0iEY" class="hidden-sm">More details</a></p>
                                        </div>
                                        <div class="clearfix">
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                     <?php $i++ ; ?>

                   @endforeach
                </div>



            </div>

Can any one tell how i can show active 4 product at a time.thank you

via Chebli Mohamed