add text in bootstrap slider

Question

I want to add text in my bootstrap slider in the left side of the image i try diffrent css but that css not working here is my code for that bootstrap slider and that text are for particular slide if you find something wrong in code then try to correct them because i am just start the my journey in designing field.

   .slider {
    	z-index:1;
    	margin-top:200px;
    	position:relative; 
    }
    	
    .carousel-inner {
    	transform: skewy(-190deg);
    	height:500px;}
    	
    .carousel-inner img {
    	transform: skewy(13deg);
    	height: 1000px !important;
    	margin-top: -191px;}
    	
    .slider-2 {
    	position:absolute;
    	transform:rotate(-15deg);
    	z-index:-2;
    	width:970px;
    	top:115px;
    	height:650px !important;
    	background-color:#e2e2e2;
    	margin-left:30px;
    	transform: skewy(-190deg);}
    	
    .carousel-indicators {
      bottom:-90px;
      transform: rotate(-10deg );}
      
    .carousel-indicators li {
    	 border-color:#152b46;}
    	 
    .carousel-indicators .active {
    	background-color:#152b46;}
		

 <div class="container-fluid slider">
    <div class="container">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
    
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>    
      
        <div class="carousel-inner">
          <div class="item active">
            <img src="img/4.jpg" alt="Los Angeles" style="width:100%;">
            
                <div class="carousel-caption">
                <h3>What we Do</h3>
                </div>                
          </div>
    
          <div class="item">
            <img src="img/5.jpg" alt="Chicago" style="width:100%;">
           		
                <div class="carousel-caption">
                <h3>What we Do</h3>
                </div>
                
          </div>
        
          <div class="item">
            <img src="img/6.jpg" alt="New york" style="width:100%;">
            
            	<div class="carousel-caption">
                <h3>What we Do</h3>
                </div>
                
          </div>
        </div>
    </div>
    </div>
    </div>
    </div>
    
    <div class="container-fluid">
    <div class="container">
    <div class="row">
    
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 slider-2">      </div>
    
    <div class="clearfix"></div>
    </div>
    </div>
    </div>

Answer 1

Add below CSS

.carousel-caption {
    position: absolute;
     right: 0%; 
    bottom: 20px;
    left: 0%; 
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: left; 
}