Adding text over an image in Bootstrap carousel

Question

I have a carousel with an image that i would like to put text over, but it is not working. The text appears under the image instead of overlayed on top of it

<         


        

Answer 1

Here is a possible solution:

jsfiddle: http://jsfiddle.net/38v09vha/

            

                

                    
                    

                        

                            
What we Do
                        
                    
                
                

                    
                    

                        

                            
What we Do
                        
                    
                
                

                    
                    

                        

                            
What we Do
                        
                    
                
           

and css:

.carousel-caption {
    position: absolute;
    z-index: 1;
    display:table;
    width:100%;
    height:100%;
}

.absolute-div {
    position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
}

.carousel-caption h3 {
    display:table-cell;
    vertical-align: middle;
    text-align:center;
}

.item {
    position:relative;
}

Assuming that you want them vertically aligned in the middle of the image—Basically, you'll want to relatively position the slide-items parent div, which will inherit it's height from the combined height of the image and the text. Then, you'll want to create a div that houses the text which has the css attribute position: absolute. This element will be a direct child of the relatively positioned parent. This will allow you to absolutely position your text within the nearest relatively positioned element. See this CSS Tricks tutorial to understand how this works.

This will allow you to position the text over the image, I then went ahead and used table positioning to allow you to vertically center them, although you could go ahead and place them over the image wherever you like.