<template>
	<div>
		<!-- begin breadcrumb -->
		<ol class="breadcrumb float-xl-right">
			<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
			<li class="breadcrumb-item"><a href="javascript:;">UI Elements</a></li>
			<li class="breadcrumb-item active">Social Buttons</li>
		</ol>
		<!-- end breadcrumb -->
		<!-- begin page-header -->
		<h1 class="page-header">Social Buttons <small>header small text goes here...</small></h1>
		<!-- end page-header -->
		
		<!-- begin row -->
		<div class="row">
			<!-- begin col-8 -->
			<div class="col-xl-8">
				<!-- begin panel -->
				<panel title="Social Buttons" bodyClass="p-0">
					<!-- begin table-responsive -->
					<div class="table-responsive">
						<table class="table table-striped table-condensed">
							<thead>
								<tr>
									<th>Buttons</th>
									<th>class=""</th>
									<th>Color Code</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-adn">
											<span class="fab fa-adn"></span> Sign in with App.net
										</a>
									</td>
									<td><code>btn btn-social btn-adn</code></td>
									<td>#D87A68</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-bitbucket">
											<span class="fab fa-bitbucket"></span> Sign in with Bitbucket
										</a>
									</td>
									<td><code>btn btn-social btn-bitbucket</code></td>
									<td>#205081</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-dropbox">
											<span class="fab fa-dropbox"></span> Sign in with Dropbox
										</a>
									</td>
									<td><code>btn btn-social btn-dropbox</code></td>
									<td>#1087DD</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-facebook">
											<span class="fab fa-facebook"></span> Sign in with Facebook
										</a>
									</td>
									<td><code>btn btn-social btn-facebook</code></td>
									<td>#3B5998</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-flickr">
											<span class="fab fa-flickr"></span> Sign in with Flickr
										</a>
									</td>
									<td><code>btn btn-social btn-flickr</code></td>
									<td>#2BA9E1</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-foursquare">
											<span class="fab fa-foursquare"></span> Sign in with Foursquare
										</a>
									</td>
									<td><code>btn btn-social btn-foursquare</code></td>
									<td>#f94877</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-github">
											<span class="fab fa-github"></span> Sign in with GitHub
										</a>
									</td>
									<td><code>btn btn-social btn-github</code></td>
									<td>#444444</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-google">
											<span class="fab fa-google"></span> Sign in with Google
										</a>
									</td>
									<td><code>btn btn-social btn-google</code></td>
									<td>#DD4B39</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-instagram">
											<span class="fab fa-instagram"></span> Sign in with Instagram
										</a>
									</td>
									<td><code>btn btn-social btn-instagram</code></td>
									<td>#3F729B</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-linkedin">
											<span class="fab fa-linkedin"></span> Sign in with LinkedIn
										</a>
									</td>
									<td><code>btn btn-social btn-linkedin</code></td>
									<td>#007BB6</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-microsoft">
											<span class="fab fa-windows"></span> Sign in with Microsoft
										</a>
									</td>
									<td><code>btn btn-social btn-microsoft</code></td>
									<td>#2672EC</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-odnoklassniki">
											<span class="fab fa-odnoklassniki"></span> Sign in with Odnoklassniki
										</a>
									</td>
									<td><code>btn btn-social btn-odnoklassniki</code></td>
									<td>#F4731C</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-openid">
											<span class="fab fa-openid"></span> Sign in with OpenID
										</a>
									</td>
									<td><code>btn btn-social btn-openid</code></td>
									<td>#F7931E</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-pinterest">
											<span class="fab fa-pinterest"></span> Sign in with Pinterest
										</a>
									</td>
									<td><code>btn btn-social btn-pinterest</code></td>
									<td>#CB2027</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-reddit">
											<span class="fab fa-reddit"></span> Sign in with Reddit
										</a>
									</td>
									<td><code>btn btn-social btn-reddit</code></td>
									<td>#EFF7FF</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-soundcloud">
											<span class="fab fa-soundcloud"></span> Sign in with SoundCloud
										</a>
									</td>
									<td><code>btn btn-social btn-soundcloud</code></td>
									<td>#FF5500</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-tumblr">
											<span class="fab fa-tumblr"></span> Sign in with Tumblr
										</a>
									</td>
									<td><code>btn btn-social btn-tumblr</code></td>
									<td>#CB2027</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-twitter">
											<span class="fab fa-twitter"></span> Sign in with Twitter
										</a>
									</td>
									<td><code>btn btn-social btn-twitter</code></td>
									<td>#55ACEE</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-vimeo">
											<span class="fab fa-vimeo-square"></span> Sign in with Vimeo
										</a>
									</td>
									<td><code>btn btn-social btn-vimeo</code></td>
									<td>#1AB7EA</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-vk">
											<span class="fab fa-vk"></span> Sign in with VK
										</a>
									</td>
									<td><code>btn btn-social btn-vk</code></td>
									<td>#587EA3</td>
								</tr>
								<tr>
									<td>
										<a href="javascript:;" class="btn width-250 btn-social btn-yahoo">
											<span class="fab fa-yahoo"></span> Sign in with Yahoo!
										</a>
									</td>
									<td><code>btn btn-social btn-yahoo</code></td>
									<td>#720E9E</td>
								</tr>
							</tbody>
						</table>
					</div>
					<!-- end table-responsive -->
				</panel>
				<!-- end panel -->
			</div>
			<!-- end col-8 -->
			<!-- begin col-4 -->
			<div class="col-xl-4">
				<div class="lead m-b-20">
					<p class="m-b-5">Social Sign-In Buttons made in pure CSS based on Bootstrap and Font Awesome!</p>
					<a href="https://lipis.github.io/bootstrap-social/" target="_blank" class="btn btn-sm btn-inverse">View Official Website <i class="fa fa-arrow-right m-l-5"></i></a>
				</div>
				<div class="m-b-10"><b>Social Icons</b></div>
				<div class="clearfix m-b-20">
					<a href="javascript:;" class="btn btn-social-icon btn-adn pull-left m-r-5 m-b-5"><span class="fab fa-adn"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-bitbucket pull-left m-r-5 m-b-5"><span class="fab fa-bitbucket"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-dropbox pull-left m-r-5 m-b-5"><span class="fab fa-dropbox"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-facebook pull-left m-r-5 m-b-5"><span class="fab fa-facebook"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-flickr pull-left m-r-5 m-b-5"><span class="fab fa-flickr"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-foursquare pull-left m-r-5 m-b-5"><span class="fab fa-foursquare"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-github pull-left m-r-5 m-b-5"><span class="fab fa-github"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-google pull-left m-r-5 m-b-5"><span class="fab fa-google"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-instagram pull-left m-r-5 m-b-5"><span class="fab fa-instagram"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-linkedin pull-left m-r-5 m-b-5"><span class="fab fa-linkedin"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-microsoft pull-left m-r-5 m-b-5"><span class="fab fa-windows"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-odnoklassniki pull-left m-r-5 m-b-5"><span class="fab fa-odnoklassniki"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-openid pull-left m-r-5 m-b-5"><span class="fab fa-openid"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-pinterest pull-left m-r-5 m-b-5"><span class="fab fa-pinterest"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-reddit pull-left m-r-5 m-b-5"><span class="fab fa-reddit"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-soundcloud pull-left m-r-5 m-b-5"><span class="fab fa-soundcloud"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-tumblr pull-left m-r-5 m-b-5"><span class="fab fa-tumblr"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-twitter pull-left m-r-5 m-b-5"><span class="fab fa-twitter"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-vimeo pull-left m-r-5 m-b-5"><span class="fab fa-vimeo-square"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-vk pull-left m-r-5 m-b-5"><span class="fab fa-vk"></span></a>
					<a href="javascript:;" class="btn btn-social-icon btn-yahoo pull-left m-r-5 m-b-5"><span class="fab fa-yahoo"></span></a>
				</div>
				<div class="m-b-10"><b>Different Sizes</b></div>
				<div class="m-b-10">
					<p>
						<a href="javascript:;" class="btn btn-social btn-lg btn-facebook m-r-5"><i class="fab fa-facebook"></i>Sign in with Facebook</a>
						<a href="javascript:;" class="btn btn-social-icon btn-lg btn-facebook"><i class="fab fa-facebook"></i></a>
					</p>
					<p>
						<a href="javascript:;" class="btn btn-social btn-facebook m-r-5"><i class="fab fa-facebook"></i>Sign in with Facebook</a>
						<a href="javascript:;" class="btn btn-social-icon btn-facebook"><i class="fab fa-facebook"></i></a>
					</p>
					<p>
						<a href="javascript:;" class="btn btn-social btn-sm btn-facebook m-r-5"><i class="fab fa-facebook"></i>Sign in with Facebook</a>
						<a href="javascript:;" class="btn btn-social-icon btn-sm btn-facebook"><i class="fab fa-facebook"></i></a>
					</p>
					<p>
						<a href="javascript:;" class="btn btn-social btn-xs btn-facebook m-r-5"><i class="fab fa-facebook"></i>Sign in with Facebook</a>
						<a href="javascript:;" class="btn btn-social-icon btn-xs btn-facebook"><i class="fab fa-facebook"></i></a>
					</p>
				</div>
			</div>
			<!-- end col-4 -->
		</div>
		<!-- end row -->
	</div>
</template>