---
layout: simple
title: Examples
---

## Framework

Examples that focus on implementing uses of built-in components provided by Bootstrap.

<div class="row bd-examples">

  <div class="card card-block col-xs-6 col-md-4">
    <h4 class="card-title">Starter Template</h4>
    <p class="card-text">Nothing but the basics: compiled CSS and JavaScript.</p>
    <a href="{{ site.baseurl }}/examples/starter-template/" target="_example" class="btn btn-primary"><i class="material-icons">launch</i> Launch</a>
  </div>


  <!--
   <div class="card card-block col-xs-6 col-md-4">
     <h4 class="card-title"></h4>
     <p class="card-text"></p>
     <a href="{{ site.baseurl }}/examples/" target="_example" class="btn btn-primary"><i class="material-icons">launch</i> Launch</a>
   </div>
  -->
 
</div>

## Custom components

Brand new components and templates to help folks quickly get started with Material Design for Bootstrap and demonstrate best practices for adding onto the framework.

<div class="row bd-examples">

   <div class="card card-block col-xs-6 col-md-4">
     <h4 class="card-title">Sign-in page</h4>
     <p class="card-text">Custom form layout and design for a simple sign in form.</p>
     <a href="{{ site.baseurl }}/examples/signin" target="_example" class="btn btn-primary"><i class="material-icons">launch</i> Launch</a>
   </div>

</div>

## Experiments

Examples that focus on future-friendly features or techniques.

<div class="row bd-examples">
  <div class="card card-block col-xs-6 col-md-4">
   <h4 class="card-title">Offcanvas</h4>
   <p class="card-text">Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
   <a href="{{ site.baseurl }}/examples/offcanvas" target="_example" class="btn btn-primary"><i class="material-icons">launch</i> Launch</a>
  </div>
</div>