I am struggling to align two div items next to each other using Bootstrap. This is for a product detail view where I want the image on the left and text on the right. It's a product detail page for an ecommerce site that I'm trying to create. Maybe this is not the best practice because I am not good at frontend development. Any help would be greatly appreciated.
Here is the code snippet I am working with:
$(document).ready(function(){
$(".tb").hover(function(){
$(".tb").removeClass("tb-active");
$(this).addClass("tb-active");
current_fs = $(".active");
next_fs = $(this).attr('id');
next_fs = "#" + next_fs + "1";
$("fieldset").removeClass("active");
$(next_fs).addClass("active");
current_fs.animate({}, {
step: function() {
current_fs.css({
'display': 'none',
'position': 'relative'
});
next_fs.css({
'display': 'block'
});
}
});
});
}); .col-10{
margin-left: auto;
margin-right: auto;
}
.card {
display: inline-block;
position: relative;
}
fieldset.active {
display: inline-block !important
}
fieldset {
display: none
}
.pic0 {
width: 400px;
height: 500px;
margin-left: 85px;
margin-right: auto;
display: inline-block;
}
.product-pic {
padding-left: auto;
padding-right: auto;
width: 100%
}
.thumbnails {
position: absolute
}
.fit-image {
width: 100%;
object-fit: cover
}
.tb {
width: 62px;
height: 62px;
border: 1px solid grey;
margin: 2px;
opacity: 0.4;
cursor: pointer
}
.tb-active {
opacity: 1
}
.thumbnail-img {
width: 60px;
height: 60px
}
@media screen and (max-width: 768px) {
.pic0 {
width: 250px;
height: 350px
}
}
.detail_view{
margin-right: 100px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid px-sm-1 py-5 mx-auto col-10">
<div class="row">
<div class="d-flex">
<div class="card col-12">
<div class="d-flex flex-column thumbnails">
<div id="f1" class="tb tb-active"> <img class="thumbnail-img fit-image" src="{{ item.first.url }}"> </div>
<div id="f2" class="tb"> <img class="thumbnail-img fit-image" src="{{ item.second.url }}"> </div>
<div id="f3" class="tb"> <img class="thumbnail-img fit-image" src="{{ item.third.url }}"> </div>
<div id="f4" class="tb"> <img class="thumbnail-img fit-image" src="{{ item.fourth.url }}"> </div>
</div>
<fieldset id="f11" class="active">
<div class="product-pic"> <img class="pic0" src="{{ item.first.url }}"> </div>
</fieldset>
<fieldset id="f21" class="">
<div class="product-pic"> <img class="pic0" src="{{ item.second.url }}"> </div>
</fieldset>
<fieldset id="f31" class="">
<div class="product-pic"> <img class="pic0" src="{{ item.third.url }}"> </div>
</fieldset>
<fieldset id="f41" class="">
<div class="product-pic"> <img class="pic0" src="{{ item.fourth.url }}"> </div>
</fieldset>
<div class="deatil_view" style="float: right;">
<p style="color: blue;">{{ item.categories.name}} / <span>{{ item.subcategories.name }}</span></p>
<h2>{{ item.name }}</h2>
<p>{{ item.brand_name }}</p>
<div class="price">{{item.offered_price|currency}} <span class="actual"> {{item.actual_price|currency}} </span> </div>
<strong>About: <br>
<span> {{ item.about }}</span></strong>
<br>
<strong>Return Policy: <span>{{ item.return_policy }}</span> <a style="border: 1px solid #025; padding:2px" href="#">?</a> </strong>
</div>
</div>
</div>
</div>
</div>