<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="card col-md-10 mt-5 mb-5 my-0 mx-auto"> <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 col-12 mt-2"> <img width="150" height="170" src="http://via.placeholder.com/200x200" alt="" class="img-fluid pl-md-2 pl-5"/> </div> <div class="col-sm-9 col-12 pl-5 pl-3 mt-3"> <h6>Student Name:<b> Alvin Doe</b></h6> <h6>Admission Number:<b> Alvin Doe</b></h6> <h6>Class/Section:<b>10-(A)</b></h6> <h6>Subject:<b>Science</b></h6> <h6>Roll Nos:<b>65445454</b></h6> <h6>Date Of Birth:<b> 24-5-2000</b></h6> <h6>Father's Name:<b> Alvin Doe</b></h6> <h6>Mother's Name:<b> Alvin Doe</b></h6> <button class="btn btn-info btn-sm">View Details</button> </div> </div> </div> </div> <div class="carousel-item"> <div class="carousel-caption"> <div class="row"> <div class="col-sm-3 col-12 mt-2"> <img width="150" height="170" src="http://via.placeholder.com/200x200" alt="" class="img-fluid pl-md-2 pl-5"/> </div> <div class="col-sm-9 col-12 pl-5 pl-3 mt-3"> <h6>Student Name:<b> Alvin Doe</b></h6> <h6>Admission Number:<b> Alvin Doe</b></h6> <h6>Class/Section:<b>10-(A)</b></h6> <h6>Subject:<b>Science</b></h6> <h6>Roll Nos:<b>65445454</b></h6> <h6>Date Of Birth:<b> 24-5-2000</b></h6> <h6>Father's Name:<b> Alvin Doe</b></h6> <h6>Mother's Name:<b> Alvin Doe</b></h6> <button class="btn btn-info btn-sm">View Details</button> </div> </div> </div> </div> <div class="carousel-item"> <div class="carousel-caption"> <div class="row"> <div class="col-sm-3 col-12 mt-2"> <img width="150" height="170" src="http://via.placeholder.com/200x200" alt="" class="img-fluid pl-md-2 pl-5"/></div> <div class="<h6>Student Name:<b> Alvin Doe</b></h6> <h6>Admission Number:<b> Alvin Doe</b></h6> <h6>Class/Section:<b>10-(A)</b></h6> <h6>Subject:<b>Science</b></h6> <h6>Roll Nos:<b>65445454</b></h6> <h6>Date Of Birth:<b> 24-5-2000</b></h6> <h6>Father's Name:<b> Alvin Doe</b></h6> <h6>Mother's Name:<b> Alvin Doe</b></h6> <button class="btn btn-info btn-sm">View Details</button> </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 .carousel-item { height: 280px; } .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: #0077ff; padding: 12px; } a:hover > .ico { background-color: #666; } @media screen and (max-width: 480px) { .card .carousel-item { height: 350px; } }