Create a Bootstrap card layout to display blog posts on Wordpress - html

Question

I have some HTML/CSS that I've previously used to display blog post intros on a static website. I'm now building a theme for Wordpress and I would like to use the same layout to display all of my posts within the theme. Based on this accepted answer I think the best option is to create a page template (option 2 from the top answer in the link). The static layout looks like this: Bootstrap layout.
The HTML from the above screenshot is (just the first row of cards):
<div class="row mb-2">
<div class="col-md-6">
<div class="card flex-md-row mb-4 shadow-sm h-md-250 card-left">
<div class="card-body d-flex flex-column align-items-start">
<strong class="d-inline-block mb-2 text-danger">Film</strong>
<h3 class="mb-0">
<a class="text-dark" href="#">The Last Jedi</a>
</h3>
<div class="mb-1 text-muted">Sep 19</div>
<p class="card-text mb-auto">Star Wars Episode VIII proved to be divisive within the fandom. How will it be remembered once the sequel trilogy has concluded?</p>
Continue reading
</div>
<img class="card-img-right flex-auto d-none d-lg-block" data-src="holder.js/200x250?theme=thumb" alt="The Last Jedi" style="width: 200px; height: 250px;" src="Images/Thumbnails/The-Last-Jedi-Thumbnail.jpg" data-holder-rendered="true">
</div>
</div>
<div class="col-md-6">
<div class="card flex-md-row mb-4 shadow-sm h-md-250 card-right">
<div class="card-body d-flex flex-column align-items-start">
<strong class="d-inline-block mb-2 text-danger">Film</strong>
<h3 class="mb-0">
<a class="text-dark" href="#">Episode IX</a>
</h3>
<div class="mb-1 text-muted">Aug 19</div>
<p class="card-text mb-auto">The final chapter of the Skywalker sage is key to the future of the franchise, away from the original protagonists.</p>
Continue reading
</div>
<img class="card-img-right flex-auto d-none d-lg-block" data-src="holder.js/200x250?theme=thumb" alt="The Rise of Skywalker" style="width: 200px; height: 250px;" src="Images/Thumbnails/The-Rise-of-Skywalker-Thumbnail.jpg" data-holder-rendered="true">
</div>
</div>
</div>
With a small amount of CSS:
.card-left {
margin-left: 15%;
margin-right: 2%;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
.card-right {
margin-left: 2%;
margin-right: 15%;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
The information on the cards will need to map to WP. So from the above screenshot the coloured category (e.g. film) would be the WP category, the title the post title, the date the post date, the description a character-capped excerpt and the continue reading a link to the full post. I'd like the image to be a cropped version of the post header image, but for now am happy to exclude this part for the sake of simplicity.
I have a very simple index.php from the Underscores starter theme that I'd like to use to create this blog template:
<?php
/**
* Template Name: Blog Card Layout
*
* The template file for displaying blog posts using a Bootstrap card layout.
*/
get_header();
?>
<main id="primary" class="site-main">
<?php
if ( have_posts() ) :
if ( is_home() && ! is_front_page() ) :
?>
<header>
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header>
<?php
endif;
/* Start the Loop */
while ( have_posts() ) :
the_post();
/*
* Include the Post-Type-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Type name) and that will be used instead.
*/
get_template_part( 'template-parts/content', get_post_type() );
?>
<?php
endwhile;
the_posts_navigation();
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main><!-- #main -->
<?php
get_sidebar();
get_footer();
For reference, the template-parts/content looks like this:
<?php
/**
* Template part for displaying posts
*
* #link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* #package Suscito
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php
if ( is_singular() ) :
the_title( '<h1 class="entry-title">', '</h1>' );
else :
the_title( '<h2 class="entry-title">', '</h2>' );
endif;
if ( 'post' === get_post_type() ) :
?>
<div class="entry-meta">
<?php
suscito_posted_on();
suscito_posted_by();
?>
</div><!-- .entry-meta -->
<?php endif; ?>
</header><!-- .entry-header -->
<?php suscito_post_thumbnail(); ?>
<div class="entry-content">
<?php
the_content(
sprintf(
wp_kses(
/* translators: %s: Name of current post. Only visible to screen readers */
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'suscito' ),
array(
'span' => array(
'class' => array(),
),
)
),
wp_kses_post( get_the_title() )
)
);
wp_link_pages(
array(
'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'suscito' ),
'after' => '</div>',
)
);
?>
</div><!-- .entry-content -->
<footer class="entry-footer">
<?php suscito_entry_footer(); ?>
</footer><!-- .entry-footer -->
<hr>
</article><!-- #post-<?php the_ID(); ?> -->
So my question is two-fold:
Is it possible to re-create this layout, or something close to it?
If so, where in the new page template would the Bootstrap HTML code go and how would I amend it so that it gets the relevant information from Wordpress? I'm particularly interested in how I could control the post excerpt and 'continue reading' element.
Sorry for such a long post! I've been scratching my head over this one for a while. For reference my site is https://www.davidhazeel.com.