Bootstrap Media Object

Hello,

I’m still fairly new to WordPress but I have a client who insists on keeping their website hosted here. I’ve added the radio station plugin to their site (currently under development and is hosted on my local machine at the moment). After adding all of the radio shows and DJs, I looked at the how it was laid out on the site and was less then satisfied. The way that my client has envision the “Now Playing” and “Up Next” widgets looking should be more like the Bootstrap 4 Media Object. I attempted to modify the code in the class-dj-upcoming.php file to reflect such a layout but instead of it changing the way it was laid out, it displayed nothing at all.

Here’s my code:

<div class="media">
				<?php
				if ( isset( $djs['all'] ) && ( count( $djs['all'] ) > 0 ) ) {
					foreach ( $djs['all'] as $showtime => $dj ) {
						if ( is_array( $dj ) && isset( $dj['type'] ) && 'override' === $dj['type'] ) {
							?>
							<?php
							if ( $djavatar ) {
								if ( has_post_thumbnail( $dj['post_id'] ) ) {
									?>
									<img class="align-self-center mr-3" src="<?php echo get_the_post_thumbnail( $dj['post_id'], 'thumbnail' ); ?>"><?php
								}
							} ?>
							<div class="media-body">
								<h5 class="mt-0">
									<?php echo esc_html( $dj['title'] ); ?>
								</h5>
								<?php
								// --- show schedule ---
								if ( $show_sched ) {
									if ( 12 === (int) $time ) {
										$start_hour = $dj['sched']['start_hour'];
										if ( substr( $dj['sched']['start_hour'], 0, 1 ) === '0' ) {
											$start_hour = substr( $dj['sched']['start_hour'], 1 );
										}

										$end_hour = $dj['sched']['end_hour'];
										if ( substr( $dj['sched']['end_hour'], 0, 1 ) === '0' ) {
											$end_hour = substr( $dj['sched']['end_hour'], 1 );
										}
										?>
										<p class="small">
											<?php echo esc_html( $start_hour . ':' . $dj['sched']['start_min'] . ' ' . $dj['sched']['start_meridian'] . ' - ' . $end_hour . ':' . $dj['sched']['end_min'] . ' ' . $dj['sched']['end_meridian'] ); ?>
										</p>
										<?php
									} else {
										?>
										<p class="small">
											<?php echo esc_html( $dj['sched']['start_hour'] . ':' . $dj['sched']['start_min'] . ' - ' . $dj['sched']['end_hour'] . ':' . $dj['sched']['end_min'] ); ?>
										</p>
										<?php
									}
									?>
							</div>
							<?php
						} else {
							?>
							<div class="media-body">
								<h5 class="mt-0">
									<?php
										if ( $link ) {
											?>
											<a href="<?php echo esc_url( get_permalink( $dj->ID ) ); ?>">
												<?php echo esc_html( $dj->post_title ); ?>
											</a>
											<?php
										} else {
											echo esc_html( $dj->post_title );
										}
									?>
								</h5>
								<?php

								// --- encore presentation ---
								// 2.2.4: added encore presentation display
								if ( array_key_exists( $showtime, $djs['encore'] ) ) {
									?>
									<div class="on-air-dj-encore">
										<?php echo esc_html__( 'Encore Presentation', 'radio-station' ); ?>
									</div>
									<?php
								}

									// --- DJ names ---
								if ( $display_djs ) {

									$ids   = get_post_meta( $dj->ID, 'show_user_list', true );
									$count = 0;

									if ( $ids && is_array( $ids ) ) {
										?>
										<div class="on-air-dj-names">
											<?php
											echo esc_html__( 'with ', 'radio-station' );

											foreach ( $ids as $id ) {
												$count++;
												$user_info = get_userdata( $id );

												if ( $link_djs ) {
													$dj_link = get_author_posts_url( $user_info->ID );
													$dj_link = apply_filters( 'radio_station_dj_link', $dj_link, $user_info->ID );
													?>
													<a href="<?php echo esc_url( $dj_link ); ?>">
														<?php echo esc_html( $user_info->display_name ); ?>
													</a>
													<?php
												} else {
													echo esc_html( $user_info->display_name );
												}

												$id_count = count( $ids );
												if ( ( 1 === $count && 2 === $id_count )
												|| ( $id_count > 2 ) && $count === $id_count - 1 ) {
													echo ' ' . esc_html__( 'and', 'radio-station' ) . ' ';
												} elseif ( $count < $id_count && $id_count > 2 ) {
													echo ', ';
												}
											}
											?>
										</div>
										<?php
									}
								}
								?>
								<?php
								// --- show schedule ---
								if ( $show_sched ) {

									$showtimes = explode( '|', $showtime );
									// 2.2.2: fix to weekday value to be translated
									$weekday = radio_station_translate_weekday( date( 'l', $showtimes[0] ) );

									// 2.2.7: fix to convert time to integer
									if ( 12 === (int) $time ) {
										?>
										<div class="on-air-dj-sched">
											<?php echo esc_html( $weekday ); ?>, <?php echo esc_html( date( 'g:i a', $showtimes[0] ) ); ?> - <?php echo esc_html( date( 'g:i a', $showtimes[1] ) ); ?>
										</div>
										<?php
									} else {
										?>
										<div class="on-air-dj-sched">
											<?php echo esc_html( $weekday ); ?>, <?php echo esc_html( date( 'H:i', $showtimes[0] ) ); ?>
											- <?php echo esc_html( date( 'H:i', $showtimes[1] ) ); ?>
										</div>
										<?php
									}
								}
								?>
							</div>
							<?php
						} 
					}
				}
			} else {
				if ( ! empty( $default ) ) {
					?>
					<li class="on-air-dj default-dj">
						<?php echo esc_html( $default ); ?>
					</li>
					<?php
				}
			} ?>
			</div>

What should I change or do differently in order to get both widgets to display like a bootstrap 4 media object? An example of what my client is looking for can be found on KS 107.5 sidebar. Please advise.