<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="brands"> <div class="container"> <div id="carousel" class="carousel slide"> <h2 class="text-center">BRANDS</h2> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-lg-3 col-xs-6"><a href="#"><img src="http://via.placeholder.com/300" alt="" target="_blank"></a></div> <div class="col-lg-3 col-xs-6"><a href="#"><img src="http://via.placeholder.com/300" alt="" target="_blank"></a></div> <div class="col-lg-3 col-xs-6"><a href="#"><img src="http://via.placeholder.com/300" alt="" target="_blank"></a></div> <div class="col-lg-3 col-xs-6"><a href="#"><img src="http://via.placeholder.com/300" alt="" target="_blank"></a></div> </div> </div> <div class="item"> <div class="row"> <div class="col-lg-3 col-xs-6"><a href="#"><img src="http://via.placeholder.com/300" alt="" target="_blank"></a></div> <div class="col-lg-3 col-xs-6"><a href="#"><img src="http://via.placeholder.com/300" alt="" target="_blank"></a></div> <div class="col-lg-3 col-xs-6"><a href="#"><img src="http://via.placeholder.com/300" alt="" target="_blank"></a></div> <div class="col-lg-3 col-xs-6"><a href="#"><img src="http://via.placeholder.com/300" alt="" target="_blank"></a></div> </div> </div> <div class="item"> <div class="row"> <div class="col-lg-3 col-xs-6"><a href="#"><img src="http://via.placeholder.com/300" alt="" target="_blank"></a></div> <div class="col-lg-3 col-xs-6"><a href="#"><img src="http://via.placeholder.com/300" alt="" target="_blank"></a></div> <div class="col-lg-3 col-xs-6"><a href="#"><img src="http://via.placeholder.com/300" alt="" target="_blank"></a></div> <div class="col-lg-3 col-xs-6"><a href="#"><img src="http://via.placeholder.com/300" alt="" target="_blank"></a></div> </div> </div> </div> </div> </div> </section>

@import url('https://fonts.googleapis.com/css?family=Poppins'); h2 { font-weight: 600; font-family: 'Poppins', sans-serif; } .carousel-indicators { bottom: -50px; } .carousel-indicators li , .carousel-indicators .active { background: #6e6e6e; } img { width: 100%; }