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


<main class="bs-docs-masthead" id="content" role="main" tabindex="-1">
  <div class="container">
    <span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">BMD</span>

    <p class="lead">Material Design for Bootstrap, the world's most popular mobile-first and responsive front-end framework.</p>

    <p class="lead">
      <a href="getting-started#download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap Material Design</a>
    </p>

    <p class="version">Currently v{{ site.current_version }}</p>
    {% include ads.html %}
  </div>
</main>

<div class="bs-docs-featurette">
  <div class="container">

    <div class="row">
      <div class="col-sm-4">
        <img src="assets/img/sass-less.png" alt="Sass and Less support" class="img-responsive">

        <h3>Preprocessors</h3>

        <p>BMD ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors,
          <a href="../css/#less">Less</a> and
          <a href="../css/#sass">Sass</a>. Quickly get started with precompiled CSS or build on the source.</p>
      </div>
      <div class="col-sm-4">
        <img src="assets/img/devices.png" alt="Responsive across devices" class="img-responsive">

        <h3>One framework, every device.</h3>

        <p>BMD 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">
        <img src="assets/img/components.png" alt="Components" class="img-responsive">

        <h3>Full of features</h3>

        <p>With BMB, you get beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
      </div>
    </div>

    <hr class="half-rule">

    <p class="lead">BMD is open source under the MIT License. It's hosted, developed, and maintained on GitHub.</p>
    <a href="{{ site.repo }}" class="btn btn-outline btn-lg">View the GitHub project</a>
  </div>
</div>

<div class="bs-docs-featurette">
  <div class="container">
    <h2 class="bs-docs-featurette-title">Support BMD development.</h2>

    <hr class="half-rule">

    <div class="row bs-docs-featured-sites">
      <p>If you want support the development of this project please consider donating:</p>
      <a href="https://www.gratipay.com/FezVrasta/" target="_blank" class="btn btn-primary">Donate with Gratipay</a>

      <form action="https://www.paypal.com/cgi-bin/webscr" id="paypal" method="post" target="_blank" style="display: inline-block;">
        <input type="hidden" name="cmd" value="_s-xclick">

        <div class="btn btn-primary">
          <select 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" value="DONATE WITH PAYPAL" name="submit">
        </div>
      </form>
      <p>Thanks to all the people that have donated on Gratipay and PayPal! You are great guys!</p>

      <hr class="half-rule">

      <h2 class="bs-docs-featurette-title">Interested in hiring commercial development help?</h2>

      <p class="lead">Visit
        <a href="http://www.mywebexpression.com">MyWebExpression</a> and contact Fez Vrasta using the form on the bottom of the page.
      </p>
    </div>

  </div>
</div>