Bootstrap Snippet Product Detail , bootstrap 4 product view card 2 using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
    <br>
<div class="card border-0">
    <div class="row">
        <aside class="col-sm-4">
<article class="gallery-wrap"> 
<div class="img-big-wrap">
  <div> <a href="#"><img src="https://via.placeholder.com/450x450"></a></div>
</div>
<div class="img-small-wrap">
  <div class="item-gallery"> <img src="https://via.placeholder.com/100x100"> </div>
<div class="item-gallery"> <img src="https://via.placeholder.com/100x100"> </div>
<div class="item-gallery"> <img src="https://via.placeholder.com/100x100"> </div>
<div class="item-gallery"> <img src="https://via.placeholder.com/100x100"> </div>
</div>
</article>
        </aside>
        <aside class="col-sm-5">
<article class="card-body m-0 pt-0 pl-5">
    <h3 class="title text-uppercase">Nom du produit</h3>
<div class="rating">
                            <div class="stars">
                                <span class="fa fa-star checked"></span>
                                <span class="fa fa-star checked"></span>
                                <span class="fa fa-star checked"></span>
                                <span class="fa fa-star"></span>
                                <span class="fa fa-star"></span>
                                <span class="review-no ml-2">(41 avis)</span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
.gallery-wrap .img-big-wrap img {
    height: 400px;
    width: 400px;
   /* width: auto;*/
    display: inline-block;
    cursor: zoom-in;
}
.gallery-wrap .img-small-wrap .item-gallery {
    width: 70px;
    height: auto;
    margin: 7px 2px;
    display: inline-block;
    overflow: hidden;
}
.gallery-wrap .img-small-wrap {
    text-align: center;
}
.gallery-wrap .img-small-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 4px;
    /*cursor: zoom-in;*/
}
.price-title{
    font-weight: 700;
}
.price{
    font-size: 24px;
    line-height: 31px;
    text-transform: uppercase;
    max-height: 66px;
    overflow: hidden;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Product Detail , bootstrap 4 product view card 2"
Bootstrap 4.0.0 Snippet by kodakro

Related: See More

Questions / Comments:

"Product Detail , bootstrap 4 product view card 2" Bootstrap 4.0.0 Snippet by kodakro

Related: See More

Questions / Comments:

"Product Detail , bootstrap 4 product view card 2"
Bootstrap 4.0.0 Snippet by kodakro