I'm currently working with a bootstrap carousel that displays images and text on each carousel item. However, I want the content of each carousel item to be displayed horizontally, rather than vertically as shown in the image below.
Here is the current display: https://i.sstatic.net/dT2Yn.jpg
This is the desired layout for each carousel item: https://i.sstatic.net/SnkIj.jpg
Below is the source code containing two carousel items:
<div class="g-bg-img-hero" style="background-image: url(dist/images/newPage/svg-bg3.svg);">
<div class="container g-py-50">
<div class="row">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="col-md-6 g-mb-0--md">
<img class="img-fluid u-shadow-v39 g-brd-around g-brd-10 g-brd-white rounded"
src="dist/images/newPage/biggest-expo-on-stem-cells-in-karachi.png" alt="Biggest Stem Cells Conference">
</div>
<div class="col-md-5">
<div class="mb-4">
<h4 class="g-color-black mb-3">$28m Funding Investment for New University of Unify Research</h4>
<p>Food security, epigenetics, media ownership and space weather are among the topics that will be investigated as part of a $28 million funding injection to Unify research from the Australian Research Council (ARC).</p>
</div>
<a class="btn u-shadow-v33 g-color-white g-bg-primary g-bg-black--hover g-font-size-default g-rounded-30 g-px-35 g-py-11" href="#">Read More</a>
</div>
</div>
<div class="carousel-item">
<div class="col-md-6 g-mb-0--md">
<img class="img-fluid u-shadow-v39 g-brd-around g-brd-10 g-brd-white rounded"
src="dist/images/newPage/hira-shaikh.jpg" alt="Nida Yasir Trust on AlKhaleej Clinics">
</div>
<div class="col-md-5">
<div class="mb-4">
<h4 class="g-color-black mb-3">$28m Funding Investment for New University of Unify Research</h4>
<p>Food security, epigenetics, media ownership and space weather are among the topics that will be investigated as part of a $28 million funding injection to Unify research from the Australian Research Council (ARC).</p>
</div>
<a class="btn u-shadow-v33 g-color-white g-bg-primary g-bg-black--hover g-font-size-default g-rounded-30 g-px-35 g-py-11" href="#">Read More</a>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>