Edit these docs Rate these docs

Icon Button

Bootstrap Icon Button

Bootstrap icon button is a combination of a standard Bootstrap button with Font Awesome icon inside it. It may contain icon only or text with an icon.

Since icons are generally used to deal with intuitiveness of UI design, Bootstrap icons buttons tend to increase it.

It can either be used as icon only and icon + text combination.

See the following Bootstrap icon buttons examples:


Basic example

Font Awesome icons

Within MDB project you can use more than 1400 icons. Check out our documentation page to know all possible icons.



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

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

            <button type="button" class="btn btn-primary px-3"><i class="fab fa-android" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-default px-3"><i class="fas fa-balance-scale" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-secondary px-3"><i class="fas fa-birthday-cake" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-success px-3"><i class="far fa-thumbs-up" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-info px-3"><i class="fas fa-tint" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-warning px-3"><i class="fas fa-bolt" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-danger px-3"><i class="fas fa-users" aria-hidden="true"></i></button>

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

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

            <button type="button" class="btn btn-elegant"><i class="far fa-user pr-2" aria-hidden="true"></i>User</button>
            <button type="button" class="btn btn-unique"><i class="fas fa-wifi pr-2" aria-hidden="true"></i>Wifi</button>
            <button type="button" class="btn btn-pink"><i class="fas fa-plane pr-2" aria-hidden="true"></i>Plane</button>
            <button type="button" class="btn btn-purple"><i class="fas fa-heart pr-2" aria-hidden="true"></i>Heart</button>

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

          <!-- Grid column -->
          <div class="col-md-12">

            <button type="button" class="btn btn-outline-secondary waves-effect px-3"><i class="fas fa-trophy"
                aria-hidden="true"></i></button>
            <button type="button" class="btn btn-outline-info waves-effect px-3"><i class="fas fa-thumbtack"
                aria-hidden="true"></i></button>
            <button type="button" class="btn btn-outline-warning waves-effect px-3"><i class="fas fa-rocket" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-outline-primary waves-effect"><i class="fas fa-sun pr-2" aria-hidden="true"></i>Sunny</button>
            <button type="button" class="btn btn-outline-default waves-effect"><i class="fas fa-star pr-2" aria-hidden="true"></i>Star</button>

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

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

      

a

Additional button icons MDB Pro component



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

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

            <a type="button" class="btn-floating deep-purple"><i class="fab fa-youtube" aria-hidden="true"></i></a>
            <a type="button" class="btn-floating indigo"><i class="fab fa-google-wallet" aria-hidden="true"></i></a>
            <a type="button" class="btn-floating light-blue"><i class="fab fa-envira" aria-hidden="true"></i></a>Basic example
            <a type="button" class="btn-floating cyan"><i class="fab fa-apple" aria-hidden="true"></i></a>
            <a type="button" class="btn-floating teal"><i class="fas fa-arrows-alt" aria-hidden="true"></i></a>
            <a type="button" class="btn-floating light-green"><i class="far fa-hand-point-right" aria-hidden="true"></i></a>

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

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

            <button type="button" class="btn btn-rounded btn-amber"><i class="fas fa-th-list pr-2" aria-hidden="true"></i>List</button>
            <button type="button" class="btn btn-rounded btn-brown"><i class="fas fa-redo pr-2" aria-hidden="true"></i>Rotate</button>
            <button type="button" class="btn btn-rounded btn-blue-grey"><i class="far fa-save pr-2" aria-hidden="true"></i>Floppy</button>
            <button type="button" class="btn btn-rounded btn-primary"><i class="fab fa-bitcoin pr-2" aria-hidden="true"></i>Bitcoin</button>

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

          <!-- Grid column -->
          <div class="col-md-12">

            <button type="button" class="btn btn-outline-success btn-rounded waves-effect"><i class="fas fa-cogs pr-2"
                aria-hidden="true"></i>Success</button>
            <button type="button" class="btn btn-outline-info btn-rounded waves-effect"><i class="fas fa-wheelchair pr-2"
                aria-hidden="true"></i>Info</button>
            <button type="button" class="btn btn-outline-warning btn-rounded waves-effect"><i class="fas fa-car pr-2"
                aria-hidden="true"></i>Warning</button>
            <button type="button" class="btn btn-outline-danger btn-rounded waves-effect"><i class="fas fa-train pr-2"
                aria-hidden="true"></i>Danger</button>

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

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

      

Button icons sizing MDB Pro component



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

          <!-- Grid column -->
          <div class="col-md-6 col-xl-3 text-center mb-4">

            <a type="button" class="btn-floating btn-lg blue-gradient"><i class="fab fa-google-wallet" aria-hidden="true"></i></a>
            <a type="button" class="btn-floating peach-gradient"><i class="fab fa-envira" aria-hidden="true"></i></a>
            <a type="button" class="btn-floating btn-sm purple-gradient"><i class="fas fa-heart" aria-hidden="true"></i></a>

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

          <!-- Grid column -->
          <div class="col-md-6 col-xl-4 mt-2 text-center mb-4">

            <button type="button" class="btn btn-indigo px-4"><i class="fas fa-tint fa-3x" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-light-blue px-4"><i class="fas fa-bolt fa-2x" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-cyan px-3"><i class="fas fa-users" aria-hidden="true"></i></button>

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

          <!-- Grid column -->
          <div class="col-md-12 col-xl-5 mt-2 text-center">

            <button type="button" class="btn btn-success btn-lg btn-rounded text-lg"><i class="fab fa-apple fa-2x pr-2"
                aria-hidden="true"></i>One</button>
            <button type="button" class="btn btn-warning btn-rounded"><i class="fas fa-camera pr-2" aria-hidden="true"></i>Two</button>
            <button type="button" class="btn btn-danger btn-sm btn-rounded"><i class="fas fa-plane pr-2 pt-1"
                aria-hidden="true"></i>Three</button>

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

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

      


          .btn .fa.fa-3x {
            font-size: 3em;
        }
        .btn .fa.fa-2x {
            font-size: 2em;
        }

      

Social button icons MDB Pro component

22 22 22 22 22 22


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

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

            <button type="button" class="btn btn-fb"><i class="fab fa-facebook-f left"></i> Facebook</button>
            <button type="button" class="btn btn-gplus"><i class="fab fa-google-plus-g left"></i> Google +</button>
            <button type="button" class="btn btn-ins"><i class="fab fa-instagram left"></i> Instagram</button>
            <button type="button" class="btn btn-so"><i class="fab fa-stack-overflow left"></i> Stack Overflow</button>

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

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

            <button type="button" class="btn btn-li"><i class="fab fa-linkedin-in"></i></button>
            <button type="button" class="btn btn-pin"><i class="fab fa-pinterest"></i></button>
            <button type="button" class="btn btn-dribbble"><i class="fab fa-dribbble left"></i></button>
            <button type="button" class="btn btn-vk"><i class="fab fa-vk"></i></button>
            <button type="button" class="btn btn-git"><i class="fab fa-github"></i></button>

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

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

            <a type="button" class="btn-floating btn-lg btn-tw"><i class="fab fa-twitter"></i></a>
            <a type="button" class="btn-floating btn-lg btn-yt"><i class="fab fa-youtube"></i></a>
            <a type="button" class="btn-floating btn-dribbble"><i class="fab fa-dribbble"></i></a>
            <a type="button" class="btn-floating btn-so"><i class="fab fa-stack-overflow"></i></a>
            <a type="button" class="btn-floating btn-sm btn-slack"><i class="fab fa-slack-hash"></i></a>
            <a type="button" class="btn-floating btn-sm btn-comm"><i class="far fa-comments"></i></a>

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

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

            <!--Facebook-->
            <button type="button" class="btn btn-fb btn-lg">
              <i class="fab fa-facebook-f"></i>
            </button>
            <span class="counter">22</span>

            <!--Twitter-->
            <button type="button" class="btn btn-tw btn-lg">
              <i class="fab fa-twitter"></i>
            </button>
            <span class="counter">22</span>

            <!--Google +-->
            <button type="button" class="btn btn-gplus btn-lg">
              <i class="fab fa-google-plus-g"></i>
            </button>
            <span class="counter">22</span>

            <!--Linkedin-->
            <button type="button" class="btn btn-li btn-lg">
              <i class="fab fa-linkedin-in"></i>
            </button>
            <span class="counter">22</span>

            <!--Slack-->
            <button type="button" class="btn btn-slack btn-lg">
              <i class="fab fa-slack-hash"></i>
            </button>
            <span class="counter">22</span>

            <!--Emails-->
            <button type="button" class="btn btn-email btn-lg">
              <i class="fas fa-envelope"></i>
            </button>
            <span class="counter">22</span>

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

          <!-- Grid column -->
          <div class="col-md-12">

            <!--Facebook-->
            <a class="icons-sm fb-ic"><i class="fab fa-facebook-f fa-2x"> </i></a>
            <!--Twitter-->
            <a class="icons-sm tw-ic"><i class="fab fa-twitter fa-2x"> </i></a>
            <!--Google +-->
            <a class="icons-sm gplus-ic"><i class="fab fa-google-plus-g fa-2x"> </i></a>
            <!--Linkedin-->
            <a class="icons-sm li-ic"><i class="fab fa-linkedin-in fa-2x"> </i></a>
            <!--Instagram-->
            <a class="icons-sm ins-ic"><i class="fab fa-instagram fa-2x"> </i></a>
            <!--Pinterest-->
            <a class="icons-sm pin-ic"><i class="fab fa-pinterest fa-2x"> </i></a>
            <!--Slack-->
            <a class="icons-sm slack-ic"><i class="fab fa-slack-hash fa-2x"> </i></a>
            <!--Github-->
            <a class="icons-sm git-ic"><i class="fab fa-github fa-2x"> </i></a>
            <!--Youtube-->
            <a class="icons-sm yt-ic"><i class="fab fa-youtube fa-2x"> </i></a>
            <!--Dribbble-->
            <a class="icons-sm dribbble-ic"><i class="fab fa-dribbble fa-2x"> </i></a>
            <!--Stack Overflow-->
            <a class="icons-sm so-ic"><i class="fab fa-stack-overflow fa-2x"> </i></a>

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

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

      

Toggle button icon

Panel title

Some quick example text to build on the card title and make up the bulk of the card's content.



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

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

            <button class="btn btn-default" data-toggle="collapse" data-target="#collapseOne"><i class="fas fa-folder-open pr-2"
                aria-hidden="true"></i>Open folder</button>
            <div class="collapse" id="collapseOne">
              <!--Panel-->
              <div class="card card-body ml-1">
                <h4 class="card-title">Panel title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                  card's content.</p>
                <div class="flex-row">
                  <a class="card-link">Card link</a>
                  <a class="card-link">Another link</a>
                </div>
              </div>
              <!--/.Panel-->
            </div>

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

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

      


          $('#collapseOne').on('shown.bs.collapse', function () {
            $(".fa").removeClass("fa-folder-o").addClass("fa-folder-open-o");
        });

        $('#collapseOne').on('hidden.bs.collapse', function () {
            $(".fa").removeClass("fa-folder-open-o").addClass("fa-folder-o");
        });

      

Button icons within cascading cards MDB Pro component

Alice Mayer

Photographer

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Billy Cullen

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.



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

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

            <!--Card Wider-->
            <div class="card card-cascade wider">

              <!--Card image-->
              <div class="view view-cascade overlay">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20%283%29.jpg" class="card-img-top">
                <a href="#!">
                  <div class="mask rgba-white-slight"></div>
                </a>
              </div>
              <!--/Card image-->

              <!--Card content-->
              <div class="card-body card-body-cascade text-center">
                <!--Title-->
                <h4 class="card-title"><strong>Alice Mayer</strong></h4>
                <h5 class="indigo-text"><strong>Photographer</strong></h5>

                <p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque
                  laudantium, totam rem aperiam. </p>


                <!--Linkedin-->
                <a class="icons-sm li-ic"><i class="fab fa-linkedin-in"> </i></a>
                <!--Twitter-->
                <a class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a>
                <!--Dribbble-->
                <a class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a>

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

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

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

          <!-- Grid column -->
          <div class="col-md-6 col-xl-5">

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

              <!--Card image-->
              <div class="view view-cascade overlay">
                <img src="https://mdbootstrap.com/img/Photos/Others/men.jpg" class="card-img-top" alt="">
                <a>
                  <div class="mask rgba-white-slight"></div>
                </a>
              </div>
              <!--/.Card image-->

              <!--Card content-->
              <div class="card-body card-body-cascade text-center">
                <!--Title-->
                <h4 class="card-title"><strong>Billy Cullen</strong></h4>
                <h5>Web developer</h5>

                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex,
                  recusandae. Facere modi sunt, quod quibusdam.
                </p>

                <!--Facebook-->
                <a type="button" class="btn-floating btn-small btn-fb"><i class="fab fa-facebook-f"></i></a>
                <!--Twitter-->
                <a type="button" class="btn-floating btn-small btn-tw"><i class="fab fa-twitter"></i></a>
                <!--Google +-->
                <a type="button" class="btn-floating btn-small btn-dribbble"><i class="fab fa-dribbble"></i></a>

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

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

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

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

      

Button icons within overlay cards MDB Pro component

Marketing

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project
Software

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project


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

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

            <!-- Card -->
            <div class="card card-image mb-3" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">

              <!-- Content -->
              <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
                <div>
                  <h5 class="pink-text"><i class="fas fa-chart-pie"></i> Marketing</h5>
                  <h3 class="card-title pt-2"><strong>This is card title</strong></h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                    optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                    Odit sed qui, dolorum!.</p>
                  <a class="btn btn-pink"><i class="fas fa-clone left"></i> View project</a>
                </div>
              </div>
              <!-- Content -->

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

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

          <!-- Grid column -->
          <div class="col-md-6">
            <div class="card card-image mb-3" style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(47).jpg');">
              <div class="text-white text-center d-flex align-items-center rgba-indigo-strong py-5 px-4">
                <div>
                  <h5 class="orange-text"><i class="fas fa-desktop"></i> Software</h5>
                  <h3 class="card-title pt-2"><strong>This is card title</strong></h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                    optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                    Odit sed qui, dolorum!.</p>
                  <a class="btn btn-deep-orange"><i class="fas fa-clone left"></i> View project</a>
                </div>
              </div>
            </div>
          </div>
          <!-- Grid column -->

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

      

Button icons within pills MDB Pro component


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.



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

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

            <ul class="nav md-pills pills-info">
              <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#panel21" role="tab"><i class="far fa-gem pr-xl-2 pr-md-0 pr-2"></i>Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel22" role="tab"><i class="fas fa-credit-card pr-xl-2 pr-md-0 pr-2"></i>Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel23" role="tab"><i class="fas fa-coffee pr-xl-2 pr-md-0 pr-2"></i>Lifestyle</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel24" role="tab"><i class="fas fa-pencil-alt pr-xl-2 pr-md-0 pr-2"></i>Design</a>
              </li>
            </ul>


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

          <!-- Grid column -->
          <div class="col-md-9 col-lg-8 ml-xl-0 ml-4">

            <!-- Tab panels -->
            <div class="tab-content">

              <!--Panel 1-->
              <div class="tab-pane fade in show active" id="panel21" role="tabpanel">
                <br>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                  reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                  porro voluptate odit minima.</p>

              </div>
              <!--/.Panel 1-->

              <!--Panel 2-->
              <div class="tab-pane fade" id="panel22" role="tabpanel">
                <br>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                  reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                  porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                  reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                  porro voluptate odit minima.</p>

              </div>
              <!--/.Panel 2-->

              <!--Panel 3-->
              <div class="tab-pane fade" id="panel23" role="tabpanel">
                <br>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                  reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                  porro voluptate odit minima.</p>

              </div>
              <!--/.Panel 3-->

              <!--Panel 4-->
              <div class="tab-pane fade" id="panel24" role="tabpanel">
                <br>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                  reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                  porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                  reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                  porro voluptate odit minima.</p>

              </div>
              <!--/.Panel 4-->

            </div>

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

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

      

Button icons within modals MDB Pro component



        <!--Modal: Login / Register Form-->
        <div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog cascading-modal" role="document">
            <!--Content-->
            <div class="modal-content">

              <!--Modal cascading tabs-->
              <div class="modal-c-tabs">

                <!-- Nav tabs -->
                <ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fas fa-user mr-1"></i>
                      Login</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#panel8" role="tab"><i class="fas fa-user-plus mr-1"></i>
                      Register</a>
                  </li>
                </ul>

                <!-- Tab panels -->
                <div class="tab-content">
                  <!--Panel 7-->
                  <div class="tab-pane fade in show active" id="panel7" role="tabpanel">

                    <!--Body-->
                    <div class="modal-body mb-1">
                      <div class="md-form form-sm">
                        <i class="fas fa-envelope prefix"></i>
                        <input type="text" id="form22" class="form-control">
                        <label for="form22">Your email</label>
                      </div>

                      <div class="md-form form-sm">
                        <i class="fas fa-lock prefix"></i>
                        <input type="password" id="form23" class="form-control">
                        <label for="form23">Your password</label>
                      </div>
                      <div class="text-center mt-2">
                        <button class="btn btn-info">Log in <i class="fas fa-sign-in-alt ml-1"></i></button>
                      </div>
                    </div>
                    <!--Footer-->
                    <div class="modal-footer">
                      <div class="options text-center text-md-right mt-1">
                        <p>Not a member? <a href="#" class="blue-text">Sign Up</a></p>
                        <p>Forgot <a href="#" class="blue-text">Password?</a></p>
                      </div>
                      <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
                    </div>

                  </div>
                  <!--/.Panel 7-->

                  <!--Panel 8-->
                  <div class="tab-pane fade" id="panel8" role="tabpanel">

                    <!--Body-->
                    <div class="modal-body">
                      <div class="md-form form-sm">
                        <i class="fas fa-envelope prefix"></i>
                        <input type="text" id="form24" class="form-control">
                        <label for="form24">Your email</label>
                      </div>

                      <div class="md-form form-sm">
                        <i class="fas fa-lock prefix"></i>
                        <input type="password" id="form25" class="form-control">
                        <label for="form25">Your password</label>
                      </div>

                      <div class="md-form form-sm">
                        <i class="fas fa-lock prefix"></i>
                        <input type="password" id="form26" class="form-control">
                        <label for="form26">Repeat password</label>
                      </div>

                      <div class="text-center form-sm mt-2">
                        <button class="btn btn-info">Sign up <i class="fas fa-sign-in-alt ml-1"></i></button>
                      </div>

                    </div>
                    <!--Footer-->
                    <div class="modal-footer">
                      <div class="options text-right">
                        <p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
                      </div>
                      <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                  <!--/.Panel 8-->
                </div>

              </div>
            </div>
            <!--/.Content-->
          </div>
        </div>
        <!--Modal: Login / Register Form-->

      

Button icons within form

Sign in

Forgot Password?

or Sign in with:




          <section class="form-elegant">

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

              <div class="card-body mx-4">

                <!--Header-->
                <div class="text-center">
                  <h3 class="dark-grey-text mb-5"><strong>Sign in</strong></h3>
                </div>

                <!--Body-->
                <div class="md-form">
                  <input type="text" id="Form-email1" class="form-control">
                  <label for="Form-email1">Your email</label>
                </div>

                <div class="md-form pb-3">
                  <input type="password" id="Form-pass1" class="form-control">
                  <label for="Form-pass1">Your password</label>
                  <p class="font-small blue-text d-flex justify-content-end">Forgot <a href="#" class="blue-text ml-1">
                      Password?</a></p>
                </div>

                <div class="text-center mb-3">
                  <button type="button" class="btn blue-gradient btn-block btn-rounded z-depth-1a">Sign in</button>
                </div>
                <p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in
                  with:</p>

                <div class="row my-3 d-flex justify-content-center">
                  <!--Facebook-->
                  <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fab fa-facebook-f blue-text text-center"></i></button>
                  <!--Twitter-->
                  <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fab fa-twitter blue-text"></i></button>
                  <!--Google +-->
                  <button type="button" class="btn btn-white btn-rounded z-depth-1a"><i class="fab fa-google-plus-g blue-text"></i></button>
                </div>

              </div>

              <!--Footer-->
              <div class="modal-footer mx-5 pt-3 mb-1">
                <p class="font-small grey-text d-flex justify-content-end">Not a member? <a href="#" class="blue-text ml-1">
                    Sign Up</a></p>
              </div>

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

          </section>
        


          .form-elegant .font-small {
          font-size: 0.8rem; }

          .form-elegant .z-depth-1a {
          -webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
          box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25); }

          .form-elegant .z-depth-1-half,
          .form-elegant .btn:hover {
          -webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
          box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15); }

        

Edit these docs Rate these docs

Getting started : download & setup


Download

All the components and features are part of MDBootstrap package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Download MDBootstrap About

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

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
  

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial

Integrations with Angular, React or Vue

Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue