<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://static.pexels.com/photos/21787/pexels-photo.jpg" style="width:100%" class="img-responsive"> <div class="container"> <div class="caraous-title text-center"> <div class="col-md-12"> <span>Non-Profit Organization</span> <h1><span>RAISE</span> YOUR HELPING HAND</h1> <h3>We are non-profit NGO & Charity Organization</h3> <a class="btn btn-lg btn-primary site-btn" href="#">Learn More</a> <a class="btn btn-lg btn-primary site-btn2" href="#">Learn More</a> </div> </div> </div> </div> <div class="item"> <img src="https://images.pexels.com/photos/458917/pexels-photo-458917.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive"> <div class="container"> <div class="caraous-title text-center"> <div class="col-md-12"> <span>Non-Profit Organization</span> <h1><span>RAISE</span> YOUR HELPING HAND</h1> <h3>We are non-profit NGO & Charity Organization</h3> <a class="btn btn-lg btn-primary site-btn" href="#">Learn More</a> <a class="btn btn-lg btn-primary site-btn2" href="#">Learn More</a> </div> </div> </div> </div> <div class="item"> <img src="https://images.pexels.com/photos/130879/pexels-photo-130879.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" class="img-responsive"> <div class="container"> <div class="caraous-title text-center"> <div class="col-md-12"> <span>Non-Profit Organization</span> <h1><span>CLEAN</span> WATER CHANGES EVERYTHING</h1> <h3>We are non-profit NGO & Charity Organization</h3> <a class="btn btn-lg btn-primary site-btn" href="#">Learn More</a> <a class="btn btn-lg btn-primary site-btn2" href="#">Learn More</a> </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: 25px; right: auto; width: 96.66666666666666%; color: #000; } .caraous-title h1 {color:#FFF;font-size:45px; font-weight:600;} .caraous-title h3 {margin-bottom:30px;color:#fff;font-size:18px; letter-spacing:1px;} .caraous-title span {color:#aa1f43;} .caraous-img-box img {width:50%;} /* 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;} .site-btn2{padding:12px 25px 12px 25px;border-radius:2px;background:#05681e;border-color:transparent;font-size:14px;} .site-btn2:hover{background:rgb(128, 197, 71); ;border:transparent;}