Edit these docs

Google map

Bootstrap Google Map

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

As of July 16, 2018, an API Key is required to use the Google Maps feature. Click here to get an API Key

Bootstrap Google Map is a component which displays a map of an area defined by a user. Maps can be used in components like forms and modals.

They are mostly used on Contact and About pages to increase awareness of your location.

It's quite easy to implement a Google map in your project since all it requires is a small piece of JS code.

Examples of Bootstrap Google Maps use:

Traveling blog with a map of every journey
A Contact page
An About section with your location

See the following Bootstrap Google maps examples:



        <!--Google map-->
        <div id="map-container-google-1" class="z-depth-1-half map-container" style="height: 500px">
          <iframe src="https://maps.google.com/maps?q=manhatan&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"
            style="border:0" allowfullscreen></iframe>
        </div>

        <!--Google Maps-->



        .map-container{
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        height:0;
        }
        .map-container iframe{
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
        }

Custom map

HTML
CSS



        <!--Google map-->
        <div id="map-container-google-2" class="z-depth-1-half map-container" style="height: 500px">
          <iframe src="https://maps.google.com/maps?q=chicago&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"
            style="border:0" allowfullscreen></iframe>
        </div>

        <!--Google Maps-->



        .map-container-2{
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        height:0;
        }
        .map-container-2 iframe{
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
        }

Satellite map

HTML
CSS



        <!--Google map-->
        <div id="map-container-google-3" class="z-depth-1-half map-container-3">
          <iframe src="https://maps.google.com/maps?q=warsaw&t=k&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"
            style="border:0" allowfullscreen></iframe>
        </div>



        .map-container-3{
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        height:0;
        }
        .map-container-3 iframe{
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
        }

Full page map

Click the button below to see a full page Google map live preview.

Full page map

HTML
CSS



        <!--Main layout-->
        <main class=" m-0 p-0">
          <div class="container-fluid m-0 p-0">

            <!--Google map-->
            <div id="map-container-google-4" class="z-depth-1-half map-container-4" style="height: 500px">
              <iframe src="https://maps.google.com/maps?q=manhatan&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"
                style="border:0" allowfullscreen></iframe>
            </div>

          </div>
        </main>
        <!--Main layout-->


        .map-container-4{
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        height:0;
        }
        .map-container-4 iframe{
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
        }

Map within card MDB Pro component

Regular map

Custom map

HTML
CSS



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

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

            <!--Card-->
            <div class="card card-cascade narrower">

              <!--Card image-->
              <div class="view view-cascade gradient-card-header blue-gradient">
                <h5 class="mb-0">Regular map</h5>
              </div>
              <!--/Card image-->

              <!--Card content-->
              <div class="card-body card-body-cascade text-center">

                <!--Google map-->
                <div id="map-container-google-8" class="z-depth-1-half map-container-5" style="height: 300px">
                  <iframe src="https://maps.google.com/maps?q=Barcelona&t=&z=13&ie=UTF8&iwloc=&output=embed"
                    frameborder="0" style="border:0" allowfullscreen></iframe>
                </div>

              </div>
              <!--/.Card content-->

            </div>
            <!--/.Card-->

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

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

            <!--Card-->
            <div class="card card-cascade narrower">

              <!--Card image-->
              <div class="view view-cascade gradient-card-header peach-gradient">
                <h5 class="mb-0">Custom map</h5>
              </div>
              <!--/Card image-->

              <!--Card content-->
              <div class="card-body card-body-cascade text-center">

                <!--Google map-->
                <div id="map-container-google-9" class="z-depth-1-half map-container-5" style="height: 300px">
                  <iframe src="https://maps.google.com/maps?q=Madryt&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"
                    style="border:0" allowfullscreen></iframe>
                </div>


              </div>
              <!--/.Card content-->

            </div>
            <!--/.Card-->

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

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



        .map-container-5{
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        height:0;
        }
        .map-container-5 iframe{
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
        }

Map within a contact form MDB Pro component

Contact us

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.

Write to us:

We'll write rarely, but with only the best content.

Your name

Your email

Subject

Textarea

San Francisco, CA 94126

United States

+ 01 234 567 89

Mon - Fri, 8:00-22:00

info@gmail.com

sale@gmail.com

HTML
CSS



        <!--Section: Contact v.1-->
        <section class="section pb-5">

          <!--Section heading-->
          <h2 class="section-heading h1 pt-4">Contact us</h2>
          <!--Section description-->
          <p class="section-description pb-4">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.</p>

          <div class="row">

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

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

                <div class="card-body">
                  <!--Header-->
                  <div class="form-header blue accent-1">
                    <h3><i class="fas fa-envelope"></i> Write to us:</h3>
                  </div>

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

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

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

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

                  <div class="md-form">
                    <i class="fas fa-pencil-alt prefix grey-text"></i>
                    <textarea id="form-text" class="form-control md-textarea" rows="3"></textarea>
                    <label for="form-text">Icon Prefix</label>
                  </div>

                  <div class="text-center mt-4">
                    <button class="btn btn-light-blue">Submit</button>
                  </div>

                </div>

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

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

            <!--Grid column-->
            <div class="col-lg-7">

              <!--Google map-->
              <div id="map-container-google-11" class="z-depth-1-half map-container-6" style="height: 400px">
                <iframe src="https://maps.google.com/maps?q=new%20delphi&t=&z=13&ie=UTF8&iwloc=&output=embed"
                  frameborder="0" style="border:0" allowfullscreen></iframe>
              </div>

              <br>
              <!--Buttons-->
              <div class="row text-center">
                <div class="col-md-4">
                  <a class="btn-floating blue accent-1"><i class="fas fa-map-marker-alt"></i></a>
                  <p>San Francisco, CA 94126</p>
                  <p>United States</p>
                </div>

                <div class="col-md-4">
                  <a class="btn-floating blue accent-1"><i class="fas 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 blue accent-1"><i class="fas fa-envelope"></i></a>
                  <p>info@gmail.com</p>
                  <p>sale@gmail.com</p>
                </div>
              </div>

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

          </div>

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



        .map-container-6{
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        height:0;
        }
        .map-container-6 iframe{
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
        }

A full-width map within a contact form MDB Pro component

Contact us

Your message

Send Message

HTML
CSS



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

          <!--Section heading-->
          <h2 class="section-heading h1 pt-4 mb-5">Contact us</h2>

          <div class="card">

            <div class="card-body">

              <!--Google map-->
              <div id="map-container-google-12" class="z-depth-1-half map-container-7" style="height: 200px">
                <iframe src="https://maps.google.com/maps?q=Miami&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"
                  style="border:0" allowfullscreen></iframe>
              </div>

              <div class="row">

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

                    <div class="md-form">
                      <input type="text" id="contact-name" class="form-control">
                      <label for="contact-name" class="">Your name</label>
                    </div>

                    <div class="md-form">
                      <input type="text" id="contact-email" class="form-control">
                      <label for="contact-email" class="">Your email</label>
                    </div>

                    <div class="md-form">
                      <input type="text" id="contact-Subject" class="form-control">
                      <label for="contact-Subject" class="">Subject</label>
                    </div>

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

                <!--Grid column-->
                <div class="col-md-6 mb-4">
                  <div class="md-form primary-textarea">
                    <textarea id="contact-message" class="md-textarea form-control mb-0" rows="5" style="padding-bottom: 1.2rem;"></textarea>
                    <label for="contact-message">Your message</label>
                  </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-md-12">
                  <div class="text-center">
                    <a class="btn btn-mdb-color btn-block">Send Message</a>
                  </div>
                </div>
                <!--Grid column-->

              </div>

            </div>

          </div>

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



        .map-container-7{
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        height:0;
        }
        .map-container-7 iframe{
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
        }

Map within modal

HTML
CSS



        <div class="text-center">

          <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalRegular">Regular map modal</button>
          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSatellite">Satellite map
            modal</button>
          <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalCustom">Custom map
            modal</button>

        </div>

        <!--Modal: Name-->
        <div class="modal fade" id="modalRegular" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">

            <!--Content-->
            <div class="modal-content">

              <!--Body-->
              <div class="modal-body mb-0 p-0">

                <!--Google map-->
                <div id="map-container-google-16" class="z-depth-1-half map-container-9" style="height: 400px">
                  <iframe src="https://maps.google.com/maps?q=new%20delphi&t=&z=13&ie=UTF8&iwloc=&output=embed"
                    frameborder="0" style="border:0" allowfullscreen></iframe>
                </div>

              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">

                <button type="button" class="btn btn-info btn-md">Save location <i class="fas fa-map-marker-alt ml-1"></i></button>
                <button type="button" class="btn btn-outline-info btn-md" data-dismiss="modal">Close <i class="fas fa-times ml-1"></i></button>

              </div>

            </div>
            <!--/.Content-->

          </div>
        </div>
        <!--Modal: Name-->

        <!--Modal: Name-->
        <div class="modal fade" id="modalSatellite" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">

            <!--Content-->
            <div class="modal-content">

              <!--Body-->
              <div class="modal-body mb-0 p-0">

                <!--Google map-->
                <div id="map-container-google-17" class="z-depth-1-half map-container-10" style="height: 400px">
                  <iframe src="https://maps.google.com/maps?q=new%20york&t=k&z=13&ie=UTF8&iwloc=&output=embed"
                    frameborder="0" style="border:0" allowfullscreen></iframe>
                </div>

              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">

                <button type="button" class="btn btn-default btn-md">Save location <i class="fas fa-map-marker-alt ml-1"></i></button>
                <button type="button" class="btn btn-outline-default btn-md" data-dismiss="modal">Close <i class="fas fa-times ml-1"></i></button>

              </div>

            </div>
            <!--/.Content-->

          </div>
        </div>
        <!--Modal: Name-->

        <!--Modal: Name-->
        <div class="modal fade" id="modalCustom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">

            <!--Content-->
            <div class="modal-content">

              <!--Body-->
              <div class="modal-body mb-0 p-0">

                <!--Google map-->
                <div id="map-container-google-18" class="z-depth-1-half map-container-11"  style="height: 400px">
                  <iframe src="https://maps.google.com/maps?q=los%20angeles&t=&z=13&ie=UTF8&iwloc=&output=embed"
                    frameborder="0" style="border:0" allowfullscreen></iframe>
                </div>

              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">

                <button type="button" class="btn btn-secondary btn-md">Save location <i class="fas fa-map-marker-alt ml-1"></i></button>
                <button type="button" class="btn btn-outline-secondary btn-md" data-dismiss="modal">Close <i class="fas fa-times ml-1"></i></button>

              </div>

            </div>
            <!--/.Content-->

          </div>
        </div>
        <!--Modal: Name-->


        .map-container-9,
        .map-container-10,
        .map-container-11 {
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        height:0;
        }
        .map-container-9 iframe,
        .map-container-10 iframe,
        .map-container-11 iframe{
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
        }

Edit these docs

Getting started: download & setup

Download

All of the components and features are a part of the MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.

It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.

Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 10,000 components, dozens of plugins and much more cool features.

Click the button below to learn more about the MDBootstrap Pro package.

MDBootstrap Pro

Tutorials

If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.

5 min Quick Start Full Bootstrap Tutorial

Compilation & Customization

To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.

If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.

Compilation & Customization tutorial

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js

Integrations with Angular, React or Vue

Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue

Exclusive resources

MDBootstrap is a platform for web creators and MDB packages are only a part of it.

If you sign up you'll gain free access to other useful tools & resources including:

Community developed components & design projects
Technical support & community forum
CLI interface & free project hosting
Helpful articles & news agregators

...and much more!

Don't hesitate and sign up now!