Post
Ask Question
mohammad qasim

mohammad qasim

  • NA
  • 408
  • 0

how to place one div on another ( bit top ) not to cover all div

Feb 16 2021 11:25 AM
 
Greetings,
 
i want to place div on top of other
using Bootstrap,jquery html 5
 
My code:
 
<body>
<section id="testimonials" class="testimonials">
<div class="container" data-aos="fade-up">
<div class="owl-carousel testimonials-carousel">
<div class="testimonial-item">
<img src="assets/img/testimonials/testimonials-1.jpg" class="testimonial-img" alt="">
<h3>Saul Goodman</h3>
<h4>Ceo &amp; Founder</h4>
<p>
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper.
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
</div>
<div class="testimonial-item">
<img src="assets/img/testimonials/testimonials-2.jpg" class="testimonial-img" alt="">
<h3>Sara Wilsson</h3>
<h4>Designer</h4>
<p>
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa.
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
</div>
<div class="testimonial-item">
<img src="assets/img/testimonials/testimonials-3.jpg" class="testimonial-img" alt="">
<h3>Jena Karlis</h3>
<h4>Store Owner</h4>
<p>
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint minim.
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
</div>
<div class="testimonial-item">
<img src="assets/img/testimonials/testimonials-4.jpg" class="testimonial-img" alt="">
<h3>Matt Brandon</h3>
<h4>Freelancer</h4>
<p>
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam.
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
</div>
<div class="testimonial-item">
<img src="assets/img/testimonials/testimonials-5.jpg" class="testimonial-img" alt="">
<h3>John Larson</h3>
<h4>Entrepreneur</h4>
<p>
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam culpa fore nisi cillum quid.
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
</div>
</div>
</div>
</section>

<!-- End Hero -->
<main id="main">
<!-- ======= Why Us Section ======= -->
<section id="why-us" class="why-us">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-5" data-aos="fade-up">
<div class="content">
<h3>Why Choose IBL for your career?</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Asperiores dolores sed et. Tenetur quia eos. Autem tempore quibusdam vel necessitatibus optio ad corporis.
</p>
<div class="text-center">
<a href="#" class="more-btn">Learn More <i class="bx bx-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-7 d-flex">
<div class="icon-boxes d-flex flex-column justify-content-center">
<div class="row">
<div class="col-xl-4 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
<div class="icon-box mt-4 mt-xl-0">
<i class="bx bx-receipt"></i>
<h4>New Joiners</h4>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/img/NewHiring/Amir.jpg" height="150px" width="150px" alt="First slide" />
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/NewHiring/Misbah.jpeg" height="150px" width="150px" alt="Second slide" />
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/NewHiring/mubashir.png" height="150px" width="150px" alt="Second slide" />
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/NewHiring/billgate.jpg" height="150px" width="150px" alt="Third slide" />
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
<div class="spinner-grow text-primary" role="status">
</div>
<div class="spinner-grow text-secondary" role="status">
</div>
<div class="spinner-grow text-success" role="status">
</div>
<div class="spinner-grow text-danger" role="status">
</div>
<div class="spinner-grow text-warning" role="status">
</div>
<div class="spinner-grow text-info" role="status">
</div>
<%-- <div class="spinner-grow text-light" role="status">
</div>
<div class="spinner-grow text-dark" role="status">
</div>--%>
</div>
</div>
</div>
<div class="col-xl-4 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200">
<div class="icon-box mt-4 mt-xl-0">
<i class="bx bx-cube-alt"></i>
<h4>Job posting</h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt</p>
</div>
</div>
<div class="col-xl-4 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="300">
<div class="icon-box mt-4 mt-xl-0">
<i class="bx bx-images"></i>
<h4>Birthdays</h4>
<div id="myCarousel" class="vertical-slider carousel vertical slide col-md-0" data-ride="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row" style="vertical-align: central">
<div>
<img class="d-block w-100" src="assets/img/NewHiring/billgate.jpg" height="150px" width="150px" alt="Third slide">
</div>
</div>
<!--/row-fluid-->
</div>
<!--/item-->
<div class="item ">
<div class="row" style="vertical-align: central">
<div>
<img class="d-block w-100" src="assets/img/NewHiring/NaddemBD.jpg" height="150px" width="150px" alt="Third slide">
</div>
</div>
<!--/row-fluid-->
</div>
<div class="item ">
<div class="row" style="vertical-align: central">
<div>
<img class="d-block w-100" src="assets/img/NewHiring/Imran.jpeg" height="150px" width="150px" alt="Third slide">
</div>
</div>
<!--/row-fluid-->
</div>
<!--/item-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
 
 
 
thanks 
 
 

Answers (2)