Bootstrap snippet. bs4 user product list

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-4 g-mb-30">
          <article class="u-shadow-v18 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
            <img class="d-inline-block img-fluid mb-4" src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Image Description">
            <h4 class="h5 g-color-black g-font-weight-600 g-mb-10">Product name</h4>
            <p>Finding your perfect product</p>
            <span class="d-block g-color-primary g-font-size-16">$50.00</span>
          </article>
        </div>
        
        <div class="col-md-6 col-lg-4 g-mb-30">
          <article class="u-shadow-v18 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
            <img class="d-inline-block img-fluid mb-4" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="Image Description">
            <h4 class="h5 g-color-black g-font-weight-600 g-mb-10">Product name</h4>
            <p>Finding your perfect product</p>
            <span class="d-block g-color-primary g-font-size-16">$50.00</span>
          </article>
        </div>
        
        <div class="col-md-6 col-lg-4 g-mb-30">
          <article class="u-shadow-v18 g-bg-white text-center rounded g-px-20 g-py-40 g-mb-5">
            <img class="d-inline-block img-fluid mb-4" src="https://bootdey.com/img/Content/avatar/avatar6.png" alt="Image Description">
            <h4 class="h5 g-color-black g-font-weight-600 g-mb-10">Product name</h4>
            <p>Finding your perfect product</p>
            <span class="d-block g-color-primary g-font-size-16">$50.00</span>
          </article>
        </div>
    </div>
</div>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

body{
    margin-top:20px;
    background-color: #fafafa !important;
}
@media (min-width: 0) {
    .g-mb-30 {
        margin-bottom: 2.14286rem !important;
    }
}

@media (min-width: 0) {
    .g-py-40 {
        padding-top: 2.85714rem !important;
        padding-bottom: 2.85714rem !important;
    }
}

@media (min-width: 0) {
    .g-px-20 {
        padding-left: 1.42857rem !important;
        padding-right: 1.42857rem !important;
    }
}
@media (min-width: 0){
    .g-mb-5 {
        margin-bottom: 0.35714rem !important;
    }
}

.g-bg-white {
    background-color: #fff !important;
}

.u-shadow-v18 {
    box-shadow: 0 5px 10px -6px rgba(0, 0, 0, 0.15);
}

.g-color-primary {
    color: #72c02c !important;
}

.g-font-size-16 {
    font-size: 1.14286rem !important;
}

.g-mb-10 {
    margin-bottom: 0.71429rem !important;
}

.g-mb-10 {
    margin-bottom: 0.71429rem !important;
}

.g-color-black {
    color: #000 !important;
}

.g-font-weight-600 {
    font-weight: 600 !important;
}