---
layout: home
---

<main class="bd-masthead" id="content" role="main">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 mx-auto col-md-12">
        <h1 class="mb-3 bd-text-purple-bright text-center">Material Design for Bootstrap</h1>
        <br /><br />
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-6 mx-auto col-md-6 order-md-2">
        <img src="{{ site.baseurl }}/assets/img/MD4B.svg" alt="" class="img-fluid mb-3 mb-md-0">
      </div>
      <div class="col-md-6 order-md-1 text-center text-md-left pr-md-5">
        <p class="lead">
          Build responsive, mobile-first projects on the web with the world's most popular Material Design front-end component library.
        </p>
        <p class="lead mb-4">
          Material Design for Bootstrap is an open source toolkit based on Bootstrap for developing Material Design apps with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
        </p>
        <div class="d-flex flex-column flex-md-row lead mb-3">
          <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/" class="btn btn-lg btn-primary" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
          <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/" class="btn btn-lg btn-secondary" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download</a>
        </div>
        <p class="text-muted mb-0">
          Currently v{{ site.current_version }}
        </p>
      </div>
    </div>
    {% include ads.html %}
  </div>
</main>

<div class="masthead-followup row m-0 border border-white">
  <div class="col-12 col-md-6 p-3 p-md-5 bg-light border border-white">
    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
    {% include icons/import.svg width="32" height="32" class="text-primary mb-2" %}
    <h3>Installation</h3>
    <p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our build system and readme.</p>

{% highlight sh %}
npm install bootstrap-material-design@{{ site.current_version }}
{% endhighlight %}

{% highlight sh %}
gem install bootstrap-material-design -v 4.0.0.beta
{% endhighlight %}

{% highlight sh %}
bower install bootstrap-material-design#v{{ site.current_version }}
{% endhighlight %}
    <hr class="half-rule">
    <a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download">Read installation docs</a>
  </div>

  <div class="col-12 col-md-6 p-3 p-md-5 bg-light border border-white">
    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
    {% include icons/download.svg width="32" height="32" class="text-primary mb-2" %}
    <h3>Bootstrap CDN</h3>
    <p>When you only need to include Bootstrap's compiled CSS or JS, you can use the Bootstrap CDN.</p>

<h5>CSS only</h5>
{% highlight html %}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
{% endhighlight %}

<h5>JS, Popper.js, and jQuery</h5>
{% highlight html %}
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
<script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script>
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
{% endhighlight %}
    <hr class="half-rule">
    <a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/">Explore the docs</a>
  </div>
</div>
<div class="masthead-followup row m-0 border border-white">
  <div class="col-12 col-md-12 p-3 p-md-5 bg-white border border-white text-center">
    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
    {% include icons/lightning.svg width="32" height="32" class="text-primary mb-2" %}
    <h3 class="partner mdbootstrap">Material Design for Bootstrap PRO</h3>
    <p class="partner mdbootstrap">
       2000+ material UI elements, 600+ material icons, 74 CSS animations, SASS files, templates, premium tutorials and many more
    </p>
    <a class="partner mdbootstrap" href="{{ site.mdbootstrap }}" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Image - mdbootstrap');">
      <img class="img-fluid mt-3 mx-auto" src="{{ site.baseurl }}/assets/img/mdbootstrap.jpg" alt="Bootstrap Themes" width="1024" height="388">
    </a>
    <br /><br />
    <a href="{{ site.mdbootstrap }}" class="btn btn-outline-primary partner mdbootstrap"  onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Button - mdbootstrap');">Get Material Design for Bootstrap PRO</a>

    <h3 class="partner creativetim">Official Pro Kits</h3>
    <p class="partner creativetim">
       Take Material Design for Bootstrap 4 to the next level with official Material Kit Pro and Material Dashboard Pro.
    </p>
    <a class="partner creativetim" href="{{ site.mkp }}" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Image - creativetim');">
      <img class="img-fluid mt-3 mx-auto" src="{{ site.baseurl }}/assets/img/mk-pro-banner.jpg" alt="Bootstrap Themes" width="1024" height="388">
    </a>
    <br /><br />
    <a href="{{ site.mkp }}" class="btn btn-outline-primary partner creativetim" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Button MKP - creativetim');">Material Kit Pro</a>
    <a href="{{ site.mdp }}" class="btn btn-outline-primary partner creativetim" onclick="ga('send', 'event', 'Homepage', 'Partner', 'Hero Button MDP - creativetim');">Material Dashboard Pro</a>
  </div>
</div>