Bootstrap Carousel image doesn't align properly

Question

Please take a look at the following image, we are using bootstrap carousel to rotate the images. However, when the window width is large, the image doesn\'t align with the b

Answer 1

I faced the same problem and solved it this way: It's possible to insert non-image content to Carousel, so we can use it. You should first insert div.inner-item (where you will make center alignment), and then insert image inside this div.

Here is my code (Ruby):

    
    

        

            <%= image_tag "couples/1.jpg" %>
        
 
        <% (2..55).each do |t|%>
            

                

                    <%= image_tag "couples/#{t}.jpg" %>
                
            
 
        <% end -%>
    
    
    ‹
    ›

And my css-code(.scss):

.inner-item {
    text-align: center;
    img {
        margin: 0 auto;
    }
}