Sidebar

<aside class="col-lg-4 col-md-4 col-12 mt-5 mt-md-0">
<div class="mb-5">
	<h3 class="mb-4">Event Information</h3>
	<!--map-->
	<div id="mapid"></div>
</div>
<!-- address -->
<!--crad-->
<div class="card mb-4">
	<!--card body-->
	<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>
		<!--content-->
		<h4 class="h5">Address</h4>
		<p class="mb-0">American Airlines Arena 601 Biscayne Boulevard. Miami, FL, 33132, USA</p>
	</div>
</div>
<!-- Transport -->
<!--card-->
<div class="card mb-4">
	<!--card body-->
	<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>
		<!--content-->
		<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 -->
<!--card-->
<div class="card mb-4">
	<!--card body-->
	<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>
		<!--content-->
		<h4 class="h5">Hotels</h4>
		<p class="mb-0">Suitable Hotels and Restaurents are surrounded all the area.</p>
	</div>
</div>
</aside>

<!-- sidebar -->
<aside class="col-xl-4 col-lg-4 col-md-5 col-sm-12 col-12 mt-5 mt-md-0">
	<!--card-->
	<div class="card">
		<!--list-->
		<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 me-2 font-16 fa-fw text-muted"></i>
							<h5 class="mb-0 fw-medium">Program Price</h5>
						</div>
					</div>
					<div>
						<h5 class="mb-0 text-primary fw-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 me-2 font-16 fa-fw text-muted"></i>
							<h5 class="mb-0 fw-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 me-2 font-16 fa-fw text-muted"></i>
							<h5 class="mb-0 fw-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 me-2 font-16 fa-fw text-muted"></i>
							<h5 class="mb-0 fw-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 me-2 font-16 fa-fw text-muted"></i>
							<h5 class="mb-0 fw-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">
				<!--button-->
				<div class="d-grid">
					<a href="#" class="btn btn-secondary">Enroll This Courses</a>
				</div>
			</li>
		</ul>
	</div>
</aside>