Bootstrap carousel item content in two seperate div horizontally - html

Question

I have a bootstrap carousel in which on each carousel item I am using an image & some text. I want each carousel item to be shown horizontally. But the bootstrap carousel item show me content vertically as shown in the image below.
This is what currently i am getting:
This is what I want each carousel item to look like:
Here is my source code: (Two Carousel items in it)
<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>

Answer 1

Well, your structure is incorrect. You need to have the following structure inside each carousel item:
.carousel > .carousel-item > .row > .col-4 + .col-6
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="g-bg-img-hero bg-info">
<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="row m-0 p-0">
<div class="col-4 col-md-4 g-mb-0--md">
<img class="img-fluid u-shadow-v39 g-brd-around g-brd-10 g-brd-white rounded" src="https://via.placeholder.com/300x200" alt="Biggest Stem Cells Conference">
</div>
<div class="col-8 col-md-8">
<h4 class="g-color-black mb-3">Item 1 - $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>
<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>
<div class="carousel-item">
<div class="row m-0 p-0">
<div class="col-4 col-md-4 g-mb-0--md">
<img class="img-fluid u-shadow-v39 g-brd-around g-brd-10 g-brd-white rounded" src="https://via.placeholder.com/300x200" alt="Biggest Stem Cells Conference">
</div>
<div class="col-8 col-md-8">
<h4 class="g-color-black mb-3">Item 2 - $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>
<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>
</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>