read_story_element.php

<?php 
$blog_chunked = array_chunk($blog, 3);
foreach($blog_chunked as $row)
{
?>
<div class="row">
    <div class="container menu-section">
        <div class="row py-5 align-items-center ">
            <?php
            foreach($row as $ablog)
            {
            ?>
            <div class="col-4">
                <div class="card custom-card">
                    <div class="card-body">
                        <p hidden></p>
                        <h5 class="card-title"><?= $ablog['blog_title'] ?></h5>
                        <small class="text-muted">
                            <i class="fa fa-clock-o" aria-hidden="true"></i>
                            <?= ceil(str_word_count($ablog['blog_description'])/200)?> minutes
                            <i class="fa fa-book" aria-hidden="true"></i>
                            <?= str_word_count($ablog['blog_description'])?> words
                        </small>
                        <p class="card-text card-preview overflow-hidden">
                            <?= $ablog['blog_description'] ?>
                        </p>
                        <small class="text-primary text-left">
                            <a type="button" data-toggle="modal" data-target="#viewModal<?= $ablog['blog_id']?>">read more ...</a> 
                        </small>
                        <!-- Edit Button -->
                        
                        <small class="text-muted text-left">
                            <?= date("M j, g:ia",strtotime($ablog['created_at']))?>
                        </small>
                    </div>
                </div>
                <!-- View Story Modal -->
                <div class="modal fade" id="viewModal<?= $ablog['blog_id']?>" tabindex="-1" role="dialog" aria-labelledby="viewModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="card custom-card">
                                <div class="card-body">
                                    <h5 class="card-title">
                                        <?= $ablog['blog_title'] ?>
                                        <!-- Form to delete Story -->
                                        
                                    </h5>
                                    
                                    <small class="text-muted text-left">
                                        <?= date("M j, g:ia",strtotime($ablog['created_at']))?>
                                    </small><br>

                                    <small class="text-muted">
                                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                                        <?= ceil(str_word_count($ablog['blog_description'])/200)?> minutes
                                        <i class="fa fa-book" aria-hidden="true"></i>
                                        <?= str_word_count($ablog['blog_description'])?> words
                                    </small>
                                    <p class="card-text">
                                        <?= $ablog['blog_description'] ?>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Edit Story Modal -->

            </div>
            <?php
            }
            ?>
        </div>
    </div>
</div>
<?php
}
?>