Sign in


Sign up


Bootstrap magazine sections

MDB provides you multiple sections and components typical for magazines.

Magazine newsfeed v.1 MDB Pro component

Section title

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.

Travels

20/08/2018

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.

Lifestyle

24/08/2018

This is title of the news

Sed ut perspiciatis unde voluptatem omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.

    
<!--Section: Magazine v.1-->
<section class="magazine-section text-center">

    <!--Section heading-->
    <h2 class="h1 text-center my-5 font-weight-bold">Section title</h2>

    <!--Section description-->
    <p class="grey-text pb-5">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 text-left">

        <!--Grid column-->
        <div class="col-lg-6 col-md-12">

            <!--Featured news-->
            <div class="single-news">

                <!--Image-->
                <div class="view overlay rounded z-depth-1-half waves-light" mdbWavesEffect>
                    <img src="https://mdbootstrap.com/img/Photos/Others/images/82.jpg" class="img-fluid" alt="Sample post image">
                    <a>
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>

                <!--Excerpt-->
                <div class="news-data">
                    <a href="" class="light-blue-text">
                        <h6>
                            <i class="fa fa-plane"></i>
                            <strong> Travels</strong>
                        </h6>
                    </a>
                    <p>
                        <strong>
                            <i class="fa fa-clock-o"></i> 20/08/2018</strong>
                    </p>
                </div>
                <h3>
                    <a>
                        <strong>This is title of the news</strong>
                    </a>
                </h3>
                <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.
                </p>

            </div>
            <!--/Featured news-->

            <!--Small news-->
            <div class="single-news">

                <div class="row">
                    <div class="col-md-3">

                        <!--Image-->
                        <div class="view overlay rounded z-depth-1 waves-light" mdbWavesEffect>
                            <img src="https://mdbootstrap.com/img/Photos/Others/photo8.jpg" class="img-fluid" alt="Minor sample post image">
                            <a>
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">
                        <p class="dark-grey-text">
                            <strong>19/08/2018</strong>
                        </p>
                        <a>Lorem ipsum dolor sit amet
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>

                </div>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">

                <div class="row">
                    <div class="col-md-3">

                        <!--Image-->
                        <div class="view overlay rounded z-depth-1 waves-light" mdbWavesEffect>
                            <img src="https://mdbootstrap.com/img/Photos/Others/images/54.jpg" class="img-fluid" alt="Minor sample post image">
                            <a>
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">
                        <p class="dark-grey-text">
                            <strong>18/08/2018</strong>
                        </p>
                        <a>Soluta nobis est eligendi
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>

                </div>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">

                <div class="row">
                    <div class="col-md-3">

                        <!--Image-->
                        <div class="view overlay rounded z-depth-1 waves-light" mdbWavesEffect>
                            <img src="https://mdbootstrap.com/img/Photos/Others/images/49.jpg" class="img-fluid" alt="Minor sample post image">
                            <a>
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">
                        <p class="dark-grey-text">
                            <strong>17/08/2018</strong>
                        </p>
                        <a>Voluptatem accusantium doloremque
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>

                </div>
            </div>
            <!--/Small news-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-6 col-md-12">

            <!--Featured news-->
            <div class="single-news">

                <!--Image-->
                <div class="view overlay rounded z-depth-1-half waves-light" mdbWavesEffect>
                    <img src="https://mdbootstrap.com/img/Photos/Others/images/84.jpg" class="img-fluid" alt="Second sample post image">
                    <a>
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>

                <!--Excerpt-->
                <div class="news-data">
                    <a href="" class="red-text">
                        <h6 class="pink-text">
                            <i class="fa fa-home"></i>
                            <strong> Lifestyle</strong>
                        </h6>
                    </a>
                    <p>
                        <strong>
                            <i class="fa fa-clock-o"></i> 24/08/2018</strong>
                    </p>
                </div>

                <h3>
                    <a>
                        <strong>This is title of the news</strong>
                    </a>
                </h3>

                <p>Sed ut perspiciatis unde voluptatem omnis iste natus error sit voluptatem accusantium doloremque laudantium,
                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.
                </p>

            </div>
            <!--/Featured news-->

            <!--Small news-->
            <div class="single-news">

                <div class="row">
                    <div class="col-md-3">

                        <!--Image-->
                        <div class="view overlay rounded z-depth-1 waves-light" mdbWavesEffect>
                            <img src="https://mdbootstrap.com/img/Photos/Others/images/86.jpg" class="img-fluid" alt="Minor sample post image">
                            <a>
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">
                        <p class="dark-grey-text">
                            <strong>23/08/2018</strong>
                        </p>
                        <a>Taque ipsa quae architecto
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>

                </div>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">

                <div class="row">
                    <div class="col-md-3">

                        <!--Image-->
                        <div class="view overlay rounded z-depth-1 waves-light" mdbWavesEffect>
                            <img src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg" class="img-fluid" alt="Minor sample post image">
                            <a>
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">
                        <p class="dark-grey-text">
                            <strong>22/08/2018</strong>
                        </p>
                        <a>Voluptatem accusantium doloremque
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>

                </div>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">

                <div class="row">
                    <div class="col-md-3">

                        <!--Image-->
                        <div class="view overlay rounded z-depth-1 waves-light" mdbWavesEffect>
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(56).jpg" class="img-fluid" alt="Minor sample post image">
                            <a>
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">
                        <p class="dark-grey-text">
                            <strong>21/08/2018</strong>
                        </p>
                        <a>Macum soluta nobis es.
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>

                </div>
            </div>
            <!--/Small news-->

        </div>
        <!--Grid column-->

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

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

Magazine newsfeed v.2 MDB Pro component

Section title

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.

Culinary

27/02/2018

This is title of the news

Sed ut perspiciatis unde voluptatem omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae explicabo. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    
 <!--Section: Magazine v.2-->
<section class="magazine-section text-center">


    <!--Section heading-->
    <h2 class="h1 text-center my-5 font-weight-bold">Section title</h2>


    <!--Section description-->
    <p class="grey-text pb-5">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 text-left">

        <!--Grid column-->
        <div class="col-lg-6 col-md-12">

            <!--Featured news-->
            <div class="single-news">


                <!--Image-->
                <div class="view overlay rounded z-depth-1-half mb-3 waves-light" mdbWavesEffect>

                    <img src="https://mdbootstrap.com/img/Photos/Slides/1.jpg" class="img-fluid" alt="Wider sample post image">
                    <a>
                        <div class="mask rgba-white-slight"></div>
                    </a>

                </div>

                <!--Excerpt-->
                <div class="news-data mb-5">
                    <a href="" class="deep-orange-text">
                        <h6>
                            <i class="fa fa-cutlery"></i>

                            <strong> Culinary</strong>
                        </h6>
                    </a>
                    <p class="dark-grey-text">

                        <strong>
                            <i class="fa fa-clock-o"></i> 27/02/2018</strong>
                    </p>

                </div>

                <h3 class="pt-2">
                    <a>
                        <strong>This is title of the news</strong>
                    </a>
                </h3>

                <p align="justify">Sed ut perspiciatis unde voluptatem omnis iste natus error sit voluptatem accusantium doloremque laudantium,
                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae explicabo.
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                </p>


            </div>
            <!--/Featured news-->

        </div>
        <!--Grid column-->


        <!--Grid column-->
        <div class="col-lg-6 col-md-12">

            <!--Small news-->

            <div class="single-news">

                <div class="row">
                    <div class="col-md-3">


                        <!--Image-->
                        <div class="view overlay rounded z-depth-1 waves-light" mdbWavesEffect>
                            <img src="https://mdbootstrap.com/img/Photos/Others/img%20(29).jpg" class="img-fluid" alt="Minor sample post image">
                            <a>
                                <div class="mask rgba-white-slight"></div>
                            </a>

                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">

                        <p class="dark-grey-text">
                            <strong>25/02/2018</strong>
                        </p>

                        <a class="grey-text">Duis aute irure dolor in reprehenderit in voluptate.
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>

                </div>

            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">


                <div class="row">
                    <div class="col-md-3">

                        <!--Image-->

                        <div class="view overlay rounded z-depth-1 waves-light" mdbWavesEffect>
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(45).jpg" class="img-fluid" alt="Minor sample post image">
                            <a>
                                <div class="mask rgba-white-slight"></div>

                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">

                        <p class="dark-grey-text">
                            <strong>25/02/2018</strong>
                        </p>

                        <a class="grey-text">Duis aute irure dolor in reprehenderit in voluptate.
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>

                </div>

            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">


                <div class="row">
                    <div class="col-md-3">

                        <!--Image-->

                        <div class="view overlay rounded z-depth-1 waves-light" mdbWavesEffect>
                            <img src="https://mdbootstrap.com/img/Photos/Others/images/87.jpg" class="img-fluid" alt="Minor sample post image">
                            <a>
                                <div class="mask rgba-white-slight"></div>

                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">

                        <p class="dark-grey-text">
                            <strong>25/02/2018</strong>
                        </p>

                        <a class="grey-text">Duis aute irure dolor in reprehenderit in voluptate.
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>

                </div>

            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">


                <div class="row">
                    <div class="col-md-3">

                        <!--Image-->

                        <div class="view overlay rounded z-depth-1 waves-light" mdbWavesEffect>
                            <img src="https://mdbootstrap.com/img/Photos/Others/img%20(27).jpg" class="img-fluid" alt="Minor sample post image">
                            <a>
                                <div class="mask rgba-white-slight"></div>

                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">

                        <p class="dark-grey-text">
                            <strong>25/02/2018</strong>
                        </p>

                        <a class="grey-text">Duis aute irure dolor in reprehenderit in voluptate.
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>

                </div>

            </div>
            <!--/Small news-->

        </div>
        <!--Grid column-->


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

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

Magazine newsfeed v.3 MDB Pro component

Section title

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.

    
<!--Section: Magazine v.3-->
<section class="magazine-section text-center multi-columns">

    <!--Section heading-->
    <h2 class="h1 text-center my-5 font-weight-bold">Section title</h2>

    <!--Section description-->
    <p class="grey-text pb-5">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 text-left">

        <!--Grid column-->
        <div class="col-lg-4 col-md-12 mb-4">

            <!--Featured news-->
            <div class="single-news">

                <!--Image-->
                <div class="view overlay rounded z-depth-2 mb-3 waves-light" mdbWavesEffect>
                    <img src="https://mdbootstrap.com/img/Photos/Others/images/86.jpg" class="img-fluid" alt="First sample image">
                    <a>
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>

                <!--Badge-->
                <div class="row mb-4 mt-0 pt-0">
                    <div class="col-12">
                        <a href="" class="orange-text mb-1">
                            <span class="badge pink">
                                <i class="fa fa-camera mr-1" aria-hidden="true"></i> Adventure</span>
                        </a>
                    </div>
                </div>

                <!--Title-->
                <a>
                    <strong>This is title of the news</strong>
                    <i class="fa fa-angle-right"></i>
                </a>

            </div>
            <!--/Featured news-->

            <!--Small news-->
            <div class="single-news">
                <a>24 Food Swaps That Slash Calories.
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>How to Make a Beet Cocktail?
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>8 Sneaky Reasons You're Always Hungry.
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>5 Pressure Cooker Recipes You Need to Try.
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-4">

            <!--Featured news-->
            <div class="single-news">

                <!--Image-->
                <div class="view overlay rounded z-depth-2 mb-3 waves-light" mdbWavesEffect>
                    <img src="https://mdbootstrap.com/img/Photos/Others/images/31.jpg" class="img-fluid" alt="First sample image">
                    <a>
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>

                <!--Badge-->
                <div class="row mb-4 mt-0 pt-0">
                    <div class="col-12">
                        <a href="" class="orange-text mb-1">
                            <span class="badge deep-orange">
                                <i class="fa fa-plane mr-1" aria-hidden="true"></i> Travel</span>
                        </a>
                    </div>
                </div>

                <!--Title-->
                <a>
                    <strong>This is title of the news</strong>
                    <i class="fa fa-angle-right"></i>
                </a>

            </div>
            <!--/Featured news-->

            <!--Small news-->
            <div class="single-news">
                <a>Trends in the blogosphere for 2016.
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>Where you eat the best lunch in Warsaw?
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>What camera take for holidays?
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>Why you should visit Lisbon?
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-4 col-md-6 mb-4">

            <!--Featured news-->
            <div class="single-news">

                <!--Image-->
                <div class="view overlay rounded z-depth-2 mb-3 waves-light" mdbWavesEffect>
                    <img src="https://mdbootstrap.com/img/Photos/Others/images/52.jpg" class="img-fluid" alt="First sample image">
                    <a>
                        <div class="mask rgba-white-slight"></div>
                    </a>
                </div>

                <!--Badge-->
                <div class="row mb-4 mt-0 pt-0">
                    <div class="col-12">
                        <a href="" class="orange-text mb-1">
                            <span class="badge success-color">
                                <i class="fa fa-leaf mr-1" aria-hidden="true"></i> Nature</span>
                        </a>
                    </div>
                </div>

                <!--Title-->
                <a>
                    <strong>This is title of the news</strong>
                    <i class="fa fa-angle-right"></i>
                </a>

            </div>
            <!--/Featured news-->

            <!--Small news-->
            <div class="single-news">
                <a>Top models in Poland.
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>London Fashion Week - see online.
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>Best bags designers in Italy.
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

            <!--Small news-->
            <div class="single-news">
                <a>Choose best swimsuit for summer.
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>
            <!--/Small news-->

        </div>
        <!--Grid column-->

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

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