News Blog - Grid

To help you reach your audience in a personal and more informal way, Thedir includes several News Blogs to start with.

Grid #1 #

<section class="pt-11 pb-13 mb-9">
    <div class="container">
        <div class="d-flex align-items-center mb-6 flex-wrap flex-sm-nowrap">
            <h2>
                <span class="font-weight-semibold">Some</span>
                <span class="font-weight-light">Tips & Articles</span>
            </h2>
            <a href="../blog-listing-grid.html"
               class="link-hover-dark-primary ml-0 ml-sm-auto w-100 w-sm-auto">
                <span class="font-size-md mr-1">All articles</span>
                <span class="font-size-sm">
                    <i class="fal fa-chevron-right"></i>
                </span>
            </a>
        </div>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card border-0">
                    <a href="../blog-single-gallery.html">
                        <img src="../images/blog/main-blog-2.jpg" alt="product 1" class="card-img-top image">
                    </a>
                    <div class="card-body px-0">
                        <div class="mb-2"><a href="#" class="link-hover-dark-primary">Tips</a>,
                            <a href="#" class="link-hover-dark-primary">Travel</a></div>
                        <h5 class="card-title lh-13 letter-spacing-25">
                            <a href="../blog-single-image.html"
                               class="link-hover-dark-primary text-capitalize">
                                10 best homestay in florencia that you don't miss
                                out</a>
                        </h5>
                        <ul class="list-inline">
                            <li class="list-inline-item mr-0">
                                <span class="text-gray">Aug 28th, 2017 by</span>
                            </li>
                            <li class="list-inline-item">
                                <a href="#"
                                   class="link-hover-dark-primary">Admin</a>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card border-0">
                    <a href="../blog-single-gallery.html">
                        <img src="../images/blog/main-blog-3.jpg" alt="product 1"
                             class="card-img-top image">
                    </a>
                    <div class="card-body px-0">
                        <div class="mb-2"><a href="#" class="link-hover-dark-primary">Culture</a>
                        </div>
                        <h5 class="card-title lh-13 letter-spacing-25"><a
                                href="../blog-single-gallery.html"
                                class="link-hover-dark-primary text-capitalize">Coffee On Street & Look Super Car</a>
                        </h5>
                        <ul class="list-inline">
                            <li class="list-inline-item mr-0">
                                <span class="text-gray">Aug 25th, 2017 by</span>
                            </li>
                            <li class="list-inline-item">
                                <a href="#"
                                   class="link-hover-dark-primary">David</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0">
                    <a href="../blog-single-gallery.html">
                        <img src="../images/blog/main-blog-1.jpg" alt="product 1"
                             class="card-img-top image">
                    </a>
                    <div class="card-body px-0">
                        <div class="mb-2"><a href="#" class="link-hover-dark-primary">Location</a>
                        </div>
                        <h5 class="card-title lh-13 letter-spacing-25"><a
                                href="../blog-single-gallery.html"
                                class="link-hover-dark-primary">MadCap Coffee At Brooklyn Town For Who Love Black Coffee</a>
                        </h5>
                        <ul class="list-inline">
                            <li class="list-inline-item mr-0">
                                <span class="text-gray">Aug 19th, 2017 by</span>
                            </li>
                            <li class="list-inline-item">
                                <a href="#"
                                   class="link-hover-dark-primary">LoganCee</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Grid #2 #

<section id="section-04" class="pt-12 pb-14">
    <div class="container">
        <div class="d-flex align-items-center mb-8 flex-wrap flex-sm-nowrap">
            <h4 class="font-weight-bold text-uppercase mb-0">
                some tips & tricks
            </h4>
            <a href="../blog-listing-grid.html"
               class="ml-0 ml-sm-auto link-hover-dark-primary mt-3 mt-sm-0 w-100 w-sm-auto">
                <span class="font-size-md d-inline-block mr-1">All articles</span>
                <span class="font-size-sm">
                    <i class="fal fa-chevron-right"></i>
                </span>
            </a>
        </div>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card border-0">
                    <a href="../blog-single-gallery.html" class="hover-scale">
                        <img src="../images/blog/jobs-blog-1.jpg" alt="product 1" class="card-img-top image">
                    </a>
                    <div class="card-body px-0 pb-0">
                        <ul class="list-inline mb-2">
                            <li class="list-inline-item mr-0">
                                <span class="text-gray">Aug 28th, 2017 by</span>
                            </li>
                            <li class="list-inline-item">
                                <a href="#" class="link-hover-dark-primary">Admin</a>
                            </li>
                        </ul>
                        <h5 class="card-title font-size-lg text-capitalize lh-14 letter-spacing-25"><a
                                href="../blog-single-gallery.html"
                                class="link-hover-dark-primary">Skills
                            Training Gap Among Employees Revealed</a>
                        </h5>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card border-0">
                    <a href="../blog-single-gallery.html" class="hover-scale">
                        <img src="../images/blog/jobs-blog-2.jpg" alt="product 1" class="card-img-top image">
                    </a>
                    <div class="card-body px-0">
                        <ul class="list-inline mb-2">
                            <li class="list-inline-item mr-0">
                                <span class="text-gray">Aug 25th, 2017 by</span>
                            </li>
                            <li class="list-inline-item">
                                <a href="#" class="link-hover-dark-primary">David</a>
                            </li>

                        </ul>
                        <h5 class="card-title font-size-lg text-capitalize lh-14 letter-spacing-25"><a
                                href="../blog-single-gallery.html"
                                class="link-hover-dark-primary">10
                            Best
                            Places to Find Freelance Jobs</a>
                        </h5>

                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0">
                    <a href="../blog-single-gallery.html" class="hover-scale">
                        <img src="../images/blog/jobs-blog-3.jpg" alt="product 1" class="card-img-top image">
                    </a>
                    <div class="card-body px-0">
                        <ul class="list-inline mb-2">
                            <li class="list-inline-item mr-0">
                                <span class="text-gray">Aug 19th, 2017  by</span>
                            </li>
                            <li class="list-inline-item">
                                <a href="#" class="link-hover-dark-primary">LoganCee</a>
                            </li>
                        </ul>
                        <h5 class="card-title font-size-lg text-capitalize lh-14 letter-spacing-25"><a
                                href="../blog-single-gallery.html"
                                class="link-hover-dark-primary">15
                            Questions That You Need To Know When Have An
                            Interview</a>
                        </h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Style #3 #

<section id="section-05" class="pt-11 pb-13 bg-gray-02">
    <div class="container">
        <div class="d-flex align-items-center mb-8">
            <h4 class="font-weight-bold text-uppercase mb-0">
                News
            </h4>
            <a href="../blog-listing-grid.html" class="ml-auto link-hover-dark-primary">
                <span class="font-size-md d-inline-block mr-1">All articles</span>
                <span class="font-size-sm"><i class="fal fa-chevron-right"></i></span>
            </a>
        </div>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card border-0 bg-transparent">
                    <a href="../blog-single-gallery.html" class="hover-scale">
                        <img src="../images/blog/health-and-medical-blog-1.jpg" alt="product 1"
                             class="card-img-top image">
                    </a>
                    <div class="card-body px-0">
                        <ul class="list-inline mb-2">
                            <li class="list-inline-item mr-0">
                                <span class="text-gray">Aug 28th, 2017 by</span>
                            </li>
                            <li class="list-inline-item">
                                <a href="#" class="link-hover-dark-primary">Admin</a>
                            </li>
                        </ul>
                        <h5 class="card-title font-size-lg text-capitalize lh-14 letter-spacing-25"><a
                                href="../blog-single-gallery.html"
                                class="link-hover-dark-primary">Carcinoma
                            Skin Cancer: What You Need To Know?</a>
                        </h5>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card border-0 bg-transparent">
                    <a href="../blog-single-gallery.html" class="hover-scale">
                        <img src="../images/blog/health-and-medical-blog-2.jpg" alt="product 1"
                             class="card-img-top image">
                    </a>
                    <div class="card-body px-0">
                        <ul class="list-inline mb-2">
                            <li class="list-inline-item mr-0">
                                <span class="text-gray">Aug 25th, 2017 by</span>
                            </li>
                            <li class="list-inline-item">
                                <a href="#" class="link-hover-dark-primary">David</a>
                            </li>
                        </ul>
                        <h5 class="card-title font-size-lg text-capitalize lh-14 letter-spacing-25"><a
                                href="../blog-single-gallery.html"
                                class="link-hover-dark-primary">Osteoarthritis:
                            What Do You Need to Know?</a>
                        </h5>

                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 bg-transparent">
                    <a href="../blog-single-gallery.html" class="hover-scale">
                        <img src="../images/blog/health-and-medical-blog-3.jpg" alt="product 1"
                             class="card-img-top image">
                    </a>
                    <div class="card-body px-0">
                        <ul class="list-inline mb-2">
                            <li class="list-inline-item mr-0">
                                <span class="text-gray">Aug 19th, 2017 by</span>
                            </li>
                            <li class="list-inline-item">
                                <a href="#" class="link-hover-dark-primary">LoganCee</a>
                            </li>
                        </ul>
                        <h5 class="card-title font-size-lg text-capitalize lh-14 letter-spacing-25"><a
                                href="../blog-single-gallery.html"
                                class="link-hover-dark-primary">Explore
                            New X-Ray Technology At Miami Hospital</a>
                        </h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Style #4 #

<section id="section-06" class="pt-11 pb-13">
    <div class="container">
        <h3 class="text-capitalize text-center mb-8">
            Latest From Our Blog
        </h3>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card border-0">
                    <a href="../blog-single-gallery.html" class="hover-scale">
                        <img src="../images/blog/automotic-service-blog-1.jpg" alt="product 1"
                             class="card-img-top image">
                    </a>
                    <div class="card-body px-0">
                        <ul class="list-inline mb-2">
                            <li class="list-inline-item mr-0">
                                <span class="text-gray">Aug 28th, 2017 by</span>
                            </li>
                            <li class="list-inline-item">
                                <a href="#" class="link-hover-dark-primary">Admin</a>
                            </li>

                        </ul>
                        <h5 class="card-title font-size-lg text-capitalize lh-14 letter-spacing-25">
                            <a href="../blog-single-gallery.html" class="link-hover-dark-primary">How
                                to resolve
                                problems of audi's car engine by
                                yourself</a>
                        </h5>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card border-0">
                    <a href="../blog-single-gallery.html" class="hover-scale">
                        <img src="../images/blog/automotic-service-blog-2.jpg" alt="product 1"
                             class="card-img-top image">
                    </a>
                    <div class="card-body px-0">
                        <ul class="list-inline mb-2">
                            <li class="list-inline-item mr-0">
                                <span class="text-gray">Aug 25th, 2017 by</span>
                            </li>
                            <li class="list-inline-item">
                                <a href="#" class="link-hover-dark-primary">David</a>
                            </li>

                        </ul>
                        <h5 class="card-title font-size-lg text-capitalize lh-14 letter-spacing-25">
                            <a href="../blog-single-gallery.html" class="link-hover-dark-primary">Car
                                Repair Quickly
                                With Gens Technology</a>
                        </h5>

                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0">
                    <a href="../blog-single-gallery.html" class="hover-scale">
                        <img src="../images/blog/automotic-service-blog-3.jpg" alt="product 1"
                             class="card-img-top image">
                    </a>
                    <div class="card-body px-0">
                        <ul class="list-inline mb-2">
                            <li class="list-inline-item mr-0">
                                <span class="text-gray">Aug 19th, 2017 by</span>
                            </li>
                            <li class="list-inline-item">
                                <a href="#" class="link-hover-dark-primary">LoganCee</a>
                            </li>
                        </ul>
                        <h5 class="card-title font-size-lg text-capitalize lh-14 letter-spacing-25"><a
                                href="../blog-single-gallery.html"
                                class="link-hover-dark-primary">
                            Discovery Best
                            Things That Upgrade In Mercedes Ben
                            2017 X5</a>
                        </h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download HTML Website Template Download