--- 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-outline-inverse 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 Gruntfile 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 PRO</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="http://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385" class="btn btn-primary btn-raised btn-lg">More details</a> </p> <a href="http://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385"> <img class="img-fluid m-x-auto" src="/assets/img/bs-themes.png" 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">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">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="http://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385" target="_blank">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">€ 5,00</option> <option value="28PH77JK5QWFE">€ 10,00</option> <option value="6B6TJAJ2R99HS">€ 15,00</option> <option value="GJCEKCQFMBVHA">€ 20,00</option> <option value="U7QXM95C8RJ9W">€ 25,00</option> <option value="55S3VBB3U4NAS">€ 50,00</option> </select> <input type="submit" style="background: none; border: 0; margin: 1em;" value="DONATE WITH PAYPAL" name="submit"> </div> </form> </div> </div>