Make Bootstrap's Carousel both center AND responsive?

Question

I want my carousel images to be at the center (horizontally), which is not by default. I follow the solution at this topic.

However, using this solution, when the ca

Answer 1

I assume you have different sized images. I tested this myself, and it works as you describe (always centered, images widths appropriately)

/*CSS*/
div.c-wrapper{
    width: 80%; /* for example */
    margin: auto;
}

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img{
width: 100%; /* use this, or not */
margin: auto;
}




  
  

    

    

    

  

  
  

    

      
      

        hello
      
    
        

      
      

        hello
      
    
    

      
      

        hello
      
    
  

  
  
    
  
  
    
  

This creates a "jump" due to variable heights... to solve that, try something like this: Select the tallest image of a list

Or use media-query to set your own fixed height.