When attempting to set my carousel to col-xs-12, the columns do not align correctly within the slick carousel in Bootstrap.
If I change it to col-xs-6, it works fine but then two grids appear in one row. I require more space for my carousel. Could I be overlooking something?
<div class="col-md-12">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<h3 class="mb-10">User Type</h3>
<div class="slider responsive">
<div class="row">
<div class="col-md-12">
<div class="statusbox mb-0">
<h2>Independet Agent</h2>
<div class="statusbox-content">
<strong>497</strong>
<span>Updated 27/04/2015</span>
</div>
<!-- /.statusbox-content -->
<div class="statusbox-actions">
<a href="#"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-bar-chart"></i></a>
<a href="#"><i class="fa fa-share-alt"></i></a>
</div>
<!-- /.statusbox-actions -->
</div>
<!-- /.statusbox -->
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-md-12">
<div class="statusbox mb-0">
<h2>Company Agent</h2>
<div class="statusbox-content">
<strong>1.319</strong>
<span>Updated 27/04/2015</span>
</div>
<!-- /.statusbox-content -->
<div class="statusbox-actions">
<a href="#"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-bar-chart"></i></a>
<a href="#"><i class="fa fa-share-alt"></i></a>
</div>
<!-- /.statusbox-actions -->
</div>
<!-- /.statusbox -->
</div>
</div>
<!-- /.row -->
</div>
<!-- /.slider-->
</div>
<!-- /.col-* -->
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<h3 class="mb-10">User Membership</h3>
<div class="row">
<div class="col-md-12">
<div class="statusbox">
<h2>Balance</h2>
<div class="statusbox-content">
<strong>$25,000</strong>
<span>Updated 27/04/2015</span>
</div>
<!-- /.statusbox-content -->
<div class="statusbox-actions">
<a href="#"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-bar-chart"></i></a>
<a href="#"><i class="fa fa-share-alt"></i></a>
</div>
<!-- /.statusbox-actions -->
</div>
<!-- /.statusbox -->
</div>
</div>
<!-- /.row -->
</div>
<!-- /.col-* -->
</div>
<!-- /.row -->
</div>
This script is for slick:
<script>
$('.responsive').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
});