mdb-ui-kit/docs/index.html

---
layout: home
title: Bootstrap Material Design, the world's most popular mobile-first and responsive Material Design front-end framework.
---

<main class="bd-masthead" id="content" role="main">
  <div class="container">
    <span class="bd-booticon outline">BMD</span>
    <p class="lead">Bootstrap Material Design, the world's most popular mobile-first and responsive Material Design front-end framework.</p>
    <p class="lead">
      <a href="{{ site.baseurl }}/getting-started/download" class="btn btn-primary btn-raised btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.data.version }}');">Download</a>
    </p>
    <p class="version">Currently v{{ site.data.version }}</p>
    {% include ads.html %}
  </div>
</main>

<div class="bd-featurette">
  <div class="container">
    <h2 class="bd-featurette-title">Easy to get started.</h2>
    <p class="lead">Quickly include Bootstrap Material Design's CSS and JS into any project. Use your favorite package manager, download the source, or use the Bootstrap Material Design CDN.</p>

    <div class="row">
      <div class="col-sm-6 m-b-lg">
        <h4>Managed dependencies</h4>
        <p>Include Bootstrap Material Design's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our gulpfile and readme.</p>
        <p>
          <a class="btn btn-bs btn-primary" href="{{ site.baseurl }}/getting-started/download/#package-managers">View install methods</a>
        </p>
      </div>
      <div class="col-sm-6 m-b-lg">
        <h4>Bootstrap Material Design CDN</h4>
        <p>When you just need to include Bootstrap Material Design's compiled CSS and JS, use the Bootstrap Material Design CDN, free from the Max CDN folks.</p>
        <p>
          <a class="btn btn-bs btn-primary" href="{{ site.baseurl }}/getting-started/introduction">See Getting Started</a>
        </p>
      </div>
    </div>
  </div>
</div>

<div class="bd-featurette">
  <div class="container">
    <h2 class="bd-featurette-title">Material Kit <span class="mk-pro-badge">PRO</span></h2>
    <p class="lead">
      Get more from Bootstrap Material Design with our official Material Kit PRO. It features a huge number of components built to fit together and look amazing. Included you will find PSD, examples and sources.
    </p>

    <p class="lead">
      <a href="{{ site.mkp }}" class="btn btn-primary btn-raised btn-lg" onclick="ga('send', 'event', 'Home', 'MKP More Details Button');">More details</a>
    </p>

    <a href="{{ site.mkp }}" onclick="ga('send', 'event', 'Home', 'MKP Banner Link');">
      <img class="img-fluid m-x-auto" src="assets/img/mk-pro-banner.jpg" alt="Material Kit PRO" width="1024" height="388">
    </a>
  </div>
</div>

<div class="bd-featurette">
  <div class="container">
    <h2 class="bd-featurette-title">Designed for everyone, everywhere.</h2>
    <p class="lead">Bootstrap Material Design makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>

    <div class="row">
      <div class="col-sm-4 m-b-lg">
        <img src="assets/img/sass.png" alt="Sass support" class="img-fluid">
        <h4>Preprocessor</h4>
        <p>Bootstrap Material Design ships with vanilla CSS, but its source code utilizes <a href="http://sass-lang.com/">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
      </div>
      <div class="col-sm-4 m-b-lg">
        <img src="assets/img/devices.png" alt="Responsive across devices" class="img-fluid">
        <h4>One framework, every device.</h4>
        <p>Bootstrap Material Design easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
      </div>
      <div class="col-sm-4 m-b-lg">
        <img src="assets/img/components.png" alt="Components" class="img-fluid">
        <h4>Full of features</h4>
        <p>With Bootstrap Material Design, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
      </div>
    </div>

    <hr class="half-rule m-t-0">

    <p><strong>Bootstrap Material Design is open source!</strong> It's hosted, developed, and maintained on GitHub by folks like you.</p>
    <a href="{{ site.repo }}" class="btn btn-bs btn-primary" onclick="ga('send', 'event', 'Home', 'GitHub Button');">View the GitHub project</a>

    <br /><br />
    <hr class="half-rule m-t-0">

    <p>Looking for the <strong>Bootstrap 3 compatible</strong> version of Bootstrap Material Design? Head over the following link to find it.</p>
    <a class="btn btn-bs btn-primary" href="https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/gh-pages-v3/index.html" onclick="ga('send', 'event', 'Home', 'Bootstrap Material Design V3 Button');">Get BMD3 Version</a>

    <br /><br />
    <hr class="half-rule m-t-0">

    <p>Would you like to support the development of Bootstrap Material Design? Please donate with PayPal or buy <a href="{{ site.mkp }}" target="_blank" onclick="ga('send', 'event', 'Home', 'MKP Support Button');">Material Kit PRO</a>!</p>
    <form action="https://www.paypal.com/cgi-bin/webscr" id="paypal" method="post" target="_blank">
      <input type="hidden" name="cmd" value="_s-xclick">

      <div class="btn" style="padding: 0;">
        <select class="btn btn-success btn-raised custom-select" style="margin-left: 1em;" name="hosted_button_id" title="I can't accept less than 5 euro due to accounting troubles">
          <option value="DAAK965W2DKYE">&euro; 5,00</option>
          <option value="28PH77JK5QWFE">&euro; 10,00</option>
          <option value="6B6TJAJ2R99HS">&euro; 15,00</option>
          <option value="GJCEKCQFMBVHA">&euro; 20,00</option>
          <option value="U7QXM95C8RJ9W">&euro; 25,00</option>
          <option value="55S3VBB3U4NAS">&euro; 50,00</option>
        </select>
        <input type="submit" style="background: none; border: 0; margin: 1em;" value="DONATE WITH PAYPAL" name="submit">
      </div>
    </form>

  </div>
</div>