Objective: My goal is to design a bootstrap layout featuring a carousel on the left and text blocks on the right. These sections are denoted as "Left Column" and "Right Column" respectively in the HTML comments.
Challenge: I am facing difficulty in maintaining the carousel and text in distinct columns. Instead, they are stacking vertically, with the carousel appearing above and the text below it.
Situation: I have experimented with different approaches such as rearranging div elements and creating new ones. I have attempted removing flex CSS styling and adjusting margins and padding without success. Despite reviewing similar issues on Stack Overflow, none of the solutions seem applicable to my specific problem.
It appears that there is no conflicting CSS affecting this layout issue since other columns and rows on the same page function correctly. Nevertheless, including a screenshot here for reference.
HTML Code
<div class="container">
<div class="row">
<!-- Left Column Start -->
<div class="col-6" id="carousel-contain">
<div id="plantCarousel" class="carousel slide col-6" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
{% for image in plant.plant_images.all %}
{% if forloop.first %}
<li data-target="#plantCarousel" data-slide-to="{{forloop.counter0}}" class="active"></li>
{% else %}
<li data-target="#plantCarousel" data-slide-to="{{forloop.counter0}}"></li>
{% endif %}
{% endfor %}
<li data-target="#plantCarousel"></li>
</ol>
<div class="carousel-inner">
{% for image in plant.plant_images.all %}
{% if forloop.first %}
<div class="carousel-item active">
{% else %}
<div class="carousel-item">
{% endif %}
<img src="{{ image.images.url }}" alt="{{ plant.name }}">
</div>
{% endfor %}
</div>
<a class="carousel-control-prev" href="#plantCarousel" 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="#plantCarousel" 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>
<!-- Left Column Ends -->
<!-- Right Column Start -->
<div class="col-6">
<p> <b>Latin Name: </b>{{ plant.latin_name }} </p>
<br>
<p><b>Description: </b></p>
<p> {{ plant.description }} </p>
<br>
<br>
</div>
<!-- Right Column Ends -->
</div>
</div>
CSS Styles
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
.container {
max-width: 960px;
}
.pricing-header {
max-width: 700px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
img {
max-width: 100%;
max-height: 100%;
}
Preview of the Layout: https://i.sstatic.net/HbwWv.jpg