How to create a custom genesis template using Bootstrap

<?php

/**
 Frontpage

**/

function be_page_content() { ?>

<div id="front-page-1" style="padding-left:0;padding-right:0;" class="container-fluid">


<div  class="row">
<div class="col-lg-12 image-front-page">
<?php 

if (has_post_thumbnail( $post->ID ) ): ?>
<?php 
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image[0]; ?>" class="img-fluid" alt="homepage-img"/>
<?php endif; ?>
</div>
</div>

</div>



<!-- Front-page-2-->
<div id="front-page-2" style="background:white;padding-bottom:2%;padding-top:2%;" class="container">
<div class="row">
<div class="col-sm-12">
<?php
if ( have_posts() ) : 
    while ( have_posts() ) : the_post();
        the_content();
    endwhile;
else :
    _e( 'Sorry, no posts matched your criteria.', 'textdomain' );
endif; ?>
</div>
</div>

</div> <!--end container-->



<!-- Front-page-3-->
<div  style="background:#edd89f;" class="container-fluid">
<div id="front-page-3" style="padding-top:3%;padding-bottom:3%;" class="container">

<div class="row">
<div class="col-sm-12">
<h2 style="text-align:center;padding-bottom:3%;">LISTEN TO THE TRAILER</h2>
</div>
</div>

<div class="row">
<div class="col-sm-4">
<img src="/wp-content/uploads/2021/03/Keyhole-1-1024x1024.png" alt="breakthrough-image" class="img-fluid"/>
</div>
<div class="col-sm-8">
<iframe height="52px" width="100%" frameborder="no" scrolling="no" seamless="" src="https://player.simplecast.com/ec7391fa-a6e3-49b5-84ce-258fa56effa0?dark=false&amp;color=CE9E38"></iframe>
<h4 style="padding-top:2%;">Introducing, Inside the Breakthrough</h4>
<p>
Sample Text
</p>
</div>

</div>
</div>
</div>

<!-- Front-page-4-->
<div id="front-page-4" style="background:white;padding-bottom:3%;padding-top:3%;" class="container">
<div class="row">
<div class="col-sm-12">
<h2 style="text-align:center;padding-bottom:3%;">Sample Text</h2>
</div>
</div>

<div class="row">
<div class="col-sm-12">

<?php

//query posts and display.
global $wp_query;

	$args = array(
	    'post_type'=>'post',
		'post_status'=> 'publish',
		'posts_per_page' => 3
	);

	$wp_query = new WP_Query( $args ); 
	
	
	if( $wp_query->have_posts()){
	
		while($wp_query->have_posts()){ $wp_query->the_post(); 
		global $post; 
		
		//get the image 
		if ( has_post_thumbnail() ) {
			$id=$post->ID;
			$src = wp_get_attachment_image_src( get_post_thumbnail_id($id), 'full' );
			}
			else{				
			$src=array();
			$src[0]="https://via.placeholder.com/1200x800?text=News Item";
			} 
?>
		
		<div style="padding-bottom:3%;margin-bottom:3%; border-bottom:1px solid lightgray;" class="row">
			
			<!--image-->
		    <div class="col-sm-4">
			
			<?php 

			echo '<div style="text-align:center;"><img class="img-fluid" src="'.$src[0].'" alt="post featured image" /></div>';
			?>
			</div>
			
			<!--title date-->
			 <div class="col-sm-8">
			 <?php
			    the_field('iframe_code');
			    //echo '<p style="padding-top:2%;">'.do_shortcode('[post_date]').'</p>';
			 	echo '<h4>'.get_the_title( $post->id ).'</h4>';
				the_excerpt();
			   ?>
			   
			   <p style="text-align:right;"><a  href="<?php echo get_permalink( $post->id );?>">VISIT EPISODE PAGE</a>

			 </div>
	
			</div>
		
	 <?php
			
		 } //endwhile 
		 
	}//if have posts
		
		?>
</div>

</div> <!--end container-->
</div>

<!-- Front-page-5-->
<div  style="background:#edd89f;" class="container-fluid">
<div id="front-page-5" style="padding-bottom:2%;padding-top:2%;" class="container">

<div class="row">
<div class="col-sm-12">
<h2 style="text-align:center;">CONTACT</h2>
</div>
</div>

<div class="row">
<div class="col-sm-12">
<?php
echo do_shortcode('[wpforms id="17"]');
?>
</div>
</div>

</div> <!--end container-->
</div>


<?php

}

add_action( 'be_content_area', 'be_page_content' );


// Build the page
get_header();
do_action( 'be_content_area' );
get_footer();