<div class="animated fadeIn">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <strong>Brand Buttons</strong>
          <small>Usage ex.</small>
          <code style="text-transform:lowercase">&lt;button class="btn btn-brand btn-facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code>
        </div>
        <div class="card-body">
          <h6>Size Small
            <small>Add this class
              <code>.btn-sm</code>
            </small>
          </h6>
          <p>
            <button type="button" class="btn btn-brand btn-sm btn-facebook" style="margin-bottom: 4px">
              <i class="fa fa-facebook"></i>
              <span>Facebook</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-twitter" style="margin-bottom: 4px">
              <i class="fa fa-twitter"></i>
              <span>Twitter</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-linkedin" style="margin-bottom: 4px">
              <i class="fa fa-linkedin"></i>
              <span>LinkedIn</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-flickr" style="margin-bottom: 4px">
              <i class="fa fa-flickr"></i>
              <span>Flickr</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-tumblr" style="margin-bottom: 4px">
              <i class="fa fa-tumblr"></i>
              <span>Tumblr</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-xing" style="margin-bottom: 4px">
              <i class="fa fa-xing"></i>
              <span>Xing</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-github" style="margin-bottom: 4px">
              <i class="fa fa-github"></i>
              <span>Github</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-html5" style="margin-bottom: 4px">
              <i class="fa fa-html5"></i>
              <span>HTML5</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-openid" style="margin-bottom: 4px">
              <i class="fa fa-openid"></i>
              <span>OpenID</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-stack-overflow" style="margin-bottom: 4px">
              <i class="fa fa-stack-overflow"></i>
              <span>StackOverflow</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-css3" style="margin-bottom: 4px">
              <i class="fa fa-css3"></i>
              <span>CSS3</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-youtube" style="margin-bottom: 4px">
              <i class="fa fa-youtube"></i>
              <span>YouTube</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-dribbble" style="margin-bottom: 4px">
              <i class="fa fa-dribbble"></i>
              <span>Dribbble</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-google-plus" style="margin-bottom: 4px">
              <i class="fa fa-google-plus"></i>
              <span>Google+</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-instagram" style="margin-bottom: 4px">
              <i class="fa fa-instagram"></i>
              <span>Instagram</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-pinterest" style="margin-bottom: 4px">
              <i class="fa fa-pinterest"></i>
              <span>Pinterest</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vk" style="margin-bottom: 4px">
              <i class="fa fa-vk"></i>
              <span>VK</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-yahoo" style="margin-bottom: 4px">
              <i class="fa fa-yahoo"></i>
              <span>Yahoo</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-behance" style="margin-bottom: 4px">
              <i class="fa fa-behance"></i>
              <span>Behance</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-dropbox" style="margin-bottom: 4px">
              <i class="fa fa-dropbox"></i>
              <span>Dropbox</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-reddit" style="margin-bottom: 4px">
              <i class="fa fa-reddit"></i>
              <span>Reddit</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-spotify" style="margin-bottom: 4px">
              <i class="fa fa-spotify"></i>
              <span>Spotify</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vine" style="margin-bottom: 4px">
              <i class="fa fa-vine"></i>
              <span>Vine</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-foursquare" style="margin-bottom: 4px">
              <i class="fa fa-foursquare"></i>
              <span>Forsquare</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vimeo" style="margin-bottom: 4px">
              <i class="fa fa-vimeo"></i>
              <span>Vimeo</span>
            </button>
          </p>
          <h6>Size Normal</h6>
          <p>
            <button type="button" class="btn btn-brand btn-facebook" style="margin-bottom: 4px">
              <i class="fa fa-facebook"></i>
              <span>Facebook</span>
            </button>
            <button type="button" class="btn btn-brand btn-twitter" style="margin-bottom: 4px">
              <i class="fa fa-twitter"></i>
              <span>Twitter</span>
            </button>
            <button type="button" class="btn btn-brand btn-linkedin" style="margin-bottom: 4px">
              <i class="fa fa-linkedin"></i>
              <span>LinkedIn</span>
            </button>
            <button type="button" class="btn btn-brand btn-flickr" style="margin-bottom: 4px">
              <i class="fa fa-flickr"></i>
              <span>Flickr</span>
            </button>
            <button type="button" class="btn btn-brand btn-tumblr" style="margin-bottom: 4px">
              <i class="fa fa-tumblr"></i>
              <span>Tumblr</span>
            </button>
            <button type="button" class="btn btn-brand btn-xing" style="margin-bottom: 4px">
              <i class="fa fa-xing"></i>
              <span>Xing</span>
            </button>
            <button type="button" class="btn btn-brand btn-github" style="margin-bottom: 4px">
              <i class="fa fa-github"></i>
              <span>Github</span>
            </button>
            <button type="button" class="btn btn-brand btn-html5" style="margin-bottom: 4px">
              <i class="fa fa-html5"></i>
              <span>HTML5</span>
            </button>
            <button type="button" class="btn btn-brand btn-openid" style="margin-bottom: 4px">
              <i class="fa fa-openid"></i>
              <span>OpenID</span>
            </button>
            <button type="button" class="btn btn-brand btn-stack-overflow" style="margin-bottom: 4px">
              <i class="fa fa-stack-overflow"></i>
              <span>StackOverflow</span>
            </button>
            <button type="button" class="btn btn-brand btn-css3" style="margin-bottom: 4px">
              <i class="fa fa-css3"></i>
              <span>CSS3</span>
            </button>
            <button type="button" class="btn btn-brand btn-youtube" style="margin-bottom: 4px">
              <i class="fa fa-youtube"></i>
              <span>YouTube</span>
            </button>
            <button type="button" class="btn btn-brand btn-dribbble" style="margin-bottom: 4px">
              <i class="fa fa-dribbble"></i>
              <span>Dribbble</span>
            </button>
            <button type="button" class="btn btn-brand btn-google-plus" style="margin-bottom: 4px">
              <i class="fa fa-google-plus"></i>
              <span>Google+</span>
            </button>
            <button type="button" class="btn btn-brand btn-instagram" style="margin-bottom: 4px">
              <i class="fa fa-instagram"></i>
              <span>Instagram</span>
            </button>
            <button type="button" class="btn btn-brand btn-pinterest" style="margin-bottom: 4px">
              <i class="fa fa-pinterest"></i>
              <span>Pinterest</span>
            </button>
            <button type="button" class="btn btn-brand btn-vk" style="margin-bottom: 4px">
              <i class="fa fa-vk"></i>
              <span>VK</span>
            </button>
            <button type="button" class="btn btn-brand btn-yahoo" style="margin-bottom: 4px">
              <i class="fa fa-yahoo"></i>
              <span>Yahoo</span>
            </button>
            <button type="button" class="btn btn-brand btn-behance" style="margin-bottom: 4px">
              <i class="fa fa-behance"></i>
              <span>Behance</span>
            </button>
            <button type="button" class="btn btn-brand btn-dropbox" style="margin-bottom: 4px">
              <i class="fa fa-dropbox"></i>
              <span>Dropbox</span>
            </button>
            <button type="button" class="btn btn-brand btn-reddit" style="margin-bottom: 4px">
              <i class="fa fa-reddit"></i>
              <span>Reddit</span>
            </button>
            <button type="button" class="btn btn-brand btn-spotify" style="margin-bottom: 4px">
              <i class="fa fa-spotify"></i>
              <span>Spotify</span>
            </button>
            <button type="button" class="btn btn-brand btn-vine" style="margin-bottom: 4px">
              <i class="fa fa-vine"></i>
              <span>Vine</span>
            </button>
            <button type="button" class="btn btn-brand btn-foursquare" style="margin-bottom: 4px">
              <i class="fa fa-foursquare"></i>
              <span>Forsquare</span>
            </button>
            <button type="button" class="btn btn-brand btn-vimeo" style="margin-bottom: 4px">
              <i class="fa fa-vimeo"></i>
              <span>Vimeo</span>
            </button>
          </p>
          <h6>Size Large
            <small>Add this class
              <code>.btn-lg</code>
            </small>
          </h6>
          <p>
            <button type="button" class="btn btn-brand btn-lg btn-facebook" style="margin-bottom: 4px">
              <i class="fa fa-facebook"></i>
              <span>Facebook</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-twitter" style="margin-bottom: 4px">
              <i class="fa fa-twitter"></i>
              <span>Twitter</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-linkedin" style="margin-bottom: 4px">
              <i class="fa fa-linkedin"></i>
              <span>LinkedIn</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-flickr" style="margin-bottom: 4px">
              <i class="fa fa-flickr"></i>
              <span>Flickr</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-tumblr" style="margin-bottom: 4px">
              <i class="fa fa-tumblr"></i>
              <span>Tumblr</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-xing" style="margin-bottom: 4px">
              <i class="fa fa-xing"></i>
              <span>Xing</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-github" style="margin-bottom: 4px">
              <i class="fa fa-github"></i>
              <span>Github</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-html5" style="margin-bottom: 4px">
              <i class="fa fa-html5"></i>
              <span>HTML5</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-openid" style="margin-bottom: 4px">
              <i class="fa fa-openid"></i>
              <span>OpenID</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-stack-overflow" style="margin-bottom: 4px">
              <i class="fa fa-stack-overflow"></i>
              <span>StackOverflow</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-css3" style="margin-bottom: 4px">
              <i class="fa fa-css3"></i>
              <span>CSS3</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-youtube" style="margin-bottom: 4px">
              <i class="fa fa-youtube"></i>
              <span>YouTube</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-dribbble" style="margin-bottom: 4px">
              <i class="fa fa-dribbble"></i>
              <span>Dribbble</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-google-plus" style="margin-bottom: 4px">
              <i class="fa fa-google-plus"></i>
              <span>Google+</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-instagram" style="margin-bottom: 4px">
              <i class="fa fa-instagram"></i>
              <span>Instagram</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-pinterest" style="margin-bottom: 4px">
              <i class="fa fa-pinterest"></i>
              <span>Pinterest</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vk" style="margin-bottom: 4px">
              <i class="fa fa-vk"></i>
              <span>VK</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-yahoo" style="margin-bottom: 4px">
              <i class="fa fa-yahoo"></i>
              <span>Yahoo</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-behance" style="margin-bottom: 4px">
              <i class="fa fa-behance"></i>
              <span>Behance</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-dropbox" style="margin-bottom: 4px">
              <i class="fa fa-dropbox"></i>
              <span>Dropbox</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-reddit" style="margin-bottom: 4px">
              <i class="fa fa-reddit"></i>
              <span>Reddit</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-spotify" style="margin-bottom: 4px">
              <i class="fa fa-spotify"></i>
              <span>Spotify</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vine" style="margin-bottom: 4px">
              <i class="fa fa-vine"></i>
              <span>Vine</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-foursquare" style="margin-bottom: 4px">
              <i class="fa fa-foursquare"></i>
              <span>Forsquare</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vimeo" style="margin-bottom: 4px">
              <i class="fa fa-vimeo"></i>
              <span>Vimeo</span>
            </button>
          </p>
        </div>
      </div>
    </div>
    <!--/.col-->

    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <strong>Brand Buttons</strong>
          <small>Only icons. Usage ex.</small>
          <code style="text-transform:lowercase">&lt;button class="btn btn-brand btn-facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code>
        </div>
        <div class="card-body">
          <h6>Size Small
            <small>Add this class
              <code>.btn-sm</code>
            </small>
          </h6>
          <p>
            <button type="button" class="btn btn-brand btn-sm btn-facebook" style="margin-bottom: 4px">
              <i class="fa fa-facebook"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-twitter" style="margin-bottom: 4px">
              <i class="fa fa-twitter"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-linkedin" style="margin-bottom: 4px">
              <i class="fa fa-linkedin"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-flickr" style="margin-bottom: 4px">
              <i class="fa fa-flickr"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-tumblr" style="margin-bottom: 4px">
              <i class="fa fa-tumblr"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-xing" style="margin-bottom: 4px">
              <i class="fa fa-xing"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-github" style="margin-bottom: 4px">
              <i class="fa fa-github"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-html5" style="margin-bottom: 4px">
              <i class="fa fa-html5"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-openid" style="margin-bottom: 4px">
              <i class="fa fa-openid"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-stack-overflow" style="margin-bottom: 4px">
              <i class="fa fa-stack-overflow"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-css3" style="margin-bottom: 4px">
              <i class="fa fa-css3"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-youtube" style="margin-bottom: 4px">
              <i class="fa fa-youtube"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-dribbble" style="margin-bottom: 4px">
              <i class="fa fa-dribbble"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-google-plus" style="margin-bottom: 4px">
              <i class="fa fa-google-plus"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-instagram" style="margin-bottom: 4px">
              <i class="fa fa-instagram"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-pinterest" style="margin-bottom: 4px">
              <i class="fa fa-pinterest"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vk" style="margin-bottom: 4px">
              <i class="fa fa-vk"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-yahoo" style="margin-bottom: 4px">
              <i class="fa fa-yahoo"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-behance" style="margin-bottom: 4px">
              <i class="fa fa-behance"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-dropbox" style="margin-bottom: 4px">
              <i class="fa fa-dropbox"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-reddit" style="margin-bottom: 4px">
              <i class="fa fa-reddit"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-spotify" style="margin-bottom: 4px">
              <i class="fa fa-spotify"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vine" style="margin-bottom: 4px">
              <i class="fa fa-vine"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-foursquare" style="margin-bottom: 4px">
              <i class="fa fa-foursquare"></i>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vimeo" style="margin-bottom: 4px">
              <i class="fa fa-vimeo"></i>
            </button>
          </p>
          <h6>Size Normal</h6>
          <p>
            <button type="button" class="btn btn-brand btn-facebook" style="margin-bottom: 4px">
              <i class="fa fa-facebook"></i>
            </button>
            <button type="button" class="btn btn-brand btn-twitter" style="margin-bottom: 4px">
              <i class="fa fa-twitter"></i>
            </button>
            <button type="button" class="btn btn-brand btn-linkedin" style="margin-bottom: 4px">
              <i class="fa fa-linkedin"></i>
            </button>
            <button type="button" class="btn btn-brand btn-flickr" style="margin-bottom: 4px">
              <i class="fa fa-flickr"></i>
            </button>
            <button type="button" class="btn btn-brand btn-tumblr" style="margin-bottom: 4px">
              <i class="fa fa-tumblr"></i>
            </button>
            <button type="button" class="btn btn-brand btn-xing" style="margin-bottom: 4px">
              <i class="fa fa-xing"></i>
            </button>
            <button type="button" class="btn btn-brand btn-github" style="margin-bottom: 4px">
              <i class="fa fa-github"></i>
            </button>
            <button type="button" class="btn btn-brand btn-html5" style="margin-bottom: 4px">
              <i class="fa fa-html5"></i>
            </button>
            <button type="button" class="btn btn-brand btn-openid" style="margin-bottom: 4px">
              <i class="fa fa-openid"></i>
            </button>
            <button type="button" class="btn btn-brand btn-stack-overflow" style="margin-bottom: 4px">
              <i class="fa fa-stack-overflow"></i>
            </button>
            <button type="button" class="btn btn-brand btn-css3" style="margin-bottom: 4px">
              <i class="fa fa-css3"></i>
            </button>
            <button type="button" class="btn btn-brand btn-youtube" style="margin-bottom: 4px">
              <i class="fa fa-youtube"></i>
            </button>
            <button type="button" class="btn btn-brand btn-dribbble" style="margin-bottom: 4px">
              <i class="fa fa-dribbble"></i>
            </button>
            <button type="button" class="btn btn-brand btn-google-plus" style="margin-bottom: 4px">
              <i class="fa fa-google-plus"></i>
            </button>
            <button type="button" class="btn btn-brand btn-instagram" style="margin-bottom: 4px">
              <i class="fa fa-instagram"></i>
            </button>
            <button type="button" class="btn btn-brand btn-pinterest" style="margin-bottom: 4px">
              <i class="fa fa-pinterest"></i>
            </button>
            <button type="button" class="btn btn-brand btn-vk" style="margin-bottom: 4px">
              <i class="fa fa-vk"></i>
            </button>
            <button type="button" class="btn btn-brand btn-yahoo" style="margin-bottom: 4px">
              <i class="fa fa-yahoo"></i>
            </button>
            <button type="button" class="btn btn-brand btn-behance" style="margin-bottom: 4px">
              <i class="fa fa-behance"></i>
            </button>
            <button type="button" class="btn btn-brand btn-dropbox" style="margin-bottom: 4px">
              <i class="fa fa-dropbox"></i>
            </button>
            <button type="button" class="btn btn-brand btn-reddit" style="margin-bottom: 4px">
              <i class="fa fa-reddit"></i>
            </button>
            <button type="button" class="btn btn-brand btn-spotify" style="margin-bottom: 4px">
              <i class="fa fa-spotify"></i>
            </button>
            <button type="button" class="btn btn-brand btn-vine" style="margin-bottom: 4px">
              <i class="fa fa-vine"></i>
            </button>
            <button type="button" class="btn btn-brand btn-foursquare" style="margin-bottom: 4px">
              <i class="fa fa-foursquare"></i>
            </button>
            <button type="button" class="btn btn-brand btn-vimeo" style="margin-bottom: 4px">
              <i class="fa fa-vimeo"></i>
            </button>
          </p>
          <h6>Size Large
            <small>Add this class
              <code>.btn-lg</code>
            </small>
          </h6>
          <p>
            <button type="button" class="btn btn-brand btn-lg btn-facebook" style="margin-bottom: 4px">
              <i class="fa fa-facebook"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-twitter" style="margin-bottom: 4px">
              <i class="fa fa-twitter"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-linkedin" style="margin-bottom: 4px">
              <i class="fa fa-linkedin"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-flickr" style="margin-bottom: 4px">
              <i class="fa fa-flickr"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-tumblr" style="margin-bottom: 4px">
              <i class="fa fa-tumblr"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-xing" style="margin-bottom: 4px">
              <i class="fa fa-xing"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-github" style="margin-bottom: 4px">
              <i class="fa fa-github"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-html5" style="margin-bottom: 4px">
              <i class="fa fa-html5"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-openid" style="margin-bottom: 4px">
              <i class="fa fa-openid"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-stack-overflow" style="margin-bottom: 4px">
              <i class="fa fa-stack-overflow"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-css3" style="margin-bottom: 4px">
              <i class="fa fa-css3"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-youtube" style="margin-bottom: 4px">
              <i class="fa fa-youtube"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-dribbble" style="margin-bottom: 4px">
              <i class="fa fa-dribbble"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-google-plus" style="margin-bottom: 4px">
              <i class="fa fa-google-plus"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-instagram" style="margin-bottom: 4px">
              <i class="fa fa-instagram"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-pinterest" style="margin-bottom: 4px">
              <i class="fa fa-pinterest"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vk" style="margin-bottom: 4px">
              <i class="fa fa-vk"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-yahoo" style="margin-bottom: 4px">
              <i class="fa fa-yahoo"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-behance" style="margin-bottom: 4px">
              <i class="fa fa-behance"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-dropbox" style="margin-bottom: 4px">
              <i class="fa fa-dropbox"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-reddit" style="margin-bottom: 4px">
              <i class="fa fa-reddit"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-spotify" style="margin-bottom: 4px">
              <i class="fa fa-spotify"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vine" style="margin-bottom: 4px">
              <i class="fa fa-vine"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-foursquare" style="margin-bottom: 4px">
              <i class="fa fa-foursquare"></i>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vimeo" style="margin-bottom: 4px">
              <i class="fa fa-vimeo"></i>
            </button>
          </p>
        </div>
      </div>
    </div>
    <!--/.col-->

    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <strong>Brand Buttons</strong>
          <small>Only text. Usage ex.</small>
          <code style="text-transform:lowercase">&lt;button class="btn btn-brand btn-facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code>
        </div>
        <div class="card-body">
          <h6>Size Small
            <small>Add this class
              <code>.btn-sm</code>
            </small>
          </h6>
          <p>
            <button type="button" class="btn btn-brand btn-sm btn-facebook" style="margin-bottom: 4px">
              <span>Facebook</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-twitter" style="margin-bottom: 4px">
              <span>Twitter</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-linkedin" style="margin-bottom: 4px">
              <span>LinkedIn</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-flickr" style="margin-bottom: 4px">
              <span>Flickr</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-tumblr" style="margin-bottom: 4px">
              <span>Tumblr</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-xing" style="margin-bottom: 4px">
              <span>Xing</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-github" style="margin-bottom: 4px">
              <span>Github</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-html5" style="margin-bottom: 4px">
              <span>HTML5</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-openid" style="margin-bottom: 4px">
              <span>OpenID</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-stack-overflow" style="margin-bottom: 4px">
              <span>StackOverflow</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-css3" style="margin-bottom: 4px">
              <span>CSS3</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-youtube" style="margin-bottom: 4px">
              <span>YouTube</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-dribbble" style="margin-bottom: 4px">
              <span>Dribbble</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-google-plus" style="margin-bottom: 4px">
              <span>Google+</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-instagram" style="margin-bottom: 4px">
              <span>Instagram</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-pinterest" style="margin-bottom: 4px">
              <span>Pinterest</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vk" style="margin-bottom: 4px">
              <span>VK</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-yahoo" style="margin-bottom: 4px">
              <span>Yahoo</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-behance" style="margin-bottom: 4px">
              <span>Behance</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-dropbox" style="margin-bottom: 4px">
              <span>Dropbox</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-reddit" style="margin-bottom: 4px">
              <span>Reddit</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-spotify" style="margin-bottom: 4px">
              <span>Spotify</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vine" style="margin-bottom: 4px">
              <span>Vine</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-foursquare" style="margin-bottom: 4px">
              <span>Forsquare</span>
            </button>
            <button type="button" class="btn btn-brand btn-sm btn-vimeo" style="margin-bottom: 4px">
              <span>Vimeo</span>
            </button>
          </p>
          <h6>Size Normal</h6>
          <p>
            <button type="button" class="btn btn-brand btn-facebook" style="margin-bottom: 4px">
              <span>Facebook</span>
            </button>
            <button type="button" class="btn btn-brand btn-twitter" style="margin-bottom: 4px">
              <span>Twitter</span>
            </button>
            <button type="button" class="btn btn-brand btn-linkedin" style="margin-bottom: 4px">
              <span>LinkedIn</span>
            </button>
            <button type="button" class="btn btn-brand btn-flickr" style="margin-bottom: 4px">
              <span>Flickr</span>
            </button>
            <button type="button" class="btn btn-brand btn-tumblr" style="margin-bottom: 4px">
              <span>Tumblr</span>
            </button>
            <button type="button" class="btn btn-brand btn-xing" style="margin-bottom: 4px">
              <span>Xing</span>
            </button>
            <button type="button" class="btn btn-brand btn-github" style="margin-bottom: 4px">
              <span>Github</span>
            </button>
            <button type="button" class="btn btn-brand btn-html5" style="margin-bottom: 4px">
              <span>HTML5</span>
            </button>
            <button type="button" class="btn btn-brand btn-openid" style="margin-bottom: 4px">
              <span>OpenID</span>
            </button>
            <button type="button" class="btn btn-brand btn-stack-overflow" style="margin-bottom: 4px">
              <span>StackOverflow</span>
            </button>
            <button type="button" class="btn btn-brand btn-css3" style="margin-bottom: 4px">
              <span>CSS3</span>
            </button>
            <button type="button" class="btn btn-brand btn-youtube" style="margin-bottom: 4px">
              <span>YouTube</span>
            </button>
            <button type="button" class="btn btn-brand btn-dribbble" style="margin-bottom: 4px">
              <span>Dribbble</span>
            </button>
            <button type="button" class="btn btn-brand btn-google-plus" style="margin-bottom: 4px">
              <span>Google+</span>
            </button>
            <button type="button" class="btn btn-brand btn-instagram" style="margin-bottom: 4px">
              <span>Instagram</span>
            </button>
            <button type="button" class="btn btn-brand btn-pinterest" style="margin-bottom: 4px">
              <span>Pinterest</span>
            </button>
            <button type="button" class="btn btn-brand btn-vk" style="margin-bottom: 4px">
              <span>VK</span>
            </button>
            <button type="button" class="btn btn-brand btn-yahoo" style="margin-bottom: 4px">
              <span>Yahoo</span>
            </button>
            <button type="button" class="btn btn-brand btn-behance" style="margin-bottom: 4px">
              <span>Behance</span>
            </button>
            <button type="button" class="btn btn-brand btn-dropbox" style="margin-bottom: 4px">
              <span>Dropbox</span>
            </button>
            <button type="button" class="btn btn-brand btn-reddit" style="margin-bottom: 4px">
              <span>Reddit</span>
            </button>
            <button type="button" class="btn btn-brand btn-spotify" style="margin-bottom: 4px">
              <span>Spotify</span>
            </button>
            <button type="button" class="btn btn-brand btn-vine" style="margin-bottom: 4px">
              <span>Vine</span>
            </button>
            <button type="button" class="btn btn-brand btn-foursquare" style="margin-bottom: 4px">
              <span>Forsquare</span>
            </button>
            <button type="button" class="btn btn-brand btn-vimeo" style="margin-bottom: 4px">
              <span>Vimeo</span>
            </button>
          </p>
          <h6>Size Large
            <small>Add this class
              <code>.btn-lg</code>
            </small>
          </h6>
          <p>
            <button type="button" class="btn btn-brand btn-lg btn-facebook" style="margin-bottom: 4px">
              <span>Facebook</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-twitter" style="margin-bottom: 4px">
              <span>Twitter</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-linkedin" style="margin-bottom: 4px">
              <span>LinkedIn</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-flickr" style="margin-bottom: 4px">
              <span>Flickr</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-tumblr" style="margin-bottom: 4px">
              <span>Tumblr</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-xing" style="margin-bottom: 4px">
              <span>Xing</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-github" style="margin-bottom: 4px">
              <span>Github</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-html5" style="margin-bottom: 4px">
              <span>HTML5</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-openid" style="margin-bottom: 4px">
              <span>OpenID</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-stack-overflow" style="margin-bottom: 4px">
              <span>StackOverflow</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-css3" style="margin-bottom: 4px">
              <span>CSS3</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-youtube" style="margin-bottom: 4px">
              <span>YouTube</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-dribbble" style="margin-bottom: 4px">
              <span>Dribbble</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-google-plus" style="margin-bottom: 4px">
              <span>Google+</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-instagram" style="margin-bottom: 4px">
              <span>Instagram</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-pinterest" style="margin-bottom: 4px">
              <span>Pinterest</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vk" style="margin-bottom: 4px">
              <span>VK</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-yahoo" style="margin-bottom: 4px">
              <span>Yahoo</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-behance" style="margin-bottom: 4px">
              <span>Behance</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-dropbox" style="margin-bottom: 4px">
              <span>Dropbox</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-reddit" style="margin-bottom: 4px">
              <span>Reddit</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-spotify" style="margin-bottom: 4px">
              <span>Spotify</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vine" style="margin-bottom: 4px">
              <span>Vine</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-foursquare" style="margin-bottom: 4px">
              <span>Forsquare</span>
            </button>
            <button type="button" class="btn btn-brand btn-lg btn-vimeo" style="margin-bottom: 4px">
              <span>Vimeo</span>
            </button>
          </p>
        </div>
      </div>
    </div>
    <!--/.col-->
  </div>
  <!--/.row-->
</div>