Edit these docs

Modal examples & templates

Bootstrap Modal examples & templates

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

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.

#	Product name	Price
1	Product 1	100$
2	Product 2	100$
3	Product 3	100$
4	Product 4	100$
5	Total	400$

Modal Cookies

HTML



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

HTML



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

HTML




        <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

HTML



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

HTML



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

HTML



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

HTML




        <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

#	Product name	Price
1	Product 1	100$
2	Product 2	100$
3	Product 3	100$
4	Product 4	100$
5	Total	400$

HTML



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

HTML



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

HTML



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

HTML



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

Product Name

$49 $89

Collapsible Group Item #1

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.

Collapsible Group Item #2

Collapsible Group Item #3

Select color

Select size

HTML
JavaScript



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

HTML



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

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!