<div class="container mt-5">

​

​

  <!--Section: Content-->

  <section class="mb-5">

​

    <!-- Section heading -->

    <h3 class="text-center font-weight-bold mb-5">Product Details</h3>

​

    <div class="row">

​

      <!--Grid column-->

      <div class="col-md-12">

        <!--News card-->

        <div class="card">

          <div class="card-body">

            <div class="row h-100 d-flex align-items-center">

              <div class="col-lg-6">

                <p class="text-muted font-weight-light ml-3 mb-5">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,

                   non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

                </p>

                <ul class="fa-ul mb-5 text-muted font-weight-light">

                  <li class="mb-2"><span class="fa-li"><i class="fas fa-check green-text"></i></span>Built in GPS</li>

                  <li class="mb-2"><span class="fa-li"><i class="fas fa-check green-text"></i></span>Heart Rate Sensor</li>

                  <li class="mb-2"><span class="fa-li"><i class="fas fa-check green-text"></i></span>Water Resistant 50 Meters</li>

                  <li class="mb-2"><span class="fa-li"><i class="fas fa-check green-text"></i></span>Comprehensive Workout App</li>

                </ul>

                <div class="d-flex justify-content-between ml-3">

                  <button type="button" class="btn btn-primary mx-0">Purchase</button>

                  <div class="text-center">

                    <h4 class="mb-0">$399</h4>

                    <small class="grey-text">+ $10 shipping fees</small>

                  </div>

                </div>

              </div>

              <div class="col-lg-6">

​

                <!--Carousel Wrapper-->

                <div id="carousel-thumb" class="carousel slide carousel-thumbnails" data-ride="carousel">

​

                  <!--Slides-->

                  <div class="carousel-inner text-center text-md-left" role="listbox">

                    <div class="carousel-item active">

                      <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/17.jpg" alt="First slide" class="img-fluid">

                    </div>

                    <div class="carousel-item">

                      <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/18.jpg" alt="Second slide" class="img-fluid">

                    </div>

                    <div class="carousel-item">

                      <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/19.jpg" alt="Third slide" class="img-fluid">

                    </div>

                  </div>

                  <!--/.Slides-->

​

                  <!--Thumbnails-->

                  <a class="carousel-control-prev" href="#carousel-thumb" 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="#carousel-thumb" role="button" data-slide="next">

                    <span class="carousel-control-next-icon" aria-hidden="true"></span>

                    <span class="sr-only">Next</span>

                  </a>

                  <!--/.Thumbnails-->

​

                </div>

                <!--/.Carousel Wrapper-->

              </div>

            </div>

          </div>

        </div>

      </div>

      <!--Grid column-->

​

    </div>

  </section>

  <!--Section: Content-->

​

​

</div>