How to create a line in bootstrap grid system like this screenshot

The layout would like to achieve:

And the actual implement so far

The problem is , notice the blue line under those topic , if I use the grid system, the is some padding among those block. How can I achieve the one blue line without breaking the grid?

Here is my code:

            <div class="row">
            <div class="col-xs-12 col-sm-4 mt10">
                <p class="fs22">Latest Video</p>
                <hr class="blue_line mt10 mb10"/>
                <?php if (isset($latest)) { ?>
                    <a href='<?= site_url("video/view/" . $latest['id']); ?>'>
                        <div class="home_block">
                            <img src="<?= (isset($latest['image_url']) ? site_url("thumbnail/" . $latest['image_url']) : site_url("assets/img/cms/video.png")); ?>">
                            <div class="txt">
                                <h3><?= $latest['title']; ?></h3>
                                <p>By <?= $latest['name']; ?></p>
                                <p><?= $this->level_list[$latest['level']]; ?></p>
                                <p class="text-muted"><?= trim_word($latest['description'], 50); ?></p>
                            </div>
                        </div>
                    </a>
                <?php } else { ?>
                    <div class="home_block center">
                        <img src="<?= site_url("assets/img/cms/video.png"); ?>">
                        <div class="txt text-center">
                            <p>No video available.</p>
                        </div>
                    </div>
                <?php } ?>
            </div>
            <div class="col-xs-12 col-sm-4 mt10">
                <p class="fs22">Popular Video</p>
                <hr class="blue_line mt10 mb10"/>
                <?php if (isset($popular)) { ?>
                    <a href='<?= site_url("video/view/" . $popular['id']); ?>'>
                        <div class="home_block center">
                            <img src="<?= (isset($popular['image_url']) ? site_url("thumbnail/" . $popular['image_url']) : site_url("assets/img/cms/video.png")); ?>">
                            <div class="txt">
                                <h3><?= $popular['title']; ?></h3>
                                <p>By <?= $popular['name']; ?></p>
                                <p><?= $this->level_list[$popular['level']]; ?></p>
                                <p class="text-muted"><?= trim_word($popular['description'], 50); ?></p>
                            </div>
                        </div>
                    </a>
                <?php } else { ?>
                    <div class="home_block">
                        <img src="<?= site_url("assets/img/cms/video.png"); ?>">
                        <div class="txt text-center">
                            <p>No video available.</p>
                        </div>
                    </div>
                <?php } ?>
            </div>
            <div class="col-xs-12 col-sm-4 mt10">
                <p class="fs22">Community Image</p>
                <hr class="blue_line mt10 mb10"/>
                <div class="home_block">
                    <img src="<?= isset($post['image_url']) ? site_url("community/" . $post['image_url']) : site_url("assets/img/front/discuss.png"); ?>">
                    <div class="txt">
                        <p class="text-muted" style="margin-top: 15px;"><?= trim_word($post['comment'], 150); ?></p>
                        <p class="text-right"><?= $post['create_date']; ?></p>
                    </div>
                </div>
            </div>
        </div>

Thanks a lot for helping.