Bootstrap contact sections

Contact section provides you a necessary information for your users to get in touch with you.

Contact v.1 Premium component

<!--Section: Contact v.1-->
<section class="section mb-4">

    <!--Section heading-->
    <h1 class="section-heading">Contact v.1</h1>
    <!--Section sescription-->
    <p class="section-description mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

    <div class="row">

        <!--First column-->
        <div class="col-md-5">

            <!--Form with header-->
            <div class="card">

                <div class="card-block">
                    <!--Header-->
                    <div class="form-header mdb-color">
                        <h3><i class="fa fa-envelope"></i> Write to us:</h3>
                    </div>

                    <p>We'll write rarely, but only the best content.</p>
                    <br>

                    <!--Body-->
                    <div class="md-form">
                        <i class="fa fa-user prefix"></i>
                        <input type="text" id="form3" class="form-control">
                        <label for="form3">Your name</label>
                    </div>

                    <div class="md-form">
                        <i class="fa fa-envelope prefix"></i>
                        <input type="text" id="form2" class="form-control">
                        <label for="form2">Your email</label>
                    </div>

                    <div class="md-form">
                        <i class="fa fa-tag prefix"></i>
                        <input type="text" id="form32" class="form-control">
                        <label for="form32">Subject</label>
                    </div>

                    <div class="md-form">
                        <i class="fa fa-pencil prefix"></i>
                        <textarea type="text" id="form8" class="md-textarea"></textarea>
                        <label for="form8">Icon Prefix</label>
                    </div>

                    <div class="text-center">
                        <button class="btn btn-ins">Submit</button>
                    </div>

                </div>

            </div>
            <!--/Form with header-->

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

        <!--Second column-->
        <div class="col-md-7">

            <!--Google map-->
            <div id="map-container" class="z-depth-1-half map-container" style="height: 400px"></div>

            <br>
            <!--Buttons-->
            <div class="row text-center">
                <div class="col-md-4">
                    <a class="btn-floating btn-small mdb-color"><i class="fa fa-map-marker"></i></a>
                    <p>New York, NY 10012</p>
                    <p>United States</p>
                </div>

                <div class="col-md-4">
                    <a class="btn-floating btn-small mdb-color"><i class="fa fa-phone"></i></a>
                    <p>+ 01 234 567 89</p>
                    <p>Mon - Fri, 8:00-22:00</p>
                </div>

                <div class="col-md-4">
                    <a class="btn-floating btn-small mdb-color"><i class="fa fa-envelope"></i></a>
                    <p>info@gmail.com</p>
                    <p>sale@gmail.com</p>
                </div>
            </div>

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

    </div>

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

Contact v.2 Premium component

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

    <!--Section heading-->
    <h1 class="section-heading">Contact v.2</h1>
    <!--Section sescription-->
    <p class="section-description mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam. Quia, minima?</p>

    <div class="row">

        <!--First column-->
        <div class="col-md-8">
            <form>
                <!--First row-->
                <div class="row">
                    <!--First column-->
                    <div class="col-md-6">
                        <div class="md-form">
                            <div class="md-form">
                                <input type="text" id="form41" class="form-control">
                                <label for="form41" class="">Your name</label>
                            </div>
                        </div>
                    </div>

                    <!--Second column-->
                    <div class="col-md-6">
                        <div class="md-form">
                            <div class="md-form">
                                <input type="text" id="form52" class="form-control">
                                <label for="form52" class="">Your email</label>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/.First row-->

                <!--Second row-->
                <div class="row">
                    <div class="col-md-12">
                        <div class="md-form">
                            <input type="text" id="form51" class="form-control">
                            <label for="form51" class="">Subject</label>
                        </div>
                    </div>
                </div>
                <!--/Second row-->

                <!--Third row-->
                <div class="row">
                    <!--First column-->
                    <div class="col-md-12">

                        <div class="md-form">
                            <textarea type="text" id="form76" class="md-textarea"></textarea>
                            <label for="form76">Your message</label>
                        </div>

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

            <div class="center-on-small-only">
                <a class="btn btn-ins">Send</a>
            </div>
        </div>
        <!--.First column-->

        <!--Second column-->
        <div class="col-md-4">
            <ul class="contact-icons">
                <li><i class="fa fa-map-marker fa-2x"></i>
                    <p>New York, NY 10012, USA</p>
                </li>

                <li><i class="fa fa-phone fa-2x"></i>
                    <p>+ 01 234 567 89</p>
                </li>

                <li><i class="fa fa-envelope fa-2x"></i>
                    <p>contact@mdbootstrap.com</p>
                </li>
            </ul>
        </div>
        <!--.Second column-->

    </div>
</section>
<!--/Section: Contact v.2-->