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>