Modal examples & templates

Bootstrap Modal examples & templates

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

Multiple examples and advanced usage. Modal Cookies, Coupon, Discount, Abandoned Card, Related Content, Poll, Cart, Youtube, Product and many more.

If you want to learn about the advanced usage of Modals, read our free tutorial Creating an Automated Web Application .

See also: Modal Core Documentation, Modal Forms, and Modal Styles.

Click the buttons below to launch the modals demos.


Modal Cookies

Cookie consent is a simple, not-invasive popup which displays information about cookies and privacy policy.

        
            

        <!-- Button trigger modal-->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCookie1">Cookies</button>

        <!--Modal: modalCookie-->
        <div class="modal fade top" id="modalCookie1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true" data-backdrop="true">
          <div class="modal-dialog modal-frame modal-top modal-notify modal-info" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Body-->
              <div class="modal-body">
                <div class="row d-flex justify-content-center align-items-center">

                  <p class="pt-3 pr-2">We use cookies to improve your website experience</p>

                  <a type="button" class="btn btn-primary">Learn more <i class="fas fa-book ml-1"></i></a>
                  <a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Ok, thanks</a>
                </div>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!--Modal: modalCookie-->

      
        
    

Modal Coupon

With coupon pop-up modal you can offer your users a special coupon code to use it at checkout..

        
            

        <!--Section: Live preview-->
        
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCoupon">Launch
        modal</button>

      <!--Modal: modalCoupon-->
        <div class="modal fade top" id="modalCoupon" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true" data-backdrop="true">
          <div class="modal-dialog modal-frame modal-top modal-notify modal-success" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Body-->
              <div class="modal-body">
                <div class="row d-flex justify-content-center align-items-center">

                  <h2>
                    <span class="badge">v52gs1</span>
                  </h2>
                  <p class="pt-3 mx-4">We have a gift for you! Use this code to get a
                    <strong>10% discount</strong>.</p>

                  <a type="button" class="btn btn-success">Get it
                    <i class="fas fa-book ml-1 white-text"></i>
                  </a>
                  <a type="button" class="btn btn-outline-success waves-effect" data-dismiss="modal">No, thanks</a>
                </div>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!--Modal: modalCoupon-->

        <!--Section: Live preview-->

      
        
    

Modal Discount

Give your users the opportunity to enjoy the special deal you offer in the discount modal

        
            


        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalDiscount">Launch
          modal</button>
        
            <!--Modal: modalDiscount-->
            <div class="modal fade right" id="modalDiscount" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
              aria-hidden="true" data-backdrop="true">
              <div class="modal-dialog modal-side modal-bottom-right modal-notify modal-danger" role="document">
                <!--Content-->
                <div class="modal-content">
                  <!--Header-->
                  <div class="modal-header">
                    <p class="heading">Discount offer:
                      <strong>10% off</strong>
                    </p>
        
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true" class="white-text">&times;</span>
                    </button>
                  </div>
        
                  <!--Body-->
                  <div class="modal-body">
        
                    <div class="row">
                      <div class="col-3">
                        <p></p>
                        <p class="text-center">
                          <i class="fas fa-gift fa-4x"></i>
                        </p>
                      </div>
        
                      <div class="col-9">
                        <p>Sharing is caring. Therefore, from time to time we like to give our visitors small gifts. Today is
                          one of those days.</p>
                        <p>
                          <strong>Copy the following code and use it at the checkout. It's valid for
                            <u>one day</u>.</strong>
                        </p>
                        <h2>
                          <span class="badge">v52gs1</span>
                        </h2>
        
                      </div>
                    </div>
                  </div>
        
                  <!--Footer-->
                  <div class="modal-footer flex-center">
                    <a href="https://mdbootstrap.com/docs/standard/pro/" class="btn btn-danger">Get it
                      now
                      <i class="far fa-gem ml-1 white-text"></i>
                    </a>
                    <a type="button" class="btn btn-outline-danger waves-effect" data-dismiss="modal">No, thanks</a>
                  </div>
                </div>
                <!--/.Content-->
              </div>
            </div>
            <!--Modal: modalDiscount-->

      
        
    

Modal Related content

Display content of interest to users in a modal.

        
            

        <!-- Button trigger modal-->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalRelatedContent">Launch
          modal</button>

        <!--Modal: modalRelatedContent-->
        <div class="modal fade right" id="modalRelatedContent" tabindex="-1" role="dialog"
          aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
          <div class="modal-dialog modal-side modal-bottom-right modal-notify modal-info" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header">
                <p class="heading">Related article</p>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true" class="white-text">&times;</span>
                </button>
              </div>

              <!--Body-->
              <div class="modal-body">

                <div class="row">
                  <div class="col-5">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(55).webp"
                      class="img-fluid" alt="">
                  </div>

                  <div class="col-7">
                    <p><strong>My travel to paradise</strong></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit [...]</p>
                    <button type="button" class="btn btn-info btn-md">Read more</button>

                  </div>
                </div>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!--Modal: modalRelatedContent-->

      
        
    

Modal Abandoned cart

Don't let the user forget about the product they left in the shopping cart using abandoned cart modal.

        
            

        <!-- Button trigger modal-->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalAbandonedCart">Launch
          modal</button>

        <!-- Modal: modalAbandonedCart-->
        <div class="modal fade right" id="modalAbandonedCart" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true" data-backdrop="false">
          <div class="modal-dialog modal-side modal-bottom-right modal-notify modal-info" role="document">
            <!--Content-->
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header">
                <p class="heading">Product in the cart
                </p>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true" class="white-text">&times;</span>
                </button>
              </div>

              <!--Body-->
              <div class="modal-body">

                <div class="row">
                  <div class="col-3">
                    <p></p>
                    <p class="text-center"><i class="fas fa-shopping-cart fa-4x"></i></p>
                  </div>

                  <div class="col-9">
                    <p>Do you need more time to make a purchase decision?</p>
                    <p>No pressure, your product will be waiting for you in the cart.</p>
                  </div>
                </div>
              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-info">Go to cart</a>
                <a type="button" class="btn btn-outline-info waves-effect" data-dismiss="modal">Cancel</a>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!-- Modal: modalAbandonedCart-->

      
        
    

Modal Confirm delete

Allow users to confirm their action one more time before making a final decision.

        
            

        <!-- Button trigger modal-->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalConfirmDelete">Launch
          modal</button>

        <!--Modal: modalConfirmDelete-->
        <div class="modal fade" id="modalConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-sm modal-notify modal-danger" role="document">
            <!--Content-->
            <div class="modal-content text-center">
              <!--Header-->
              <div class="modal-header d-flex justify-content-center">
                <p class="heading">Are you sure?</p>
              </div>

              <!--Body-->
              <div class="modal-body">

                <i class="fas fa-times fa-4x animated rotateIn"></i>

              </div>

              <!--Footer-->
              <div class="modal-footer flex-center">
                <a href="" class="btn  btn-outline-danger">Yes</a>
                <a type="button" class="btn  btn-danger waves-effect" data-dismiss="modal">No</a>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!--Modal: modalConfirmDelete-->

      
        
    

Modal Poll MDB Pro component

Get feedback on your product from users using the poll modal.

        
            


        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPoll-1">Launch
          modal</button>

        <!-- Modal: modalPoll -->
        <div class="modal fade right" id="modalPoll-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
          aria-hidden="true" data-backdrop="false">
          <div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header">
                <p class="heading lead">Feedback request
                </p>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true" class="white-text">×</span>
                </button>
              </div>

              <!--Body-->
              <div class="modal-body">
                <div class="text-center">
                  <i class="far fa-file-alt fa-4x mb-3 animated rotateIn"></i>
                  <p>
                    <strong>Your opinion matters</strong>
                  </p>
                  <p>Have some ideas how to improve our product?
                    <strong>Give us your feedback.</strong>
                  </p>
                </div>

                <hr>

                <!-- Radio -->
                <p class="text-center">
                  <strong>Your rating</strong>
                </p>
                <div class="form-check mb-4">
                  <input class="form-check-input" name="group1" type="radio" id="radio-179" value="option1" checked>
                  <label class="form-check-label" for="radio-179">Very good</label>
                </div>

                <div class="form-check mb-4">
                  <input class="form-check-input" name="group1" type="radio" id="radio-279" value="option2">
                  <label class="form-check-label" for="radio-279">Good</label>
                </div>

                <div class="form-check mb-4">
                  <input class="form-check-input" name="group1" type="radio" id="radio-379" value="option3">
                  <label class="form-check-label" for="radio-379">Mediocre</label>
                </div>
                <div class="form-check mb-4">
                  <input class="form-check-input" name="group1" type="radio" id="radio-479" value="option4">
                  <label class="form-check-label" for="radio-479">Bad</label>
                </div>
                <div class="form-check mb-4">
                  <input class="form-check-input" name="group1" type="radio" id="radio-579" value="option5">
                  <label class="form-check-label" for="radio-579">Very bad</label>
                </div>
                <!-- Radio -->

                <p class="text-center">
                  <strong>What could we improve?</strong>
                </p>
                <!--Basic textarea-->
                <div class="md-form">
                  <textarea type="text" id="form79textarea" class="md-textarea form-control" rows="3"></textarea>
                  <label for="form79textarea">Your message</label>
                </div>

              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-primary waves-effect waves-light">Send
                  <i class="fa fa-paper-plane ml-1"></i>
                </a>
                <a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Cancel</a>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal: modalPoll -->


      
        
    

Modal Cart

You can preview the shopping cart with products that your customers have added in a modal.

        
            

        <!-- Button trigger modal-->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalCart">Launch modal</button>

        <!-- Modal: modalCart -->
        <div class="modal fade" id="modalCart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
          aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <!--Header-->
              <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Your cart</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
              <!--Body-->
              <div class="modal-body">

                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Product name</th>
                      <th>Price</th>
                      <th>Remove</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row">1</th>
                      <td>Product 1</td>
                      <td>100$</td>
                      <td><a><i class="fas fa-times"></i></a></td>
                    </tr>
                    <tr>
                      <th scope="row">2</th>
                      <td>Product 2</td>
                      <td>100$</td>
                      <td><a><i class="fas fa-times"></i></a></td>
                    </tr>
                    <tr>
                      <th scope="row">3</th>
                      <td>Product 3</td>
                      <td>100$</td>
                      <td><a><i class="fas fa-times"></i></a></td>
                    </tr>
                    <tr>
                      <th scope="row">4</th>
                      <td>Product 4</td>
                      <td>100$</td>
                      <td><a><i class="fas fa-times"></i></a></td>
                    </tr>
                    <tr class="total">
                      <th scope="row">5</th>
                      <td>Total</td>
                      <td>400$</td>
                      <td></td>
                    </tr>
                  </tbody>
                </table>

              </div>
              <!--Footer-->
              <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
                <button class="btn btn-primary">Checkout</button>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal: modalCart -->

      
        
    

Modal Push

Push notifications are one of the most effective ways to inform users about special offers and important events on your website. Display a push modal on users' first visit to your website and allow them to sign up for your list.

        
            

        <!-- Button trigger modal-->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPush">Launch modal</button>

        <!--Modal: modalPush-->
        <div class="modal fade" id="modalPush" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-notify modal-info" role="document">
            <!--Content-->
            <div class="modal-content text-center">
              <!--Header-->
              <div class="modal-header d-flex justify-content-center">
                <p class="heading">Be always up to date</p>
              </div>

              <!--Body-->
              <div class="modal-body">

                <i class="fas fa-bell fa-4x animated rotateIn mb-4"></i>

                <p>Do you want to receive the push notification about the newest posts?</p>

              </div>

              <!--Footer-->
              <div class="modal-footer flex-center">
                <a href="https://mdbootstrap.com/docs/standard/pro/" class="btn btn-info">Yes</a>
                <a type="button" class="btn btn-outline-info waves-effect" data-dismiss="modal">No</a>
              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!--Modal: modalPush-->

      
        
    

Modal YouTube MDB Pro component

Display youtube videos in a pop-up modal.

        
            

        <!-- Button trigger modal-->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalYT">Launch modal</button>

        <!--Modal: modalYT-->
        <div class="modal fade" id="modalYT" 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">

                <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A3PDXmYoF5U"
                    allowfullscreen></iframe>
                </div>

              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center flex-column flex-md-row">
                <span class="mr-4">Spread the word!</span>
                <div>
                  <a type="button" class="btn-floating btn-sm btn-fb">
                    <i class="fab fa-facebook-f"></i>
                  </a>
                  <!--Twitter-->
                  <a type="button" class="btn-floating btn-sm btn-tw">
                    <i class="fab fa-twitter"></i>
                  </a>
                  <!--Google +-->
                  <a type="button" class="btn-floating btn-sm btn-gplus">
                    <i class="fab fa-google-plus-g"></i>
                  </a>
                  <!--Linkedin-->
                  <a type="button" class="btn-floating btn-sm btn-ins">
                    <i class="fab fa-linkedin-in"></i>
                  </a>
                </div>
                <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4"
                  data-dismiss="modal">Close</button>


              </div>

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

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

      
        
    

Modal Vimeo MDB Pro component

Display vimeo videos in a pop-up modal.

        
            

        <!-- Button trigger modal-->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalVM">Launch modal</button>

        <!--Modal: modalVM-->
        <div class="modal fade" id="modalVM" 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">

                <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                  <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/115098447"
                    allowfullscreen></iframe>
                </div>

              </div>

              <!--Footer-->
              <div class="modal-footer justify-content-center flex-column flex-md-row">
                <span class="mr-4">Spread the word!</span>
                <div>
                  <a type="button" class="btn-floating btn-sm btn-fb">
                    <i class="fab fa-facebook-f"></i>
                  </a>
                  <!--Twitter-->
                  <a type="button" class="btn-floating btn-sm btn-tw">
                    <i class="fab fa-twitter"></i>
                  </a>
                  <!--Google +-->
                  <a type="button" class="btn-floating btn-sm btn-gplus">
                    <i class="fab fa-google-plus-g"></i>
                  </a>
                  <!--Linkedin-->
                  <a type="button" class="btn-floating btn-sm btn-ins">
                    <i class="fab fa-linkedin-in"></i>
                  </a>
                </div>
                <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4"
                  data-dismiss="modal">Close</button>

              </div>

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

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

      
        
    

Modal Product MDB Pro component

Advanced modal displaying carousels with product photos, description in collapse group and possibility to select specific data via dropdown.

        
            

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalQuickView">Launch
          modal</button>
        <!-- Modal: modalQuickView -->
        <div class="modal fade" id="modalQuickView" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
          aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-body">
                <div class="row">
                  <div class="col-lg-5">
                    <!--Carousel Wrapper-->
                    <div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails"
                      data-ride="carousel">
                      <!--Slides-->
                      <div class="carousel-inner" role="listbox">
                        <div class="carousel-item active">
                          <img class="d-block w-100"
                            src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(23).webp"
                            alt="First slide">
                        </div>
                        <div class="carousel-item">
                          <img class="d-block w-100"
                            src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(24).webp"
                            alt="Second slide">
                        </div>
                        <div class="carousel-item">
                          <img class="d-block w-100"
                            src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(25).webp"
                            alt="Third slide">
                        </div>
                      </div>
                      <!--/.Slides-->
                      <!--Controls-->
                      <a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </a>
                      <a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                      <!--/.Controls-->
                      <ol class="carousel-indicators">
                        <li data-target="#carousel-thumb" data-slide-to="0" class="active">
                          <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(23).webp" width="60">
                        </li>
                        <li data-target="#carousel-thumb" data-slide-to="1">
                          <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(24).webp" width="60">
                        </li>
                        <li data-target="#carousel-thumb" data-slide-to="2">
                          <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(25).webp" width="60">
                        </li>
                      </ol>
                    </div>
                    <!--/.Carousel Wrapper-->
                  </div>
                  <div class="col-lg-7">
                    <h2 class="h2-responsive product-name">
                      <strong>Product Name</strong>
                    </h2>
                    <h4 class="h4-responsive">
                      <span class="green-text">
                        <strong>$49</strong>
                      </span>
                      <span class="grey-text">
                        <small>
                          <s>$89</s>
                        </small>
                      </span>
                    </h4>

                    <!--Accordion wrapper-->
                    <div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">

                      <!-- Accordion card -->
                      <div class="card">

                        <!-- Card header -->
                        <div class="card-header" role="tab" id="headingOne1">
                          <a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true"
                            aria-controls="collapseOne1">
                            <h5 class="mb-0">
                              Collapsible Group Item #1 <i class="fas fa-angle-down rotate-icon"></i>
                            </h5>
                          </a>
                        </div>

                        <!-- Card body -->
                        <div id="collapseOne1" class="collapse show" role="tabpanel" aria-labelledby="headingOne1"
                          data-parent="#accordionEx">
                          <div class="card-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
                            squid. 3
                            wolf moon officia aute,
                            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                          </div>
                        </div>

                      </div>
                      <!-- Accordion card -->

                      <!-- Accordion card -->
                      <div class="card">

                        <!-- Card header -->
                        <div class="card-header" role="tab" id="headingTwo2">
                          <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo2"
                            aria-expanded="false" aria-controls="collapseTwo2">
                            <h5 class="mb-0">
                              Collapsible Group Item #2 <i class="fas fa-angle-down rotate-icon"></i>
                            </h5>
                          </a>
                        </div>

                        <!-- Card body -->
                        <div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
                          data-parent="#accordionEx">
                          <div class="card-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
                            squid. 3
                            wolf moon officia aute,
                            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                          </div>
                        </div>

                      </div>
                      <!-- Accordion card -->

                      <!-- Accordion card -->
                      <div class="card">

                        <!-- Card header -->
                        <div class="card-header" role="tab" id="headingThree3">
                          <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseThree3"
                            aria-expanded="false" aria-controls="collapseThree3">
                            <h5 class="mb-0">
                              Collapsible Group Item #3 <i class="fas fa-angle-down rotate-icon"></i>
                            </h5>
                          </a>
                        </div>

                        <!-- Card body -->
                        <div id="collapseThree3" class="collapse" role="tabpanel" aria-labelledby="headingThree3"
                          data-parent="#accordionEx">
                          <div class="card-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
                            squid. 3
                            wolf moon officia aute,
                            non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                          </div>
                        </div>

                      </div>
                      <!-- Accordion card -->

                    </div>
                    <!-- Accordion wrapper -->


                    <!-- Add to Cart -->
                    <div class="card-body">
                      <div class="row">
                        <div class="col-md-6">

                          <select class="md-form mdb-select colorful-select dropdown-primary">
                            <option value="" disabled selected>Choose your option</option>
                            <option value="1">White</option>
                            <option value="2">Black</option>
                            <option value="3">Pink</option>
                          </select>
                          <label class="mdb-main-label">Select color</label>

                        </div>
                        <div class="col-md-6">

                          <select class="md-form mdb-select colorful-select dropdown-primary">
                            <option value="" disabled selected>Choose your option</option>
                            <option value="1">XS</option>
                            <option value="2">S</option>
                            <option value="3">L</option>
                          </select>
                          <label class="mdb-main-label">Select size</label>

                        </div>
                      </div>
                      <div class="text-center">

                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button class="btn btn-primary">Add to cart
                          <i class="fas fa-cart-plus ml-2" aria-hidden="true"></i>
                        </button>
                      </div>
                    </div>
                    <!-- /.Add to Cart -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      
        
    
        
            
        // Material Select Initialization
        $(document).ready(function() {
          $('.mdb-select').materialSelect();
        });
      
        
    

Modal Social share MDB Pro component

Display social media share buttons in the modal.

        
            

        <!-- Button trigger modal-->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalSocial">Launch
          modal</button>

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

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

              <!--Header-->
              <div class="modal-header light-blue darken-3 white-text">
                <h4 class="title"><i class="fas fa-users"></i> Spreed the word!</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
              </div>

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


                <!--Facebook-->
                <a type="button" class="btn-floating btn-fb"><i class="fab fa-facebook-f"></i></a>
                <!--Twitter-->
                <a type="button" class="btn-floating btn-tw"><i class="fab fa-twitter"></i></a>
                <!--Google +-->
                <a type="button" class="btn-floating btn-gplus"><i class="fab fa-google-plus-g"></i></a>
                <!--Linkedin-->
                <a type="button" class="btn-floating btn-li"><i class="fab fa-linkedin-in"></i></a>
                <!--Instagram-->
                <a type="button" class="btn-floating btn-ins"><i class="fab fa-instagram"></i></a>
                <!--Pinterest-->
                <a type="button" class="btn-floating btn-pin"><i class="fab fa-pinterest"></i></a>
                <!--Youtube-->
                <a type="button" class="btn-floating btn-yt"><i class="fab fa-youtube"></i></a>
                <!--Dribbble-->
                <a type="button" class="btn-floating btn-dribbble"><i class="fab fa-dribbble"></i></a>
                <!--Vkontakte-->
                <a type="button" class="btn-floating btn-vk"><i class="fab fa-vk"></i></a>
                <!--Stack Overflow-->
                <a type="button" class="btn-floating btn-so"><i class="fab fa-stack-overflow"></i></a>
                <!--Slack-->
                <a type="button" class="btn-floating btn-slack"><i class="fab fa-slack-hash"></i></a>
                <!--Github-->
                <a type="button" class="btn-floating btn-git"><i class="fab fa-github"></i></a>
                <!--Comments-->
                <a type="button" class="btn-floating btn-comm"><i class="fas fa-comments"></i></a>
                <!--Email-->
                <a type="button" class="btn-floating btn-email"><i class="fas fa-envelope"></i></a>

              </div>

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

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