"Carousel Bootstrap 4"
Bootstrap 4.1.1 Snippet by saikrishna99666

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Image Slider With Animated Caption</title> <meta charset="utf-8"> <meta name="description" content="Free Bootstrap 4 Carousel"> <meta name="keywords" content="Bootstrap 4 Free Carousel, Free Slider, Bootstrap 4 Slider for freee, Free Bootstrap 4 Slider, Free HTML Slider"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 4 Default CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <!-- Font Awesome CSS --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <!-- Additional CSS --> <link rel="stylesheet" href="css/main.css"> <!-- Animate CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head> <body> <div class=""> <div class="row"> <!-- End of Col-md-12 --> <div id="carouselExample" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExample" data-slide-to="0" class="active"> <img class="d-block w-100" src="https://fakeimg.pl/800x400/?retina=1&text=Slider 1&font=noto" alt="First slide"> </li> <li data-target="#carouselExample" data-slide-to="1"> <img class="d-block w-100" src="https://fakeimg.pl/800x400/?retina=1&text=Slider 2&font=noto" alt="Second slide"> </li> <li data-target="#carouselExample" data-slide-to="2"> <img class="d-block w-100" src="https://fakeimg.pl/800x400/?retina=1&text=Slider 3&font=noto" alt="Third slide"> </li> </ol> <!-- Carousel Indicators --> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://fakeimg.pl/800x400/?retina=1&text=Slider 1&font=noto" alt="First slide"> <div class="carousel-caption"> <h5>First slide label</h5> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </div> </div> <!-- Carousel Item 1 --> <div class="carousel-item"> <img class="d-block w-100" src="https://fakeimg.pl/800x400/?retina=1&text=Slider 2&font=noto" alt="Second slide"> <div class="carousel-caption"> <h5>Second slide label</h5> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </div> </div> <!-- Carousel Item 2 --> <div class="carousel-item"> <img class="d-block w-100" src="https://fakeimg.pl/800x400/?retina=1&text=Slider 3&font=noto" alt="Third slide"> <div class="carousel-caption"> <h5>Third slide label</h5> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </div> </div> <!-- Carousel Item 3 --> </div> <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <!-- Carousel Control Prev --> <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <!-- Carousel Control Next --> </div> </div> <!-- End of Row --> </div> <!-- End of Container --> <!-- JQuery Plugin --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Bootstrap JQuery Plugin --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <!-- Additional Javascript --> <script src="js/main.js"></script> </body> </html>
.carousel-caption{ bottom: 90px; } .carousel-indicators { li{ width: 70px; height: 36px; border: 1px solid #222; } .active{ border: 1px solid rgb(255, 116, 116); } } @media screen and (min-width: 320px) and (max-width: 767px){ .carousel-indicators{ position: relative !important; bottom: 0; } .carousel-caption { bottom: 0px; top: 80px; h5{ font-size: 12px; font-weight: bold; } p{ font-size: 10px; } } .carousel-title{ font-size: 18px; margin-top: 20px; } }

Related: See More

Material Kit PRO BS3
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments: