Bootstrap carousel responsive for separate settings per breakpoint?

Question

I used bootstrap carousel to list some latest posts under some category. I used the follow codes:

<div id="carousel-example-generic-0" class="carousel slide"> 
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic-0" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic-0" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic-0" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner"> 
        <!-- Slide -->
        <div class="item active">
            <div class="row">
                <div class="col-sm-3"> <img src="http://placehold.it/260x180" alt=""/>
                    <div class="carousel-caption">This is a caption</div>
                </div>
                <div class="col-sm-3"> <img src="http://placehold.it/260x180" alt=""/>
                    <div class="carousel-caption">This is a caption</div>
                </div>
                <div class="col-sm-3"> <img src="http://placehold.it/260x180" alt=""/>
                    <div class="carousel-caption">This is a caption</div>
                </div>
                <div class="col-sm-3"> <img src="http://placehold.it/260x180" alt=""/>
                    <div class="carousel-caption">This is a caption</div>
                </div>
            </div>
        </div>
        <!-- Slide -->
        <div class="item">
            <div class="row">
                <div class="col-sm-3"> <img src="http://placehold.it/260x180" alt=""/>
                    <div class="carousel-caption">This is a caption</div>
                </div>
                <div class="col-sm-3"> <img src="http://placehold.it/260x180" alt=""/>
                    <div class="carousel-caption">This is a caption</div>
                </div>
                <div class="col-sm-3"> <img src="http://placehold.it/260x180" alt=""/>
                    <div class="carousel-caption">This is a caption</div>
                </div>
                <div class="col-sm-3"> <img src="http://placehold.it/260x180" alt=""/>
                    <div class="carousel-caption">This is a caption</div>
                </div>
            </div>
        </div>
    </div>
    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic-0" data-slide="prev"> 
    <span class="icon-prev"></span> </a> 
    <a class="right carousel-control" href="#carousel-example-generic-0" data-slide="next"> <span class="icon-next"></span> </a> 
</div>

The problem here is that in Small devices Tablets screen and above, the carousel shows 4 posts on one line, that is good. But in Extra small devices the carousel still shows 4 posts together but wrap into multiple lines. I tried to fiddle the inner item div class like 'col-lg-, col-sm-, col-md-, col-xs-' to make the wrapped items in one line. I made it, but it seemed not to be the best thing I though of. Because in very small screen, if I made the four posts arranged into one line, the content very be very little to read.

So, what I want to know is that if there is someway to make bootstrap responsive to viewpoint size break point, which is like in small screen just shown 2 items on one line?

Answer 1

After some research, I think bootstrap doesn't support carousel responsive to viewport breakpoint yet. So I found an alternative Slick, which has the following features:

1. Fully responsive.
2. Scales with its container.
3. Separate settings per breakpoint
4. ...