How to create 4 columns carousel

Start your code here

<!--Carousel Wrapper--> <div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel"> <!--Controls--> <div class="controls-top"> <a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a> <a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a> </div> <!--/.Controls--> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#multi-item-example" data-slide-to="0" class="active"></li> <li data-target="#multi-item-example" data-slide-to="1"></li> <li data-target="#multi-item-example" data-slide-to="2"></li> </ol> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <!--First slide--> <div class="carousel-item active"> <div class="col-md-4"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> </div> <!--/.First slide--> <!--Second slide--> <div class="carousel-item"> <div class="col-md-4"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(47).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(48).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> </div> <!--/.Second slide--> <!--Third slide--> <div class="carousel-item"> <div class="col-md-4"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(53).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(45).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(51).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> </div> <!--/.Third slide--> </div> <!--/.Slides--> </div> <!--/.Carousel Wrapper-->

---

Hi,
I have something for you.
Add new 'card' and change that code in every line what you want to have more columns without 'offset-2'.
Add 'offset-2' (if you want to center cards) only to first column.
If you want have more center colums change to 'offset-3' for 5 cards and etc.

//First column in slide

<div class="carousel-item active">
<div class=col-md-2 d-md-inline-block offset-2">
<div class="card mb-2">
<img class="card-img-top" src="" alt="Card image cap">
<div class="card-body">
<h4 class="card-title"> Card title</h4>
<p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary"> Button</a>
</div>
</div>
</div>

//Rest columns.

<div class=col-md-2 clearfix d-none d-md-inline-block ">
<div class="card mb-2">
<img class="card-img-top" src="" alt="Card image cap">
<div class="card-body">
<h4 class="card-title"> Card title</h4>
<p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary"> Button</a>
</div>
</div>
</div>

Is that resolve your problem?
Best,
Piotr

---