<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="card col-md-6 mt-5 mb-5"> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="100000"> <div class="w-100 carousel-inner" role="listbox"> <div class="carousel-item active"> <div class="carousel-caption"> <div class="row"> <div class="col-sm-3"> <img src="http://via.placeholder.com/200x200" alt="" class="rounded-circle img-fluid"/> </div> <div class="col-sm-9"> <h3>Gives me hope</h3> <small>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</small> <small class="smallest mute">- Yayo Dudemous</small> </div> </div> </div> </div> <div class="carousel-item"> <div class="carousel-caption"> <div class="row"> <div class="col-sm-3"> <img src="http://via.placeholder.com/200x200" alt="" class="rounded-circle img-fluid"> </div> <div class="col-sm-9"> <h3>You will love it.</h3> <small>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</small> <small class="smallest mute">- Yayo Dudemous</small> </div> </div> </div> </div> <div class="carousel-item"> <div class="carousel-caption"> <div class="row"> <div class="col-sm-3"> <img src="http://via.placeholder.com/200x200" alt="" class="rounded-circle img-fluid"> </div> <div class="col-sm-9"> <h3>Velvet pouch!</h3> <small>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</small> <small class="smallest mute">- Yayo Dudemous</small> </div> </div> </div> </div> </div> <div class="float-right navi"> <a class="" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon ico" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon ico" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div>

.card { margin: 0 auto; } .card .carousel-item { height: 200px; } .card .carousel-caption { padding: 0; right: 0; left: 0; color: #3d3d3d; } .card .carousel-caption h3 { color: #3d3d3d; } .card .carousel-caption p { line-height: 30px; } .card .carousel-caption .col-sm-3 { display: flex; align-items: center; } .card .carousel-caption .col-sm-9 { text-align: left; } .navi a { text-decoration:none; } a > .ico { background-color: grey; padding: 10px; } a:hover > .ico { background-color: #666; }