Bootstrap blog sections

MDB provides you multiple sections and components typical for blogs.

Blog listing v.1 MDB Pro component

Recent posts

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sample image for first version of blog listing

Food

This is title of the news.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus et aut officiis debitis aut rerum.

by Carine Fox, 19/08/2016

This is title of the news.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident et dolorum fuga.

by Carine Fox, 14/08/2016

Second image in the first version of blog listing

Travels

This is title of the news.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro qui dolorem ipsum quia sit amet, consectetur.

by Carine Fox, 11/08/2016


<!--Section: Blog v.1-->
<section class="section extra-margins">

    <!--Section heading-->
    <h1 class="section-heading">Recent posts</h1>
    <!--Section sescription-->
    <p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <!--First row-->
    <div class="row">

        <!--First column-->
        <div class="col-lg-5 col-xl-4 offset-xl-1 pb-3">
            <!--Featured image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Others/img%20(27).jpg" alt="Sample image for first version of blog listing">
                <a>
                    <div class="mask"></div>
                </a>
            </div>
        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-lg-7 col-xl-6">
            <!--Excerpt-->
            <a href="" class="green-text"><h6 class="font-bold pb-1"><i class="fa fa-cutlery"></i>Food</h6></a>
            <h4 class="mb-1"><strong>This is title of the news.</strong></h4>
            <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus et aut officiis debitis aut rerum.</p>
            <p>by <a><strong>Carine Fox</strong></a>, 19/08/2016</p>
            <a class="btn btn-success btn-sm mb-3" ripple-radius>Read more</a>
        </div>
        <!--/Second column-->

    </div>
    <!--/First row-->

    <hr class="hr-width mb-5 mt-5 pb-3">

    <!--Second row-->
    <div class="row">

        <!--First column-->
        <div class="col-lg-7 col-xl-6 offset-xl-1 pb-3">
            <!--Excerpt-->
            <a href="" class="pink-text"><h6 class="font-bold pb-1"><i class="fa fa-image"></i>Lifestyle</h6></a>
            <h4 class="mb-1"><strong>This is title of the news.</strong></h4>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident et dolorum fuga.</p>
            <p>by <a><strong>Carine Fox</strong></a>, 14/08/2016</p>
            <a class="btn btn-pink btn-sm mb-3" ripple-radius>Read more</a>
        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-md-5 mb-r">
            <!--Featured image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Others/img%20(34).jpg" alt="Second image in the first version of blog listing">
                <a>
                    <div class="mask"></div>
                </a>
            </div>
        </div>
        <!--/Second column-->

    </div>
    <!--/Second row-->

    <hr class="hr-width mb-5 mt-5 pb-3">

    <!--Third row-->
    <div class="row pb-5">

        <!--First column-->
        <div class="col-lg-5 col-xl-4 offset-xl-1 pb-3">
            <!--Featured image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Others/img (28).jpg" alt="Thrid image in the blog listing.">
                <a>
                    <div class="mask"></div>
                </a>
            </div>
        </div>
        <!--/First column-->

        <!--Second column-->
        <div class="col-lg-7 col-xl-6">
            <!--Excerpt-->
            <a href="" class="indigo-text"><h6 class="font-bold pb-1"><i class="fa fa-suitcase"></i>Travels</h6></a>
            <h4 class="mb-1"><strong>This is title of the news.</strong></h4>
            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro qui dolorem ipsum quia sit amet, consectetur.</p>
            <p>by <a><strong>Carine Fox</strong></a>, 11/08/2016</p>
            <a class="btn btn-indigo btn-sm mb-3" ripple-radius>Read more</a>
        </div>
        <!--/Second column-->

    </div>
    <!--/Third row-->

</section>
<!--/Section: Blog v.1-->

Blog listing v.2 MDB Pro component

Recent posts

Adventure

This is title of the news

by Billy Forester, 15/07/2016

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus voluptas.

Education

This is title of the news

by Billy Forester, 12/07/2016

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.

Culture

This is title of the news

by Billy Forester, 10/07/2016

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, quia consequuntur magni dolores eos qui ratione voluptatem.


<!--Section: Blog v.2-->
<section class="section extra-margins text-center pb-3">

    <!--Section heading-->
    <h2 class="section-heading h1 pt-4">Recent posts</h2>
    <!--Section description-->
    <p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <!--Grid row-->
    <div class="row">

        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-r">
            <!--Featured image-->
            <div class="view overlay hm-white-slight mb-2">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).jpg" alt="First sample image">
                <a>
                    <div class="mask"></div>
                </a>
            </div>

            <!--Excerpt-->
            <a href="" class="pink-text"><h6 class="mb-3 mt-3"><i class="fa fa-map "></i><strong> Adventure</strong></h6></a>
            <h4 class="mb-3">This is title of the news</h4>
            <p>by <a><strong>Billy Forester</strong></a>, 15/07/2016</p>
            <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus voluptas.</p>
            <a class="btn btn-pink btn-rounded" ripple-radius>Read more</a>
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-r">
            <!--Featured image-->
            <div class="view overlay hm-white-slight mb-2">
                <img src="https://mdbootstrap.com/img/Photos/Others/img%20(33).jpg" alt="Second sample image">
                <a>
                    <div class="mask"></div>
                </a>
            </div>

            <!--Excerpt-->
            <a href="" class="deep-orange-text"><h6 class="mb-3 mt-3"><i class="fa fa-graduation-cap"></i><strong> Education</strong></h6></a>
            <h4 class="mb-3">This is title of the news</h4>
            <p>by <a><strong>Billy Forester</strong></a>, 12/07/2016</p>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>
            <a class="btn btn-deep-orange btn-rounded" ripple-radius>Read more</a>
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-r">
            <!--Featured image-->
            <div class="view overlay hm-white-slight mb-2">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(33).jpg" alt="Thrid sample image">
                <a>
                    <div class="mask"></div>
                </a>
            </div>

            <!--Excerpt-->
            <a href="" class="cyan-text"><h6 class="mb-3 mt-3"><i class="fa fa-fire "></i><strong> Culture</strong></h6></a>
            <h4 class="mb-3">This is title of the news</h4>
            <p>by <a><strong>Billy Forester</strong></a>, 10/07/2016</p>
            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, quia consequuntur magni dolores eos qui ratione voluptatem.</p>
            <a class="btn btn-info btn-rounded" ripple-radius>Read more</a>
        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

</section>
<!--Section: Blog v.2-->

Blog listing v.3 MDB Pro component

Recent posts

Lifestyle

This is title of the news

by Jessica Clark, 26/08/2016

Travels

This is title of the news

by Jessica Clark, 24/08/2016

Photography

This is title of the news

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.

by Jessica Clark, 21/08/2016


<!--Section: Blog v.3-->
<section class="section extra-margins pb-3 text-center text-lg-left">

    <!--Section heading-->
    <h2 class="section-heading h1 pt-4">Recent posts</h2>
    <!--Section description-->
    <p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <!--Grid row-->
    <div class="row">

        <!--Grid column-->
        <div class="col-lg-4 mb-4">
            <!--Featured image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Others/img (38).jpg" alt="First sample image">
                <a>
                    <div class="mask"></div>
                </a>
            </div>
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-7 mb-4">
            <!--Excerpt-->
            <a href="" class="teal-text"><h6 class="pb-1"><i class="fa fa-heart"></i><strong> Lifestyle </strong></h6></a>
            <h4 class="mb-3"><strong>This is title of the news</strong></h4>
            <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus et aut officiis debitis aut rerum.</p>
            <p>by <a><strong>Jessica Clark</strong></a>, 26/08/2016</p>
            <a class="btn btn-primary btn-sm" ripple-radius>Read more</a>
        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

    <hr class="mb-5">

    <!--Grid row-->
    <div class="row mt-3">

        <!--Grid column-->
        <div class="col-lg-4 mb-4">
            <!--Featured image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" alt="Second sample image">
                <a>
                    <div class="mask"></div>
                </a>
            </div>
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-7 mb-4">
            <!--Excerpt-->
            <a href="" class="cyan-text"><h6 class="pb-1"><i class="fa fa-plane"></i><strong> Travels</strong></h6></a>
            <h4 class="mb-3"><strong>This is title of the news</strong></h4>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident et dolorum fuga.</p>
            <p>by <a><strong>Jessica Clark</strong></a>, 24/08/2016</p>
            <a class="btn btn-primary btn-sm" ripple-radius>Read more</a>
        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

    <hr class="mb-5">

    <!--Grid row-->
    <div class="row">

        <!--Grid column-->
        <div class="col-lg-4 mb-4">
            <!--Featured image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Others/img (35).jpg" alt="Third sample image">
                <a>
                    <div class="mask"></div>
                </a>
            </div>
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-7 mb-4">
            <!--Excerpt-->
            <a href="" class="brown-text"><h6 class="pb-1"><i class="fa fa-camera"></i><strong> Photography</strong></h6></a>
            <h4 class="mb-3"><strong>This is title of the news</strong></h4>
            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.</p>
            <p>by <a><strong>Jessica Clark</strong></a>, 21/08/2016</p>
            <a class="btn btn-primary btn-sm" ripple-radius>Read more</a>
        </div>
        <!--Grid column-->

    </div>
    <!--Grid row-->

</section>
<!--Section: Blog v.3-->