Responsive Product Display Using Bootstrap

product display css examples
product display css examples
product display css examples

Hello friends today in this article we will learn how to create responsive product display page using Bootstrap and Bootstrap 4 free download, here we will see code and live preview, and you can download source code.

Responsive Mode

HTML CODE

<div class="row">
              <div class="col-md-3 col-lg-3 col-6">
                <div class="p_box">
                 <a href="golden.html">
                  <img src="images/hot_package/bhutan.jpg" width="100%" class="img-fluid" />
                  <h2 class="p_name">Bhutan Tour</h2>
                  <div class="p_container">
                    <div class="p_duration">5N/6D</div>
                    <div class="p_detail"><a href="#"> Detail</a></div>
                   <div class="clearfix"></div>
                  </div>
                 </a>
                </div>
              </div>

              <div class="col-md-3 col-lg-3 col-6">
                <div class="p_box">
                 <a href="#">
                  <img src="images/hot_package/goldentraingle.jpg" width="100%" class="img-fluid" />
                  <h2 class="p_name">Golden Traingle</h2>
                  <div class="p_container">
                    <div class="p_duration">5N/6D</div>
                    <div class="p_detail"><a href="#"> Detail</a></div>
                   <div class="clearfix"></div>
                  </div>
                 </a>
                </div>
              </div>

              <div class="col-md-3 col-lg-3 col-6">
                <div class="p_box">
                 <a href="#">
                  <img src="images/hot_package/blog-9.jpg" width="100%" class="img-fluid" />
                  <h2 class="p_name">Buddhist Tour</h2>
                  <div class="p_container">
                    <div class="p_duration">5N/6D</div>
                    <div class="p_detail"><a href="#"> Detail</a></div>
                   <div class="clearfix"></div>
                  </div>
                 </a>
                </div>
              </div>

              <div class="col-md-3 col-lg-3 col-6">
                <div class="p_box">
                 <a href="#">
                  <img src="images/hot_package/Kerala - Copy.jpg" width="100%" class="img-fluid" />
                  <h2 class="p_name">Kerela</h2>
                  <div class="p_container">
                    <div class="p_duration">5N/6D</div>
                    <div class="p_detail"><a href="#"> Detail</a></div>
                   <div class="clearfix"></div>
                  </div>
                 </a>
                </div>
              </div>

           </div>

gitex technology week 2020, gitex 2020,
gitex technology week 2020, gitex 2020,
ecommerce product slider bootstrap
ecommerce product slider bootstrap
change website css using javascript
change website css using javascript

Leave a Reply

avatar
  Subscribe  
Notify of