Sidebar

<div class="row">
                                                            <div class="col-lg-4 col-md-4 col-12">
                                                               <div class="mb-5">
                                                                  <h3 class="mb-4">Event Information</h3>
                                                                  <div id="mapid"></div>
                                                               </div>
                                                               <!-- address -->
                                                               <div class="card mb-4">
                                                                  <div class="card-body p-4">
                                                                     <div class="mb-4">
                                                                        <i class="fas fa-map-marker-alt icon-shape icon-lg bg-light-secondary rounded-circle text-secondary "></i>
                                                                     </div>
                                                                     <h4 class="h5">Address</h4>
                                                                     <p class="mb-0">
                                                                        American Airlines Arena 601 Biscayne Boulevard. Miami, FL, 33132, USA
                                                                     </p>
                                                                  </div>
                                                               </div>
                                                               <!-- Transport -->
                                                               <div class="card mb-4">
                                                                  <div class="card-body p-4">
                                                                     <div class="mb-4">
                                                                        <i class="fas fa-taxi icon-shape icon-lg bg-light-warning rounded-circle text-warning "></i>
                                                                     </div>
                                                                     <h4 class="h5">Transport</h4>
                                                                     <p class="mb-0">
                                                                        To get to the venu place, you can take one of the city bus lines, tube or railway service.
                                                                     </p>
                                                                  </div>
                                                               </div>
                                                               <!-- hotels -->
                                                               <div class="card">
                                                                  <div class="card-body p-4">
                                                                     <div class="mb-4">
                                                                        <i class="fas fa-building icon-shape icon-lg bg-light-danger rounded-circle text-danger "></i>
                                                                     </div>
                                                                     <h4 class="h5">Hotels</h4>
                                                                     <p class="mb-0">
                                                                        Suitable Hotels and Restaurents are surrounded all the area.
                                                                     </p>
                                                                  </div>
                                                               </div>
                                                            </div>
                                                         </div>

<div class="col-xl-4 col-lg-4 col-md-5 col-sm-12 col-12">
                                                            <div class="card">
                                                               <ul class="list-group list-group-flush">
                                                                  <li class="list-group-item py-3">
                                                                     <div class="d-flex justify-content-between align-items-center">
                                                                        <div>
                                                                           <div class="d-flex align-items-center">
                                                                              <i class="fas fa-money-bill-alt mr-2 font-16 fa-fw text-muted"></i>
                                                                              <h5 class="mb-0 font-weight-medium">Program Price</h5>
                                                                           </div>
                                                                        </div>
                                                                        <div>
                                                                           <h5 class="mb-0 text-primary font-weight-bold">$35.00</h5>
                                                                        </div>
                                                                     </div>
                                                                  </li>
                                                                  <li class="list-group-item py-3">
                                                                     <div class="d-flex justify-content-between align-items-center">
                                                                        <div>
                                                                           <div class="d-flex align-items-center">
                                                                              <i class="fas fa-user-tie mr-2 font-16 fa-fw text-muted"></i>
                                                                              <h5 class="mb-0 font-weight-medium">Coach</h5>
                                                                           </div>
                                                                        </div>
                                                                        <div>
                                                                           <h5 class="mb-0 text-dark">Randall Williamson</h5>
                                                                        </div>
                                                                     </div>
                                                                  </li>
                                                                  <li class="list-group-item py-3">
                                                                     <div class="d-flex justify-content-between align-items-center">
                                                                        <div>
                                                                           <div class="d-flex align-items-center">
                                                                              <i class="fas fa-clock mr-2 font-16 fa-fw text-muted"></i>
                                                                              <h5 class="mb-0 font-weight-medium">Duration</h5>
                                                                           </div>
                                                                        </div>
                                                                        <div>
                                                                           <p class="mb-0 text-muted">4 weeks</p>
                                                                        </div>
                                                                     </div>
                                                                  </li>
                                                                  <li class="list-group-item py-3">
                                                                     <div class="d-flex justify-content-between align-items-center">
                                                                        <div>
                                                                           <div class="d-flex align-items-center">
                                                                              <i class="fas fa-file-alt mr-2 font-16 fa-fw text-muted"></i>
                                                                              <h5 class="mb-0 font-weight-medium">Lectures</h5>
                                                                           </div>
                                                                        </div>
                                                                        <div>
                                                                           <p class="mb-0 text-muted">18</p>
                                                                        </div>
                                                                     </div>
                                                                  </li>
                                                                  <li class="list-group-item py-3">
                                                                     <div class="d-flex justify-content-between align-items-center">
                                                                        <div>
                                                                           <div class="d-flex align-items-center">
                                                                              <i class="fas fa-user mr-2 font-16 fa-fw text-muted"></i>
                                                                              <h5 class="mb-0 font-weight-medium">Enrolled</h5>
                                                                           </div>
                                                                        </div>
                                                                        <div>
                                                                           <p class="mb-0 text-muted">54 students</p>
                                                                        </div>
                                                                     </div>
                                                                  </li>
                                                                  <li class="list-group-item py-3">
                                                                     <a href="#!" class="btn btn-secondary btn-block">Enroll This Courses</a>
                                                                  </li>
                                                               </ul>
                                                            </div>
                                                         </div>