"Multiple carousel with horizontal indicators"
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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <meta name="viewport" content="width=device-width, initial-scale=1"> <div class="container register"> <div class="row"> <div class="col-md-12"> <!-- <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Login Form 1</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Login Form 2</a> </li> </ul> --> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active " id="home" role="tabpanel" aria-labelledby="home-tab"> <div class="container"> <div class="row"> <!-- Main Title --> <div class="col-md-6 col-md-offset-3"> <div class="title-block"> <h3></h3> <!-- <p>Our department & special service </p> --> </div> </div> </div> <div class="row"> <!-- Appointment Form --> <div class="col-sm-6 col-md-4"> <div id="form" class="form-area"> <form> <div class="form-padding"> <h4>Doctor Registration</h4> <div class="form-group"> <label>FULL NAME</label> <input type="text" class="form-control" id="name" name="name" placeholder="Name"> </div> <div class="form-group"> <label>STATE MEDICAL COUNCIL</label> <input type="text" class="form-control" id="email" name="email" placeholder="Email"> </div> <div class="form-group"> <label>REGISTRATION NUMBER</label> <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number"> </div> <div class="form-group"> <label>WORK LOCATION</label> <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number"> </div> <div class="form-group"> <label>EMAIL ID</label> <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number"> </div> <div class="form-group"> <label>MOBILE NUMBER</label> <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number"> </div> <div class="form-group"> <label>PASSWORD</label> <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number"> </div> <!-- <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label>DATE FORM</label> <input type="text" class="form-control hasDatepicker" id="datepicker" name="date-form" placeholder="Form"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label>DATE To</label> <input type="text" class="form-control hasDatepicker" id="datepicker2" name="date_to" placeholder="To"> </div> </div> </div> --> <!-- <label>HOURLY PREFERENCE</label> <div class="check-btn" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="options" id="option1" checked=""> MORNING </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2"> LUNCH </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3"> EVENING </label> </div> --> </div> <div class="form-footer"> <!-- <div class="checkbox"> <label><input type="checkbox" value="">Pharmacy</label> </div> --> <label class="labelclass" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Switch to Pharmacy REGISTER HERE</label> <!-- <button type="button" id="submit" aria-selected="false" name="submit" class="btn thm-btn" >REGISTER HERE</button> --> </div> </form> </div> </div> <!-- Doctor Image --> <div class="col-md-4 hidden-sm"> <div class="doctor_img"> <img src="appointment.png" class="img-responsive" alt=""> </div> </div> <!-- Reason --> <div class="col-sm-6 col-md-4"> <div class="choose"> <div class="choose-icon"> <i class="flaticon-telephone icon-color-3"></i> </div> <div class="choose-content"> <h4>Health Information</h4> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.</p> </div> </div> <div class="choose"> <div class="choose-icon"> <i class="flaticon-microscope icon-color-6"></i> </div> <div class="choose-content"> <h4>Medical Education</h4> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.</p> </div> </div> <div class="choose"> <div class="choose-icon"> <i class="flaticon-medical-2 icon-color-4 "></i> </div> <div class="choose-content"> <h4>Symptom Check</h4> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.</p> </div> </div> <div class="choose"> <div class="choose-icon"> <i class="flaticon-people-1 icon-color-7"></i> </div> <div class="choose-content"> <h4>Qualified Doctors</h4> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical.</p> </div> </div> </div> </div> </div> </div> <div class="tab-pane fade show " id="profile" role="tabpanel" aria-labelledby="profile-tab"> <div class="container"> <div class="row"> <!-- Main Title --> <div class="col-md-6 col-md-offset-3"> <div class="title-block"> <h3></h3> <!-- <p>Our department & special service </p> --> </div> </div> </div> <div class="row"> <!-- Reason --> <div class="col-sm-6 col-md-4"> <div class="choose"> <div class="choose-icon"> <i class="flaticon-telephone icon-color-3"></i> </div> <div class="choose-content"> <h4>Health Information</h4> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.</p> </div> </div> <div class="choose"> <div class="choose-icon"> <i class="flaticon-microscope icon-color-6"></i> </div> <div class="choose-content"> <h4>Medical Education</h4> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.</p> </div> </div> <div class="choose"> <div class="choose-icon"> <i class="flaticon-medical-2 icon-color-4 "></i> </div> <div class="choose-content"> <h4>Symptom Check</h4> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.</p> </div> </div> <div class="choose"> <div class="choose-icon"> <i class="flaticon-people-1 icon-color-7"></i> </div> <div class="choose-content"> <h4>Qualified Doctors</h4> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical.</p> </div> </div> </div> <!-- Doctor Image --> <div class="col-md-4 hidden-sm"> <div class="doctor_img"> <img src="appointment.png" class="img-responsive" alt=""> </div> </div> <!-- Appointment Form --> <div class="col-sm-6 col-md-4"> <div id="form" class="form-area"> <form> <div class="form-padding"> <h4>Pharmacy Registration</h4> <div class="form-group"> <label>FULL NAME</label> <input type="text" class="form-control" id="name" name="name" placeholder="Name"> </div> <div class="form-group"> <label>STATE MEDICAL COUNCIL</label> <input type="text" class="form-control" id="email" name="email" placeholder="Email"> </div> <div class="form-group"> <label>REGISTRATION NUMBER</label> <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number"> </div> <div class="form-group"> <label>WORK LOCATION</label> <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number"> </div> <div class="form-group"> <label>EMAIL ID</label> <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number"> </div> <div class="form-group"> <label>MOBILE NUMBER</label> <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number"> </div> <div class="form-group"> <label>PASSWORD</label> <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number"> </div> <!-- <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label>DATE FORM</label> <input type="text" class="form-control hasDatepicker" id="datepicker" name="date-form" placeholder="Form"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label>DATE To</label> <input type="text" class="form-control hasDatepicker" id="datepicker2" name="date_to" placeholder="To"> </div> </div> </div> --> <!-- <label>HOURLY PREFERENCE</label> <div class="check-btn" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="options" id="option1" checked=""> MORNING </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2"> LUNCH </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3"> EVENING </label> </div> --> </div> <div class="form-footer"> <!-- <div class="checkbox"> <label><input type="checkbox" value="">Pharmacy</label> </div> --> <label class="labelclass" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Switch to Doctor REGISTER HERE</label> <!-- <button type="button" id="submit" aria-selected="false" name="submit" class="btn thm-btn" >REGISTER HERE</button> --> </div> <!-- <div class="form-footer"> <div class="checkbox"> <label><input type="checkbox" value="">DOCTOR?</label> </div> <button type="button" id="submit" name="submit" class="btn thm-btn">REGISTER HERE</button> </div> --> </form> </div> </div> </div> </div> </div> </div> </div> </div> </div>
.btnContactSubmit { width: 50%; border-radius: 1rem; padding: 1.5%; color: #fff; background-color: #0062cc; border: none; cursor: pointer; margin-right: 6%; background-color: white; color: blue; margin-top: 4%; } .register .nav-tabs .nav-link:hover{ border: none; } .text-align{ margin-top: -3%; margin-bottom: -9%; padding: 10%; margin-left: 30%; } .form-new{ margin-right: 22%; margin-left: 20%; } .register-heading{ margin-left: 21%; margin-bottom: 10%; color: #e9ecef; } .register-heading h1{ margin-left: 21%; margin-bottom: 10%; color: #e9ecef; } .btnLoginSubmit{ border: none; padding: 2%; width: 25%; cursor: pointer; background: #29abe2; color: #fff; } .btnForgetPwd{ cursor: pointer; margin-right: 5%; color: #f8f9fa; } .register{ background: -webkit-linear-gradient(left, #3931af, #00c6ff); margin-top: 3%; padding: 3%; border-radius: 2.5rem; } .nav-tabs .nav-link{ border: 1px solid transparent; border-top-left-radius: .25rem; border-top-right-radius: .25rem; color: white; } .choose-form-inner , .testimonial-inner{background: url(https://images.pexels.com/photos/52527/dentist-pain-borowac-cure-52527.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500) center center no-repeat;-webkit-background-size: cover;background-size: cover;position: relative;} .choose-form-inner{padding: 100px 0;} .form-area {background-color: #fff;border: 2px solid #ddd;border-radius: 10px;} .form-padding{padding: 30px;} .form-padding h4{margin:0 0 25px;font-weight: 700;} .form-area .form-control {height: 40px;border-radius: 30px;box-shadow: none;border: 1px solid #ddd;} .form-area .form-control:focus {border-color: #207fdd;outline: 0;} .form-area label {font-weight: 600;font-size: 12px;color: #575757;} .check-btn .btn-primary {color: #555;background-color: #fff;border-color: #2e6da4;border-radius: 30px;padding: 10px 20px;font-size: 12px;font-weight: 500;border-color: #ddd} .check-btn .btn-primary.active {color: #fff;background-color: #207fdd;border-color: #207fdd;} .form-footer {padding: 10px 30px;background-color: rgba(32,127,221,0.05);border-top: 2px solid #ddd;} .form-footer .checkbox {position: relative;display: inline-block;margin-top: 10px;margin-bottom: 10px;} .form-footer .thm-btn{padding: 10px 20px;float: right;} .ui-widget-header .ui-icon {background-image: url(https://images.pexels.com/photos/235922/pexels-photo-235922.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260);} .choose{margin-bottom: 30px;} .choose:last-child{margin: 0;} .choose .choose-icon {float: left;display: inline-block;width: 80px;height: 80px;text-align: center;} .choose .choose-icon i{font-size: 50px;} .choose .choose-content {margin-left: 100px;} .choose-content h4 {position: relative;margin: 0 0 20px;font-weight: 700;} .choose-content p{margin: 0;} .choose-content h4::after, .doctor-details span::after{content: "";display: block;width: 30px;height: 2px;background-color: #207fdd;position: absolute;left: 0;bottom: -10px;} .labelclass{ background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; }

Related: See More

Vue Paper Dashboard
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments: