<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<!--
####################################################
C A R O U S E L
####################################################
-->
<div id="carousel-2" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000">
<ol class="carousel-indicators">
<li data-target="#carousel-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-2" data-slide-to="1"></li>
<li data-target="#carousel-2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<a href="https://bootstrapcreative.com/">
<img src="https://dummyimage.com/1000x400/444/" alt="responsive image" class="d-block img-fluid">
<div class="carousel-caption">
<div>
<h2>Digital Craftsmanship</h2>
<p>We meticously build each site to get results</p>
<span class="btn btn-sm btn-outline-secondary">Learn More</span>
</div>
</div>
</a>
</div>
<!-- /.carousel-item -->
<div class="carousel-item">
<a href="https://bootstrapcreative.com/">
<img src="https://dummyimage.com/1000x400/444/" alt="responsive image" class="d-block img-fluid">
<div class="carousel-caption justify-content-center align-items-center">
<div>
<h2>Every project begins with a sketch</h2>
<p>We work as an extension of your business to explore solutions</p>
<span class="btn btn-sm btn-outline-secondary">Our Process</span>
</div>
</div>
</a>
</div>
<!-- /.carousel-item -->
<div class="carousel-item">
<a href="https://bootstrapcreative.com/">
<img src="https://dummyimage.com/1000x400/444/" alt="responsive image" class="d-block img-fluid">
<div class="carousel-caption justify-content-center align-items-center">
<div>
<h2>Performance Optimization</h2>
<p>We monitor and optimize your site's long-term performance</p>
<span class="btn btn-sm btn-secondary">Learn How</span>
</div>
</div>
</a>
</div>
<!-- /.carousel-item -->
</div>
<!-- /.carousel-inner -->
<a class="carousel-control-prev" href="#carousel-2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
/*
Removes white gap between slides
*/
.carousel {
background:#444;
}
/*
Forces image to be 100% width and not max width of 100%
*/
.carousel-item .img-fluid {
width:100%;
height:auto;
}
/*
anchors are inline so you need ot make them block to go full width
*/
.carousel-item a {
display: block;
width:100%;
}
