Having problems with bootstrap carousel working with controls

Question

I am trying to implement a bootstrap carousel for testimonials but nothing seems to work. I have done exactly as the bootstrap website says, and nothing. I have tried using different versions of bootstrap and jquery with no result. I have retyped my code and tried stripping it down and I still can't find the issue. I know it's probably a simple fix but If anyone can help, it would be greatly appreciated.

HTML





  
  Source

  
  



  
  
  
  
  
 
  
  

  
  

  

  
 
 




  

    

    
    
      Source
      
    
      
          
              
                Contact
          
          
              Pricing
          
          
              Download
          
      
   
  



    

    
      
        Meet other talented musicians near you! 
        
        

      
      
    
    
      
    
  

  
  




  


  
    
     Easy to use
    With similar functionality to other social apps, you are already familiar with the type of interface we have.
    
    
     Network
    The #1 Network for musicians. You're guaranteed to find someone to make that perfect project come to life.
    
    
    
 
 
       Create
    Chat with your new friend, and start creating today!
    
  



  

  
    
      
        
          I honestly didn't even know such an app existed until I came across Source. It has been such a game-changer for my music production, and whether you are looking to find vocals for a track or another artist to collaborate with, the ability to find friends and make connections through music digitally and from my own home is awesome.
    
    Pebbles, New York
         
        
        
          My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.
    
    Beverly, Illinois
         
        
        
      
      
        
      
      
        
        
      
    

    

   

  


  

  
    
    
    
    

  


  

  

    A Plan for Every Artist's Needs
    Simple and affordable price plans for you.

    
      
    
      
        Basic
      
       
        Free
        100 Swipes Per Day
        10 Messages Per Day
        Unlimited App Usage
        
      
  


  
    
      Professional
    
     
      $2 / mo
      500 Swipes Per Day
      Unlimited Messages
      Unlimited App Usage
      
    





  
    Unlimited
  
   
    $5 / mo
    Pirority Listing
    Unlimited Swipes
    Unlimited Messages
    Unlimited App Usage
    Advertisement Free
    
  





   
    


    
    


   
    

  


  

  

    Discover What Your Music Is In Need Of Today.
    
    

  


  

  
    
    
    
    

    © Copyright Source

CSS

body{
    font-family: 'Montserrat';
    text-align: center;
}

.iphone{
    width: 60%;
    height: auto;
    position: relative;
    border-radius: 0 0 3% 3%;
    transform: rotate(25deg);
    margin-left: 20%;
    margin-top: 10%;
    z-index: 0;
}

#title{
    background-color: #ff4c68;
    text-align: left;
}
h1{
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;  
    line-height: 1.5;  
    font-weight: 900;
    color: white;
    
}
h2{
    font-family: "Montserrat";
    font-size: 3rem;
    line-height: 1.5;
    font-weight: 900;
}
.container-fluid{
    padding: 3% 15%;
}
/* Headings */
.big-heading{
    font-family: "Montserrat";
    font-size: 3rem;
    line-height: 1.5;
    font-weight: 900;
}



/* Navigation Bar */
.navbar{
    padding-bottom: 4.5rem;
}

.navbar-brand{
    font-family: "Ubuntu";
    font-size: 2.5rem;
    font-weight: bold;
    
}
.navbar-nav{
    float: right!important;

}
.nav-item{
    padding: 0 18px;
}

.nav-link{
    font-size: 1.2rem;
    font-family: 'Montserrat-light';
}
/* 
Download Buttons */

.downlaod-button{
    margin: 5% 3% 5% 0%;
}


h3{
    display: flex;
    flex-direction: column;
    font-family: 'Montserrat';
    font-size: 1.5rem;
    font-weight: 900;
}
p{
    color: #8f8f8f;
}

/* Features */

#features{
    padding: 7% 15%;
    background-color: white;
    position: relative;
    z-index: 1;

}

.feature-box{
   
    padding: 5%;
}

.icon{
    color: #ef8172;
    margin-bottom: 1rem;
}

.icon:hover{
    color: #ff4c68;
}


/* Testimonial */

#testimonials{
    
    background-color: #ef8172;
    color: #fff;
}

.testimonial-image{
    transform: rotate(0deg);
    width: 10%;
    border-radius: 100%;
    margin: 20px;
}

.carousel-item{
    padding: 7% 15%;
}

#press{
    background-color: #ef8172;
    padding-bottom: 3%;

}

.press-logo{
    width: 15%;
    margin: 20px 20px 50px;
}

 .card-deck{
    
    
}

.card{
    margin: 20px;
    
    
    
}  

#pricing{
    padding: 100px;
    
}

.pricing-column{
    padding: 3% 2%;
}

.btn-block{
    width: 95%;
}

#cta{
    background-color: #ff4c68;
    color: #fff;
    padding: 7% 15%;
    
}
.cta-heading{
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;  
    line-height: 1.5;  
    font-weight: 900;
    color: white;
}
button#bottom{
   
}
.social-icon{
   margin: 20px 10px;
    
}
/* Footer */

#footer{
    padding: 7% 15%;
    
}


@media (max-width: 1028px){
.iphone{
    position: static;
    transform: rotate(0deg);
}

#title{
    text-align: center;
}

}

Shavlego Botchorishvili · Answer

You are using Bootstrap 4 version in your Carousel code and in head you are importing Bootstrap 5 version. change your cdn to Bootstrap 4

In v5 carousel controls is presented as buttons, in v4 as links .

Having problems with bootstrap carousel working with controls

1 Answers