UNPKG

@coreui/ajax

Version:

Open Source Bootstrap Admin Template

812 lines (809 loc) 38.6 kB
<div class="animated fadeIn"> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-header"> <strong>Social Media Button</strong> <small>Usage ex.</small> <code style="text-transform:lowercase">&lt;button class="btn btn-facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code> <div class="card-actions"> <a href="#" class="btn-setting"><i class="icon-settings"></i></a> <button class="btn btn-minimize" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="true" aria-controls="collapseExample1"> <i class="icon-arrow-up"></i> </button> <a href="#" class="btn-close"><i class="icon-close"></i></a> </div> </div> <div class="card-body collapse show" id="collapseExample1"> <h6>Size Small <small>Add this class <code>.btn-sm</code> </small> </h6> <p> <button type="button" class="btn btn-sm btn-facebook" style="margin-bottom: 4px"> <span>Facebook</span> </button> <button type="button" class="btn btn-sm btn-twitter" style="margin-bottom: 4px"> <span>Twitter</span> </button> <button type="button" class="btn btn-sm btn-linkedin" style="margin-bottom: 4px"> <span>LinkedIn</span> </button> <button type="button" class="btn btn-sm btn-flickr" style="margin-bottom: 4px"> <span>Flickr</span> </button> <button type="button" class="btn btn-sm btn-tumblr" style="margin-bottom: 4px"> <span>Tumblr</span> </button> <button type="button" class="btn btn-sm btn-xing" style="margin-bottom: 4px"> <span>Xing</span> </button> <button type="button" class="btn btn-sm btn-github" style="margin-bottom: 4px"> <span>Github</span> </button> <button type="button" class="btn btn-sm btn-html5" style="margin-bottom: 4px"> <span>HTML5</span> </button> <button type="button" class="btn btn-sm btn-openid" style="margin-bottom: 4px"> <span>OpenID</span> </button> <button type="button" class="btn btn-sm btn-stack-overflow" style="margin-bottom: 4px"> <span>StackOverflow</span> </button> <button type="button" class="btn btn-sm btn-css3" style="margin-bottom: 4px"> <span>CSS3</span> </button> <button type="button" class="btn btn-sm btn-youtube" style="margin-bottom: 4px"> <span>YouTube</span> </button> <button type="button" class="btn btn-sm btn-dribbble" style="margin-bottom: 4px"> <span>Dribbble</span> </button> <button type="button" class="btn btn-sm btn-google-plus" style="margin-bottom: 4px"> <span>Google+</span> </button> <button type="button" class="btn btn-sm btn-instagram" style="margin-bottom: 4px"> <span>Instagram</span> </button> <button type="button" class="btn btn-sm btn-pinterest" style="margin-bottom: 4px"> <span>Pinterest</span> </button> <button type="button" class="btn btn-sm btn-vk" style="margin-bottom: 4px"> <span>VK</span> </button> <button type="button" class="btn btn-sm btn-yahoo" style="margin-bottom: 4px"> <span>Yahoo</span> </button> <button type="button" class="btn btn-sm btn-behance" style="margin-bottom: 4px"> <span>Behance</span> </button> <button type="button" class="btn btn-sm btn-dropbox" style="margin-bottom: 4px"> <span>Dropbox</span> </button> <button type="button" class="btn btn-sm btn-reddit" style="margin-bottom: 4px"> <span>Reddit</span> </button> <button type="button" class="btn btn-sm btn-spotify" style="margin-bottom: 4px"> <span>Spotify</span> </button> <button type="button" class="btn btn-sm btn-vine" style="margin-bottom: 4px"> <span>Vine</span> </button> <button type="button" class="btn btn-sm btn-foursquare" style="margin-bottom: 4px"> <span>Forsquare</span> </button> <button type="button" class="btn btn-sm btn-vimeo" style="margin-bottom: 4px"> <span>Vimeo</span> </button> </p> <h6>Size Normal</h6> <p> <button type="button" class="btn btn-facebook" style="margin-bottom: 4px"> <span>Facebook</span> </button> <button type="button" class="btn btn-twitter" style="margin-bottom: 4px"> <span>Twitter</span> </button> <button type="button" class="btn btn-linkedin" style="margin-bottom: 4px"> <span>LinkedIn</span> </button> <button type="button" class="btn btn-flickr" style="margin-bottom: 4px"> <span>Flickr</span> </button> <button type="button" class="btn btn-tumblr" style="margin-bottom: 4px"> <span>Tumblr</span> </button> <button type="button" class="btn btn-xing" style="margin-bottom: 4px"> <span>Xing</span> </button> <button type="button" class="btn btn-github" style="margin-bottom: 4px"> <span>Github</span> </button> <button type="button" class="btn btn-html5" style="margin-bottom: 4px"> <span>HTML5</span> </button> <button type="button" class="btn btn-openid" style="margin-bottom: 4px"> <span>OpenID</span> </button> <button type="button" class="btn btn-stack-overflow" style="margin-bottom: 4px"> <span>StackOverflow</span> </button> <button type="button" class="btn btn-css3" style="margin-bottom: 4px"> <span>CSS3</span> </button> <button type="button" class="btn btn-youtube" style="margin-bottom: 4px"> <span>YouTube</span> </button> <button type="button" class="btn btn-dribbble" style="margin-bottom: 4px"> <span>Dribbble</span> </button> <button type="button" class="btn btn-google-plus" style="margin-bottom: 4px"> <span>Google+</span> </button> <button type="button" class="btn btn-instagram" style="margin-bottom: 4px"> <span>Instagram</span> </button> <button type="button" class="btn btn-pinterest" style="margin-bottom: 4px"> <span>Pinterest</span> </button> <button type="button" class="btn btn-vk" style="margin-bottom: 4px"> <span>VK</span> </button> <button type="button" class="btn btn-yahoo" style="margin-bottom: 4px"> <span>Yahoo</span> </button> <button type="button" class="btn btn-behance" style="margin-bottom: 4px"> <span>Behance</span> </button> <button type="button" class="btn btn-dropbox" style="margin-bottom: 4px"> <span>Dropbox</span> </button> <button type="button" class="btn btn-reddit" style="margin-bottom: 4px"> <span>Reddit</span> </button> <button type="button" class="btn btn-spotify" style="margin-bottom: 4px"> <span>Spotify</span> </button> <button type="button" class="btn btn-vine" style="margin-bottom: 4px"> <span>Vine</span> </button> <button type="button" class="btn btn-foursquare" style="margin-bottom: 4px"> <span>Forsquare</span> </button> <button type="button" class="btn 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-lg btn-facebook" style="margin-bottom: 4px"> <span>Facebook</span> </button> <button type="button" class="btn btn-lg btn-twitter" style="margin-bottom: 4px"> <span>Twitter</span> </button> <button type="button" class="btn btn-lg btn-linkedin" style="margin-bottom: 4px"> <span>LinkedIn</span> </button> <button type="button" class="btn btn-lg btn-flickr" style="margin-bottom: 4px"> <span>Flickr</span> </button> <button type="button" class="btn btn-lg btn-tumblr" style="margin-bottom: 4px"> <span>Tumblr</span> </button> <button type="button" class="btn btn-lg btn-xing" style="margin-bottom: 4px"> <span>Xing</span> </button> <button type="button" class="btn btn-lg btn-github" style="margin-bottom: 4px"> <span>Github</span> </button> <button type="button" class="btn btn-lg btn-html5" style="margin-bottom: 4px"> <span>HTML5</span> </button> <button type="button" class="btn btn-lg btn-openid" style="margin-bottom: 4px"> <span>OpenID</span> </button> <button type="button" class="btn btn-lg btn-stack-overflow" style="margin-bottom: 4px"> <span>StackOverflow</span> </button> <button type="button" class="btn btn-lg btn-css3" style="margin-bottom: 4px"> <span>CSS3</span> </button> <button type="button" class="btn btn-lg btn-youtube" style="margin-bottom: 4px"> <span>YouTube</span> </button> <button type="button" class="btn btn-lg btn-dribbble" style="margin-bottom: 4px"> <span>Dribbble</span> </button> <button type="button" class="btn btn-lg btn-google-plus" style="margin-bottom: 4px"> <span>Google+</span> </button> <button type="button" class="btn btn-lg btn-instagram" style="margin-bottom: 4px"> <span>Instagram</span> </button> <button type="button" class="btn btn-lg btn-pinterest" style="margin-bottom: 4px"> <span>Pinterest</span> </button> <button type="button" class="btn btn-lg btn-vk" style="margin-bottom: 4px"> <span>VK</span> </button> <button type="button" class="btn btn-lg btn-yahoo" style="margin-bottom: 4px"> <span>Yahoo</span> </button> <button type="button" class="btn btn-lg btn-behance" style="margin-bottom: 4px"> <span>Behance</span> </button> <button type="button" class="btn btn-lg btn-dropbox" style="margin-bottom: 4px"> <span>Dropbox</span> </button> <button type="button" class="btn btn-lg btn-reddit" style="margin-bottom: 4px"> <span>Reddit</span> </button> <button type="button" class="btn btn-lg btn-spotify" style="margin-bottom: 4px"> <span>Spotify</span> </button> <button type="button" class="btn btn-lg btn-vine" style="margin-bottom: 4px"> <span>Vine</span> </button> <button type="button" class="btn btn-lg btn-foursquare" style="margin-bottom: 4px"> <span>Forsquare</span> </button> <button type="button" class="btn btn-lg btn-vimeo" style="margin-bottom: 4px"> <span>Vimeo</span> </button> </p> </div> </div> </div> <!--/.col--> <div class="col-12"> <div class="card"> <div class="card-header"> <strong>Social Media Button</strong> <small>Only icons. Usage ex.</small> <code style="text-transform:lowercase">&lt;button class="btn btn-facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code> <div class="card-actions"> <a href="#" class="btn-setting"><i class="icon-settings"></i></a> <button class="btn-minimize" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="true" aria-controls="collapseExample2"> <i class="icon-arrow-up"></i> </button> <a href="#" class="btn-close"><i class="icon-close"></i></a> </div> </div> <div class="card-body collapse show" id="collapseExample2"> <h6>Size Small <small>Add this class <code>.btn-sm</code> </small> </h6> <p> <button type="button" class="btn btn-sm btn-facebook icon" style="margin-bottom: 4px"> <span>Facebook</span> </button> <button type="button" class="btn btn-sm btn-twitter icon" style="margin-bottom: 4px"> <span>Twitter</span> </button> <button type="button" class="btn btn-sm btn-linkedin icon" style="margin-bottom: 4px"> <span>LinkedIn</span> </button> <button type="button" class="btn btn-sm btn-flickr icon" style="margin-bottom: 4px"> <span>Flickr</span> </button> <button type="button" class="btn btn-sm btn-tumblr icon" style="margin-bottom: 4px"> <span>Tumblr</span> </button> <button type="button" class="btn btn-sm btn-xing icon" style="margin-bottom: 4px"> <span>Xing</span> </button> <button type="button" class="btn btn-sm btn-github icon" style="margin-bottom: 4px"> <span>Github</span> </button> <button type="button" class="btn btn-sm btn-html5 icon" style="margin-bottom: 4px"> <span>HTML5</span> </button> <button type="button" class="btn btn-sm btn-openid icon" style="margin-bottom: 4px"> <span>OpenID</span> </button> <button type="button" class="btn btn-sm btn-stack-overflow icon" style="margin-bottom: 4px"> <span>StackOverflow</span> </button> <button type="button" class="btn btn-sm btn-css3 icon" style="margin-bottom: 4px"> <span>CSS3</span> </button> <button type="button" class="btn btn-sm btn-youtube icon" style="margin-bottom: 4px"> <span>YouTube</span> </button> <button type="button" class="btn btn-sm btn-dribbble icon" style="margin-bottom: 4px"> <span>Dribbble</span> </button> <button type="button" class="btn btn-sm btn-google-plus icon" style="margin-bottom: 4px"> <span>Google+</span> </button> <button type="button" class="btn btn-sm btn-instagram icon" style="margin-bottom: 4px"> <span>Instagram</span> </button> <button type="button" class="btn btn-sm btn-pinterest icon" style="margin-bottom: 4px"> <span>Pinterest</span> </button> <button type="button" class="btn btn-sm btn-vk icon" style="margin-bottom: 4px"> <span>VK</span> </button> <button type="button" class="btn btn-sm btn-yahoo icon" style="margin-bottom: 4px"> <span>Yahoo</span> </button> <button type="button" class="btn btn-sm btn-behance icon" style="margin-bottom: 4px"> <span>Behance</span> </button> <button type="button" class="btn btn-sm btn-dropbox icon" style="margin-bottom: 4px"> <span>Dropbox</span> </button> <button type="button" class="btn btn-sm btn-reddit icon" style="margin-bottom: 4px"> <span>Reddit</span> </button> <button type="button" class="btn btn-sm btn-spotify icon" style="margin-bottom: 4px"> <span>Spotify</span> </button> <button type="button" class="btn btn-sm btn-vine icon" style="margin-bottom: 4px"> <span>Vine</span> </button> <button type="button" class="btn btn-sm btn-foursquare icon" style="margin-bottom: 4px"> <span>Forsquare</span> </button> <button type="button" class="btn btn-sm btn-vimeo icon" style="margin-bottom: 4px"> <span>Vimeo</span> </button> </p> <h6>Size Normal</h6> <p> <button type="button" class="btn btn-facebook icon" style="margin-bottom: 4px"> <span>Facebook</span> </button> <button type="button" class="btn btn-twitter icon" style="margin-bottom: 4px"> <span>Twitter</span> </button> <button type="button" class="btn btn-linkedin icon" style="margin-bottom: 4px"> <span>LinkedIn</span> </button> <button type="button" class="btn btn-flickr icon" style="margin-bottom: 4px"> <span>Flickr</span> </button> <button type="button" class="btn btn-tumblr icon" style="margin-bottom: 4px"> <span>Tumblr</span> </button> <button type="button" class="btn btn-xing icon" style="margin-bottom: 4px"> <span>Xing</span> </button> <button type="button" class="btn btn-github icon" style="margin-bottom: 4px"> <span>Github</span> </button> <button type="button" class="btn btn-html5 icon" style="margin-bottom: 4px"> <span>HTML5</span> </button> <button type="button" class="btn btn-openid icon" style="margin-bottom: 4px"> <span>OpenID</span> </button> <button type="button" class="btn btn-stack-overflow icon" style="margin-bottom: 4px"> <span>StackOverflow</span> </button> <button type="button" class="btn btn-css3 icon" style="margin-bottom: 4px"> <span>CSS3</span> </button> <button type="button" class="btn btn-youtube icon" style="margin-bottom: 4px"> <span>YouTube</span> </button> <button type="button" class="btn btn-dribbble icon" style="margin-bottom: 4px"> <span>Dribbble</span> </button> <button type="button" class="btn btn-google-plus icon" style="margin-bottom: 4px"> <span>Google+</span> </button> <button type="button" class="btn btn-instagram icon" style="margin-bottom: 4px"> <span>Instagram</span> </button> <button type="button" class="btn btn-pinterest icon" style="margin-bottom: 4px"> <span>Pinterest</span> </button> <button type="button" class="btn btn-vk icon" style="margin-bottom: 4px"> <span>VK</span> </button> <button type="button" class="btn btn-yahoo icon" style="margin-bottom: 4px"> <span>Yahoo</span> </button> <button type="button" class="btn btn-behance icon" style="margin-bottom: 4px"> <span>Behance</span> </button> <button type="button" class="btn btn-dropbox icon" style="margin-bottom: 4px"> <span>Dropbox</span> </button> <button type="button" class="btn btn-reddit icon" style="margin-bottom: 4px"> <span>Reddit</span> </button> <button type="button" class="btn btn-spotify icon" style="margin-bottom: 4px"> <span>Spotify</span> </button> <button type="button" class="btn btn-vine icon" style="margin-bottom: 4px"> <span>Vine</span> </button> <button type="button" class="btn btn-foursquare icon" style="margin-bottom: 4px"> <span>Forsquare</span> </button> <button type="button" class="btn btn-vimeo icon" 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-lg btn-facebook icon" style="margin-bottom: 4px"> <span>Facebook</span> </button> <button type="button" class="btn btn-lg btn-twitter icon" style="margin-bottom: 4px"> <span>Twitter</span> </button> <button type="button" class="btn btn-lg btn-linkedin icon" style="margin-bottom: 4px"> <span>LinkedIn</span> </button> <button type="button" class="btn btn-lg btn-flickr icon" style="margin-bottom: 4px"> <span>Flickr</span> </button> <button type="button" class="btn btn-lg btn-tumblr icon" style="margin-bottom: 4px"> <span>Tumblr</span> </button> <button type="button" class="btn btn-lg btn-xing icon" style="margin-bottom: 4px"> <span>Xing</span> </button> <button type="button" class="btn btn-lg btn-github icon" style="margin-bottom: 4px"> <span>Github</span> </button> <button type="button" class="btn btn-lg btn-html5 icon" style="margin-bottom: 4px"> <span>HTML5</span> </button> <button type="button" class="btn btn-lg btn-openid icon" style="margin-bottom: 4px"> <span>OpenID</span> </button> <button type="button" class="btn btn-lg btn-stack-overflow icon" style="margin-bottom: 4px"> <span>StackOverflow</span> </button> <button type="button" class="btn btn-lg btn-css3 icon" style="margin-bottom: 4px"> <span>CSS3</span> </button> <button type="button" class="btn btn-lg btn-youtube icon" style="margin-bottom: 4px"> <span>YouTube</span> </button> <button type="button" class="btn btn-lg btn-dribbble icon" style="margin-bottom: 4px"> <span>Dribbble</span> </button> <button type="button" class="btn btn-lg btn-google-plus icon" style="margin-bottom: 4px"> <span>Google+</span> </button> <button type="button" class="btn btn-lg btn-instagram icon" style="margin-bottom: 4px"> <span>Instagram</span> </button> <button type="button" class="btn btn-lg btn-pinterest icon" style="margin-bottom: 4px"> <span>Pinterest</span> </button> <button type="button" class="btn btn-lg btn-vk icon" style="margin-bottom: 4px"> <span>VK</span> </button> <button type="button" class="btn btn-lg btn-yahoo icon" style="margin-bottom: 4px"> <span>Yahoo</span> </button> <button type="button" class="btn btn-lg btn-behance icon" style="margin-bottom: 4px"> <span>Behance</span> </button> <button type="button" class="btn btn-lg btn-dropbox icon" style="margin-bottom: 4px"> <span>Dropbox</span> </button> <button type="button" class="btn btn-lg btn-reddit icon" style="margin-bottom: 4px"> <span>Reddit</span> </button> <button type="button" class="btn btn-lg btn-spotify icon" style="margin-bottom: 4px"> <span>Spotify</span> </button> <button type="button" class="btn btn-lg btn-vine icon" style="margin-bottom: 4px"> <span>Vine</span> </button> <button type="button" class="btn btn-lg btn-foursquare icon" style="margin-bottom: 4px"> <span>Forsquare</span> </button> <button type="button" class="btn btn-lg btn-vimeo icon" style="margin-bottom: 4px"> <span>Vimeo</span> </button> </p> </div> </div> </div> <!--/.col--> <div class="col-12"> <div class="card"> <div class="card-header"> <strong>Social Media Button</strong> <small>Only text. Usage ex.</small> <code style="text-transform:lowercase">&lt;button class="btn btn-facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code> <div class="card-actions"> <a href="#" class="btn-setting"><i class="icon-settings"></i></a> <button class="btn-minimize" type="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="true" aria-controls="collapseExample3"> <i class="icon-arrow-up"></i> </button> <a href="#" class="btn-close"><i class="icon-close"></i></a> </div> </div> <div class="card-body collapse show" id="collapseExample3"> <h6>Size Small <small>Add this class <code>.btn-sm</code> </small> </h6> <p> <button type="button" class="btn btn-sm btn-facebook text" style="margin-bottom: 4px"> <span>Facebook</span> </button> <button type="button" class="btn btn-sm btn-twitter text" style="margin-bottom: 4px"> <span>Twitter</span> </button> <button type="button" class="btn btn-sm btn-linkedin text" style="margin-bottom: 4px"> <span>LinkedIn</span> </button> <button type="button" class="btn btn-sm btn-flickr text" style="margin-bottom: 4px"> <span>Flickr</span> </button> <button type="button" class="btn btn-sm btn-tumblr text" style="margin-bottom: 4px"> <span>Tumblr</span> </button> <button type="button" class="btn btn-sm btn-xing text" style="margin-bottom: 4px"> <span>Xing</span> </button> <button type="button" class="btn btn-sm btn-github text" style="margin-bottom: 4px"> <span>Github</span> </button> <button type="button" class="btn btn-sm btn-html5 text" style="margin-bottom: 4px"> <span>HTML5</span> </button> <button type="button" class="btn btn-sm btn-openid text" style="margin-bottom: 4px"> <span>OpenID</span> </button> <button type="button" class="btn btn-sm btn-stack-overflow text" style="margin-bottom: 4px"> <span>StackOverflow</span> </button> <button type="button" class="btn btn-sm btn-css3 text" style="margin-bottom: 4px"> <span>CSS3</span> </button> <button type="button" class="btn btn-sm btn-youtube text" style="margin-bottom: 4px"> <span>YouTube</span> </button> <button type="button" class="btn btn-sm btn-dribbble text" style="margin-bottom: 4px"> <span>Dribbble</span> </button> <button type="button" class="btn btn-sm btn-google-plus text" style="margin-bottom: 4px"> <span>Google+</span> </button> <button type="button" class="btn btn-sm btn-instagram text" style="margin-bottom: 4px"> <span>Instagram</span> </button> <button type="button" class="btn btn-sm btn-pinterest text" style="margin-bottom: 4px"> <span>Pinterest</span> </button> <button type="button" class="btn btn-sm btn-vk text" style="margin-bottom: 4px"> <span>VK</span> </button> <button type="button" class="btn btn-sm btn-yahoo text" style="margin-bottom: 4px"> <span>Yahoo</span> </button> <button type="button" class="btn btn-sm btn-behance text" style="margin-bottom: 4px"> <span>Behance</span> </button> <button type="button" class="btn btn-sm btn-dropbox text" style="margin-bottom: 4px"> <span>Dropbox</span> </button> <button type="button" class="btn btn-sm btn-reddit text" style="margin-bottom: 4px"> <span>Reddit</span> </button> <button type="button" class="btn btn-sm btn-spotify text" style="margin-bottom: 4px"> <span>Spotify</span> </button> <button type="button" class="btn btn-sm btn-vine text" style="margin-bottom: 4px"> <span>Vine</span> </button> <button type="button" class="btn btn-sm btn-foursquare text" style="margin-bottom: 4px"> <span>Forsquare</span> </button> <button type="button" class="btn btn-sm btn-vimeo text" style="margin-bottom: 4px"> <span>Vimeo</span> </button> </p> <h6>Size Normal</h6> <p> <button type="button" class="btn btn-facebook text" style="margin-bottom: 4px"> <span>Facebook</span> </button> <button type="button" class="btn btn-twitter text" style="margin-bottom: 4px"> <span>Twitter</span> </button> <button type="button" class="btn btn-linkedin text" style="margin-bottom: 4px"> <span>LinkedIn</span> </button> <button type="button" class="btn btn-flickr text" style="margin-bottom: 4px"> <span>Flickr</span> </button> <button type="button" class="btn btn-tumblr text" style="margin-bottom: 4px"> <span>Tumblr</span> </button> <button type="button" class="btn btn-xing text" style="margin-bottom: 4px"> <span>Xing</span> </button> <button type="button" class="btn btn-github text" style="margin-bottom: 4px"> <span>Github</span> </button> <button type="button" class="btn btn-html5 text" style="margin-bottom: 4px"> <span>HTML5</span> </button> <button type="button" class="btn btn-openid text" style="margin-bottom: 4px"> <span>OpenID</span> </button> <button type="button" class="btn btn-stack-overflow text" style="margin-bottom: 4px"> <span>StackOverflow</span> </button> <button type="button" class="btn btn-css3 text" style="margin-bottom: 4px"> <span>CSS3</span> </button> <button type="button" class="btn btn-youtube text" style="margin-bottom: 4px"> <span>YouTube</span> </button> <button type="button" class="btn btn-dribbble text" style="margin-bottom: 4px"> <span>Dribbble</span> </button> <button type="button" class="btn btn-google-plus text" style="margin-bottom: 4px"> <span>Google+</span> </button> <button type="button" class="btn btn-instagram text" style="margin-bottom: 4px"> <span>Instagram</span> </button> <button type="button" class="btn btn-pinterest text" style="margin-bottom: 4px"> <span>Pinterest</span> </button> <button type="button" class="btn btn-vk text" style="margin-bottom: 4px"> <span>VK</span> </button> <button type="button" class="btn btn-yahoo text" style="margin-bottom: 4px"> <span>Yahoo</span> </button> <button type="button" class="btn btn-behance text" style="margin-bottom: 4px"> <span>Behance</span> </button> <button type="button" class="btn btn-dropbox text" style="margin-bottom: 4px"> <span>Dropbox</span> </button> <button type="button" class="btn btn-reddit text" style="margin-bottom: 4px"> <span>Reddit</span> </button> <button type="button" class="btn btn-spotify text" style="margin-bottom: 4px"> <span>Spotify</span> </button> <button type="button" class="btn btn-vine text" style="margin-bottom: 4px"> <span>Vine</span> </button> <button type="button" class="btn btn-foursquare text" style="margin-bottom: 4px"> <span>Forsquare</span> </button> <button type="button" class="btn btn-vimeo text" 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-lg btn-facebook text" style="margin-bottom: 4px"> <span>Facebook</span> </button> <button type="button" class="btn btn-lg btn-twitter text" style="margin-bottom: 4px"> <span>Twitter</span> </button> <button type="button" class="btn btn-lg btn-linkedin text" style="margin-bottom: 4px"> <span>LinkedIn</span> </button> <button type="button" class="btn btn-lg btn-flickr text" style="margin-bottom: 4px"> <span>Flickr</span> </button> <button type="button" class="btn btn-lg btn-tumblr text" style="margin-bottom: 4px"> <span>Tumblr</span> </button> <button type="button" class="btn btn-lg btn-xing text" style="margin-bottom: 4px"> <span>Xing</span> </button> <button type="button" class="btn btn-lg btn-github text" style="margin-bottom: 4px"> <span>Github</span> </button> <button type="button" class="btn btn-lg btn-html5 text" style="margin-bottom: 4px"> <span>HTML5</span> </button> <button type="button" class="btn btn-lg btn-openid text" style="margin-bottom: 4px"> <span>OpenID</span> </button> <button type="button" class="btn btn-lg btn-stack-overflow text" style="margin-bottom: 4px"> <span>StackOverflow</span> </button> <button type="button" class="btn btn-lg btn-css3 text" style="margin-bottom: 4px"> <span>CSS3</span> </button> <button type="button" class="btn btn-lg btn-youtube text" style="margin-bottom: 4px"> <span>YouTube</span> </button> <button type="button" class="btn btn-lg btn-dribbble text" style="margin-bottom: 4px"> <span>Dribbble</span> </button> <button type="button" class="btn btn-lg btn-google-plus text" style="margin-bottom: 4px"> <span>Google+</span> </button> <button type="button" class="btn btn-lg btn-instagram text" style="margin-bottom: 4px"> <span>Instagram</span> </button> <button type="button" class="btn btn-lg btn-pinterest text" style="margin-bottom: 4px"> <span>Pinterest</span> </button> <button type="button" class="btn btn-lg btn-vk text" style="margin-bottom: 4px"> <span>VK</span> </button> <button type="button" class="btn btn-lg btn-yahoo text" style="margin-bottom: 4px"> <span>Yahoo</span> </button> <button type="button" class="btn btn-lg btn-behance text" style="margin-bottom: 4px"> <span>Behance</span> </button> <button type="button" class="btn btn-lg btn-dropbox text" style="margin-bottom: 4px"> <span>Dropbox</span> </button> <button type="button" class="btn btn-lg btn-reddit text" style="margin-bottom: 4px"> <span>Reddit</span> </button> <button type="button" class="btn btn-lg btn-spotify text" style="margin-bottom: 4px"> <span>Spotify</span> </button> <button type="button" class="btn btn-lg btn-vine text" style="margin-bottom: 4px"> <span>Vine</span> </button> <button type="button" class="btn btn-lg btn-foursquare text" style="margin-bottom: 4px"> <span>Forsquare</span> </button> <button type="button" class="btn btn-lg btn-vimeo text" style="margin-bottom: 4px"> <span>Vimeo</span> </button> </p> </div> </div> </div> <!--/.col--> </div> <!--/.row--> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> </div>