1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: How to create 4 columns carousel

Nates premium asked 6 years ago

Hi I copied and pasted your carousel code and comes with 3 columns, I changed the md-4 to md-3 but then it shows the columns one below each other. What am I doing wrong?

Piotr Glejzer staff answered 6 years ago

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

Nates premium commented 6 years ago

Thanks, sorry I have been so busy! I am going to use a normal grid rather as I saw it can do the off-screen horizontal thing that I wanted.

Piotr Glejzer staff commented 6 years ago

Hi, Do you have some trouble or do you need help with that? Is my solution work properly on your computer? Best, Piotr

Nates premium commented 6 years ago

No, I have not been coding for a while now once I do I can always log another ticket. this one can be closed for now. thanks again very much.

Nates premium answered 6 years ago 

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--> 

                    
                      

                    
                    
                    

                      
                      
                      
                        
                        

                          
                            
                          
                        

                      
                    

                    
                  

                  
                

                
              
            
            
              
            
          

          
          
          


            

  
  

    

      
FREE CONSULTATION

      
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

    

  

  





  

    

      
      
      
      
      
    

  

  
  

  




            
            

              
              
Status

              

              
              

                

                  

                    
                    Closed
                  

                  
                

                
              

            

            

            
            
            

              
              
Specification of the issue

              

              

                
    
                  
  • 
                    ForumUser:
                    
                      Premium
                    
                  
    • 
                  
  • 
                    Premium support:
                    
                      Yes
                    
                  
    • 
                  
  • 
                    Technology:
                    
                      MDB jQuery
                    
                  
    • 
                  
  • 
                    MDB Version:
                    
                      -
                    
                  
    • 
                  
  • 
                    Device:
                    
                      -
                    
                  
    • 
                  
  • 
                    Browser:
                    
                      -
                    
                  
    • 
                  
  • 
                    OS:
                    
                      -
                    
                  
    • 
                  
  • 
                    Provided sample code:
                    
                      No
                    
                  
    • 
                  
  • 
                    Provided link:
                    
                      No
                    
                  
    • 
                

              

              

              
              
                
                

                  
                  
Tags

                  

                  
                  

                    
                  

                

                
              

              
              
                
                

                  
                  
About author

                  

                  
                  

                    
                  

                  

                    
                    

                      
                        Nates
                      
                    

                    
                    
                    
                    Premium support
                    

                    
                    
                      356Support score
                    
                    

                    
                      17Questions
                    
                    
                      28Answers
                    

                    
                    
                      0Snippets