Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Bootstrap magazine sections

MDB provides you multiple sections and components typical for magazines.

Magazine newsfeed v.1 Premium 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/2016

Top 5 places in Italy you need to visit.

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.

Business

24/08/2016

How to start PR career in New York?

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.


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

    <!--Section heading-->
    <h1 class="section-heading">Section title</h1>

    <!--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>

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

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

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

                <!--Image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(27).jpg" alt="Sample post image">
                    <a>
                        <div class="mask waves-effect waves-light"></div>
                    </a>
                </div>

                <!--Excerpt-->
                <div class="news-data">
                    <a href="" class="light-blue-text"><h5><i class="fa fa-plane"></i> Travels</h5></a>
                    <p><strong><i class="fa fa-clock-o"></i> 20/08/2016</strong></p>
                </div>
                <h3><a>Top 5 places in Italy you need to visit.</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 hm-white-slight">
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(77).jpg" alt="Minor sample post image">
                            <a>
                                <div class="mask waves-effect waves-light"></div>
                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">
                        <p><strong>19/08/2016</strong></p>
                        <a>A journey through the woods.
                            <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 hm-white-slight">
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(64).jpg" alt="Minor sample post image">
                            <a>
                                <div class="mask waves-effect waves-light"></div>
                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">
                        <p><strong>18/08/2016</strong></p>
                        <a>How to start surfing in Hawaii?
                            <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 hm-white-slight">
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(25).jpg" alt="Minor sample post image">
                            <a>
                                <div class="mask waves-effect waves-light"></div>
                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">
                        <p><strong>17/08/2016</strong></p>
                        <a>7 reasons why you need to see San Francisco.
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>

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

        </div>
        <!--/First column-->

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

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

                <!--Image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20(90).jpg" alt="Second sample post image">
                    <a>
                        <div class="mask waves-effect waves-light"></div>
                    </a>
                </div>

                <!--Excerpt-->
                <div class="news-data">
                    <a href="" class="red-text"><h5 class="purple-text"><i class="fa fa-money"></i> Business</h5></a>
                    <p><strong><i class="fa fa-clock-o"></i> 24/08/2016</strong></p>
                </div>

                <h3><a>How to start PR career in New York?</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 vitae explicabo.
                </p>

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

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

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

                        <!--Image-->
                        <div class="view overlay hm-white-slight">
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(9).jpg" alt="Minor sample post image">
                            <a>
                                <div class="mask waves-effect waves-light"></div>
                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">
                        <p><strong>23/08/2016</strong></p>
                        <a>Find the best office in San Francisco.
                            <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 hm-white-slight">
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20(30).jpg" alt="Minor sample post image">
                            <a>
                                <div class="mask waves-effect waves-light"></div>
                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">
                        <p><strong>22/08/2016</strong></p>
                        <a>Top 6 startups from Berlin.
                            <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 hm-white-slight">
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(30).jpg" alt="Minor sample post image">
                            <a>
                                <div class="mask waves-effect waves-light"></div>
                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">
                        <p><strong>21/08/2016</strong></p>
                        <a>Marketing for luxury products.
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>

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

        </div>
        <!--/Second column-->

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

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

Magazine newsfeed v.2 Premium 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

27/02/2016

Discover the unique mountain world.

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.


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

    <!--Section heading-->
    <h1 class="section-heading">Section title</h1>

    <!--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>

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

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

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

                <!--Image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(21).jpg" alt="Wider sample post image">
                    <a>
                        <div class="mask waves-effect waves-light"></div>
                    </a>
                </div>

                <!--Excerpt-->
                <div class="news-data">
                    <a href="" class="blue-text"><h5><i class="fa fa-car"></i> Travels</h5></a>
                    <p><strong><i class="fa fa-clock-o"></i> 27/02/2016</strong></p>
                </div>

                <h3><a>Discover the unique mountain world.</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 vitae explicabo.
                </p>

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

        </div>
        <!--/First column-->

        <!--Second 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 hm-white-slight">
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg" alt="Minor sample post image">
                            <a>
                                <div class="mask waves-effect waves-light"></div>
                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">
                        <p><strong>26/02/2016</strong></p>
                        <a>How to prepare for an expedition to Mount Everest?
                            <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 hm-white-slight">
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).jpg" alt="Minor sample post image">
                            <a>
                                <div class="mask waves-effect waves-light"></div>
                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">
                        <p><strong>25/02/2016</strong></p>
                        <a>Beautiful wild nature in Białowieża.
                            <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 hm-white-slight">
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(16).jpg" alt="Minor sample post image">
                            <a>
                                <div class="mask waves-effect waves-light"></div>
                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">
                        <p><strong>24/02/2016</strong></p>
                        <a>Various sweets in European countries.
                            <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 hm-white-slight">
                            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(77).jpg" alt="Minor sample post image">
                            <a>
                                <div class="mask waves-effect waves-light"></div>
                            </a>
                        </div>
                    </div>

                    <!--Excerpt-->
                    <div class="col-md-9">
                        <p><strong>23/02/2016</strong></p>
                        <a>The most beautiful winter photography.
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </div>

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

        </div>
        <!--/Second column-->

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

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

Magazine newsfeed v.3 Premium 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="section magazine-section multi-columns">

    <!--Section heading-->
    <h1 class="section-heading">Section title</h1>

    <!--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>

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

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

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

                <!--Image-->
                <a href="" class="orange-text"><h5><i class="fa fa-coffee"></i> Health</h5></a>

                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(78).jpg" alt="First sample image">
                    <a>
                        <div class="mask waves-effect waves-light"></div>
                    </a>
                </div>
                <a><strong>6 Big Myths About Hydration.</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>
        <!--/First column-->

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

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

                <!--Image-->
                <a href="" class="indigo-text"><h5><i class="fa fa-camera"></i> Lifestyle</h5></a>

                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(82).jpg" alt="Second sample image">
                    <a>
                        <div class="mask waves-effect waves-light"></div>
                    </a>
                </div>

                <a><strong>Top 5 places for photographs.</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>
        <!--/Second column-->

        <hr>

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

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

                <!--Image-->
                <a href="" class="pink-text"><h5><i class="fa fa-heart"></i> Fashion</h5></a>

                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/4-col/img%20(81).jpg" alt="Third sample image">
                    <a>
                        <div class="mask waves-effect waves-light"></div>
                    </a>
                </div>

                <a><strong>What colors fit to blonde girl?</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>
        <!--/Third column-->

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

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