<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="myCarousel" class="carousel slide" data-interval="false"> <!-- Indicators --> <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="https://images.pexels.com/photos/66997/pexels-photo-66997.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" style="width:100%" class="img-responsive"> <div class="container"> <div class="caraous-title"> <div class="col-md-12"> <div class="col-md-4 caraous-img-box"> <img src="http://wpocean.com/tf/html/naima/assets/img/app/about-app.png"class="img-responsive"> </div> <div class="col-md-8"> <span>Non-Profit Organization</span> <h1>Small Effort <br> Make Big Change </h1> <h3>We are non-profit NGO & Charity Organization</h3> <a class="btn btn-lg btn-primary site-btn" href="#">Learn More</a> </div> </div> </div> </div> </div> <div class="item"> <img src="https://images.pexels.com/photos/760681/pexels-photo-760681.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive"> <div class="container"> <div class="caraous-title"> <div class="col-md-12"> <div class="col-md-4 caraous-img-box"> <img src="http://premiumlayers.net/demo/html/maxlaw/assets/images/slide-men.png"class="img-responsive"> </div> <div class="col-md-8"> <span>Non-Profit Organization</span> <h1>Small Effort <br> Make Big Change </h1> <h3>We are non-profit NGO & Charity Organization</h3> <a class="btn btn-lg btn-primary site-btn" href="#">Learn More</a> </div> </div> </div> </div> </div> <div class="item"> <img src="https://images.pexels.com/photos/763771/pexels-photo-763771.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive"> <div class="container"> <div class="caraous-title"> <div class="col-md-12"> <div class="col-md-6"> <span>Non-Profit Organization</span> <h1>Small Effort <br> Make Big Change </h1> <h3>We are non-profit NGO & Charity Organization</h3> <a class="btn btn-lg btn-primary site-btn" href="#">Learn More</a> </div> </div> </div> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </div>

.item img {width:100%; max-height:450px;display: block;} .caraous-title { position: absolute; top: 20%; left: 15.8%; right: 55.8%; width: 96.66666666666666%; color: #000; } .caraous-title h1 {color:#000;font-size:55px; font-weight:700;} .caraous-title h3 {margin-bottom:30px;color:#fff;font-size:24px;} .caraous-title span {color:#aa1f43;font-size:20px;} .caraous-img-box img {width:80%;} /* Button */ .site-btn{padding:12px 25px 12px 25px;border-radius:2px;background:#DF314D;border-color:transparent;font-size:14px;} .site-btn:hover{background:#C9223D ;border:transparent;}