<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 ----------> <div class="container"> <div class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="row"> <div class="col-sm"><img class="d-block w-100" src="//placehold.it/1200x600/444" alt="1 slide"></div> <div class="col-sm"><img class="d-block w-100" src="//placehold.it/1200x600/ccff00" alt="2 slide"></div> <div class="col-sm"><img class="d-block w-100" src="//placehold.it/1200x600" alt="3 slide"></div> </div> </div> <div class="carousel-item"> <div class="row"> <div class="col-sm"><img class="d-block w-100" src="//placehold.it/1200x600/ccff00" alt="4 slide"></div> <div class="col-sm"><img class="d-block w-100" src="//placehold.it/1200x600/444" alt="5 slide"></div> <div class="col-sm"><img class="d-block w-100" src="//placehold.it/1200x600/ddd" alt="6 slide"></div> </div> </div> </div> </div> </div>