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

You could simply position the element absolutely just like built-in captions and set the top/bottom, left/right offsets.

Note that the carousel captions have z-index: 10 by default, so you may want to give the positioned element a higher z-index:

For instance:

.carousel-content {
  position: absolute;
  bottom: 10%;
  left: 5%;
  z-index: 20;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

  

    

    

    

  

  

    

      
      

        
TEST
      
      

        
What we do
      
    
    

      
      

        
What we Do
      
    
    

      
      

        
Who we Are