mdbootstrap4-pro/html/tutorials/bootstrap/main.html

MDBootstrap 4 PRO

<!-- Tutorial content-->
<div class="main-tutorial">
    <!-- ******-->

    <style>
        .main-tutorial {
            color: #616161
        }

        @media only screen and (min-width: 480px) {
            .extra-padding {
                padding-right: 5%;
                padding-left: 5%;
            }
        }
        /* Small Devices, Tablets */

        @media only screen and (min-width: 768px) {
            .extra-padding {
                padding-right: 10%;
                padding-left: 10%;
            }
        }
        /* Medium Devices, Desktops */

        @media only screen and (min-width: 992px) {
            .extra-padding {
                padding-right: 15%;
                padding-left: 15%;
            }
        }
        /* Large Devices, Wide Screens */

        @media only screen and (min-width: 1200px) {
            .extra-padding {
                padding-right: 20%;
                padding-left: 20%;
            }
        }
    </style>


    <!--Section: Live Previews-->
    <section class="section">

        <!--Introduction-->

        <div class="extra-padding text-center my-5">

            <!--Heading-->
            <h1 class="h2-responsive mb-4 text-center">Learn Bootstrap with us</h1>

            <p class="text-center"><strong>Bootstrap is the most favored and dynamically evolving front-end framework.</strong></p>

            <p class="text-center">It became the undeniable leader in web design considering it is used and appreciated by millions of programmers
                across the world. </p>

            <p class="text-center">It is hard to find more advantageous tool compared to Bootstrap.</p>

            <p class="text-center">Considering its progressive development and snowball upsurge of projects based on this framework, every web designer
                or developer should at least be familiar with basics of Bootstrap.
            </p>

        </div>
        <!--/Introduction-->

        <!--Examples-->
        <div class="text-center">

            <!--Subheading-->
            <h4 class="mb-5">See what you are going to create:</h4>

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

                <!--First column-->
                <div class="col-lg-4 col-md-12 mb-r">
                    <!--Featured image-->
                    <div class="view overlay hm-white-slight mb-4">
                        <img src="https://mdbootstrap.com/img/Others/tutorials/corporate.jpg">
                        <a href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/Tutorials/bootstrap/I-2/index.html">
                            <div class="mask"></div>
                        </a>
                    </div>

                    <!--Excerpt-->
                    <h4>Corporate website</h4>
                    <a class="btn btn-primary mt-3" href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/Tutorials/bootstrap/I-2/index.html"><i class="fa fa-eye mr-1"></i> See live preview</a>
                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-lg-4 col-md-6 mb-r">
                    <!--Featured image-->
                    <div class="view overlay hm-white-slight mb-4">
                        <img src="https://mdbootstrap.com/img/Others/tutorials/landing.jpg">
                        <a href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/Tutorials/bootstrap/II-5/index.html">
                            <div class="mask"></div>
                        </a>
                    </div>

                    <!--Excerpt-->
                    <h4>Landing Page</h4>
                    <a class="btn btn-primary mt-3" href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/Tutorials/bootstrap/II-5/index.html"><i class="fa fa-eye mr-1"></i> See live preview</a>
                </div>
                <!--/Second column-->

                <!--Third column-->
                <div class="col-lg-4 col-md-6 mb-r">
                    <!--Featured image-->
                    <div class="view overlay hm-white-slight mb-4">
                        <img src="https://mdbootstrap.com/img/Others/tutorials/carousel.jpg">
                        <a href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/Tutorials/bootstrap/III-1/index.html#carousel-example-1">
                            <div class="mask"></div>
                        </a>
                    </div>

                    <!--Excerpt-->
                    <h4>Full Page Carousel</h4>
                    <a class="btn btn-primary mt-3" href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/Tutorials/bootstrap/III-1/index.html#carousel-example-1"><i class="fa fa-eye mr-1"></i> See live preview</a>
                </div>
                <!--/Third column-->

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

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

                <!--First column-->
                <div class="col-lg-4 col-md-12 mb-r">
                    <!--Featured image-->
                    <div class="view overlay hm-white-slight mb-4">
                        <img src="https://mdbootstrap.com/img/Others/tutorials/advanced-landing.jpg">
                        <a href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/Tutorials/bootstrap/IV-7/index.html">
                            <div class="mask"></div>
                        </a>
                    </div>

                    <!--Excerpt-->
                    <h4>Advanced Landing Page</h4>
                    <a class="btn btn-primary mt-3" href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/Tutorials/bootstrap/IV-7/index.html"><i class="fa fa-eye mr-1"></i> See live preview</a>
                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-lg-4 col-md-6 mb-r">
                    <!--Featured image-->
                    <div class="view overlay hm-white-slight mb-4">
                        <img src="https://mdbootstrap.com/img/Others/tutorials/e-commerce.jpg">
                        <a href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/Tutorials/bootstrap/V-6/index.html">
                            <div class="mask"></div>
                        </a>
                    </div>

                    <!--Excerpt-->
                    <h4>E-commerce</h4>
                    <a class="btn btn-primary mt-3" href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/Tutorials/bootstrap/V-6/index.html"><i class="fa fa-eye mr-1"></i> See live preview</a>
                </div>
                <!--/Second column-->

                <!--Third column-->
                <div class="col-lg-4 col-md-6 mb-r">
                    <!--Featured image-->
                    <div class="view overlay hm-white-slight mb-4">
                        <img src="https://mdbootstrap.com/img/Others/tutorials/product-page.jpg">
                        <a href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/Tutorials/bootstrap/VI-7/index.html">
                            <div class="mask"></div>
                        </a>
                    </div>

                    <!--Excerpt-->
                    <h4>Product Page</h4>
                    <a class="btn btn-primary mt-3" href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/Tutorials/bootstrap/VI-7/index.html"><i class="fa fa-eye mr-1"></i> See live preview</a>
                </div>
                <!--/Third column-->

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

        </div>
        <!--/Examples-->

    </section>
    <!--/Section: Live Previews-->


    <!--Section: Description-->
    <section class="section extra-padding">

        <!--Description-->
        <div class="text-justify">

            <p><strong>Let’s summarize. So what exactly is Bootstrap?</strong></p>

            <p><strong>1. </strong>It is a free front-end framework for faster and easier web development.</p>
            <p><strong>2. </strong>It combines HTML, CSS, JS based design templates for typography, forms, buttons, tables,
                navigation, modals, image carousels and numerous other components, as well as JavaScript plugins.
            </p>
            <p><strong>3. </strong>It provides you with a convenient approach to creating responsive designs. </p>

            <div style="height:30px"></div>

            <p>
                <Strong>Why use Bootstrap?</Strong>
            </p>

            <p><strong>1. </strong>It is novice friendly, so you don’t have to master HTML or CSS before diving into it.</p>
            <p><strong>2. </strong>It’s CSS works perfectly on either phones, tablets or desktops thanks to its responsive features.</p>
            <p><strong>3. </strong>It’s core framework styles are preset to mobile-first approach. </p>
            <p><strong>4. </strong>All the modern browsers are entirely compatible with Bootstrap (Chrome, Firefox, Internet
                Explorer, Microsoft Edge, Safari, and Opera). </p>

            <div class="flex-center">
                <img class="img-fluid z-depth-0 my-3" src="https://mdbootstrap.com/img/Mockups/Transparent/Small/img%20(4).png" alt="MDB website displayed on iPad"
                    width="350" />
            </div>

            <p><strong>“Bootstrap Tutorial” which we have prepared for you, will guide you progressively through Bootstrap elements, step by step.</strong></p>
            <p>It is split into three sections.</p>

            <p>Each of them will navigate you through the creation process of particular web projects.</p>

            <p>Thanks to that, you will get a chance to learn different aspects regarding Bootstrap.</p>

            <p>Each lesson is provided with series of practical examples, and each of those examples brings a meaningful web
                design knowledge.</p>

            <p>In this tutorial, you will use our Bootstrap overlay, which provides a marvelous appearance consistent with the
                standards of Material Design by Google.</p>

            <p>The overlay is called <strong>Material Design for Bootstrap</strong>, and you can get it for free from our website.</p>

            <p>If you want to get more excited and see possibilities offered by MDBootstrap, you can read more about it here:</p>

            <div class="text-center">

                <a href="https://mdbootstrap.com/material-design-for-bootstrap/" target="_blank" class="btn btn-primary mb-4">About MDBootstrap</a>

            </div>

            <p>…or you can jump directly into the tutorial and start to create some amazing things right now!</p>

        </div>
        <!--/Description-->

    </section>
    <!--/Section: Description-->

    <hr class="between-sections">


    <!--Section: Lessons-->
    <section class="section">


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

            <!--Section heading-->
            <h1 class="section-heading">Start learning</h1>
            <!--Section sescription-->
            <p class="section-description">Each of the following lessons will progresively guide you on your Bootstrap journey and will familiarize you
                with the most crucial web development aspects. </p>

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

                <!--First column-->
                <div class="col-md-5 mb-r">
                    <!--Featured image-->
                    <div class="view overlay hm-white-slight">
                        <img src="https://mdbootstrap.com/img/Others/tutorials/corporate.jpg">
                        <a href="https://mdbootstrap.com/mdb-quick-start/">
                            <div class="mask"></div>
                        </a>
                    </div>
                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-7 mb-r">
                    <!--Excerpt-->
                    <h5 class="blue-text mb-3"><i class="fa fa-graduation-cap mr-2"></i>Beginner (Step 1)</h5>
                    <h4>5 min Quick Start</h4>
                    <p>Start your journey with a basic setup of MDB UI kit and let us explain to you it's simple file structure.
                        You will also create your first MDB website.</p>
                    <p>by <a><strong>Michal Szymanski</strong></a></p>
                    <a class="btn btn-primary" href="https://mdbootstrap.com/mdb-quick-start/">Start tutorial <i class="fa fa-arrow-right ml-1"></i></a>
                </div>
                <!--/Second column-->

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

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

                <!--First column-->
                <div class="col-md-5 mb-r">
                    <!--Featured image-->
                    <div class="view overlay hm-white-slight">
                        <img src="https://mdbootstrap.com/img/Others/tutorials/landing.jpg">
                        <a href="https://mdbootstrap.com/full-page-background-image/">
                            <div class="mask"></div>
                        </a>
                    </div>
                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-7 mb-r">
                    <!--Excerpt-->
                    <h5 class="blue-text mb-3"><i class="fa fa-graduation-cap mr-2"></i>Beginner (Step 2)</h5>
                    <h4>Landing Page</h4>
                    <p>Learn about Bootstrap masks, cards and shadows while you create a basic Landing Page enriched with contact
                        section, navigation and animations.</p>
                    <p>by <a><strong>Michal Szymanski</strong></a></p>
                    <a class="btn btn-primary" href="https://mdbootstrap.com/full-page-background-image/">Start tutorial <i class="fa fa-arrow-right ml-1"></i></a>
                </div>
                <!--/Second column-->

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

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

                <!--First column-->
                <div class="col-md-5 mb-r">
                    <!--Featured image-->
                    <div class="view overlay hm-white-slight">
                        <img src="https://mdbootstrap.com/img/Others/tutorials/carousel.jpg">
                        <a href="https://mdbootstrap.com/full-page-carousel/">
                            <div class="mask"></div>
                        </a>
                    </div>
                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-7 mb-r">
                    <!--Excerpt-->
                    <h5 class="indigo-text mb-3"><i class="fa fa-star mr-2"></i>Intermediate (Step 3)</h5>
                    <h4>Template with Full Page Carousel</h4>
                    <p>Move on to another level by learning about full page image and video carousels - incredibly popular designs.</p>
                    <p>by <a><strong>Michal Szymanski</strong></a></p>
                    <a class="btn btn-primary" href="https://mdbootstrap.com/full-page-carousel/">Start tutorial <i class="fa fa-arrow-right ml-1"></i></a>
                </div>
                <!--/Second column-->

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

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

                <!--First column-->
                <div class="col-md-5 mb-r">
                    <!--Featured image-->
                    <div class="view overlay hm-white-slight">
                        <img src="https://mdbootstrap.com/img/Others/tutorials/advanced-landing.jpg">
                        <a href="https://mdbootstrap.com/advanced-landing-page-with-mdb/">
                            <div class="mask"></div>
                        </a>
                    </div>
                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-7 mb-r">
                    <!--Excerpt-->
                    <h5 class="indigo-text mb-3"><i class="fa fa-star mr-2"></i>Intermediate (Step 4)</h5>
                    <h4>Advanced Landing Page</h4>
                    <p>Sharpen your skills by jumping into another lesson with more advanced components such as forms, pircing
                        and contact sections, and CTA's. </p>
                    <p>by <a><strong>Michal Szymanski</strong></a></p>
                    <a class="btn btn-primary" href="https://mdbootstrap.com/advanced-landing-page-with-mdb/">Start tutorial <i class="fa fa-arrow-right ml-1"></i></a>
                </div>
                <!--/Second column-->

            </div>
            <!--/Fourth row-->

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

                <!--First column-->
                <div class="col-md-5 mb-r">
                    <!--Featured image-->
                    <div class="view overlay hm-white-slight">
                        <img src="https://mdbootstrap.com/img/Others/tutorials/e-commerce.jpg">
                        <a href="https://mdbootstrap.com/bootstrap-ecommerce-tutorial/">
                            <div class="mask"></div>
                        </a>
                    </div>
                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-7 mb-r">
                    <!--Excerpt-->
                    <h5 class="purple-text mb-3"><i class="fa fa-diamond mr-2"></i>Advanced (Step 5)</h5>
                    <h4>E-commerce</h4>
                    <p>Create a fully functional E-commerce page while you learn about modals, advanced product cards, collections
                        and our favorite navigation style.</p>
                    <p>by <a><strong>Michal Szymanski</strong></a></p>
                    <a class="btn btn-primary" href="https://mdbootstrap.com/bootstrap-ecommerce-tutorial/">Start tutorial <i class="fa fa-arrow-right ml-1"></i></a>
                </div>
                <!--/Second column-->

            </div>
            <!--/Fifth row-->

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

                <!--First column-->
                <div class="col-md-5 mb-r">
                    <!--Featured image-->
                    <div class="view overlay hm-white-slight">
                        <img src="https://mdbootstrap.com/img/Others/tutorials/product-page.jpg">
                        <a href="https://mdbootstrap.com/pp-basic-structure/">
                            <div class="mask"></div>
                        </a>
                    </div>
                </div>
                <!--/First column-->

                <!--Second column-->
                <div class="col-md-7 mb-r">
                    <!--Excerpt-->
                    <h5 class="purple-text mb-3"><i class="fa fa-diamond mr-2"></i>Advanced (Step 6)</h5>
                    <h4>Product Page</h4>
                    <p>Learn about the importance of colors and page layouts in design by constructing an engaging Product Page
                        enhanced with rich product card and reviews sections.</p>
                    <p>by <a><strong>Piotr Bender</strong></a></p>
                    <a class="btn btn-primary" href="https://mdbootstrap.com/pp-basic-structure/">Start tutorial <i class="fa fa-arrow-right ml-1"></i></a>
                </div>
                <!--/Second column-->

            </div>
            <!--/Sixth row-->

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


    </section>
    <!--/Section: Lessons-->


</div>
<!-- /Tutorial content-->