Frontend Free Code
Frontend Free Code
Developers Codes
Graphics Photo
Crypto World
Code Tutorial
Javascript Codes
Home Home How to How to use Sitemap Sitemap About us About Us Suggested Posts Suggested Privacy Policy Privacy Policy

Feel The Power


content logo

Bootstrap Buttons:

Social Icons with Bootstrap Buttons

Previous CodePrevious Code Next CodeNext Code

Social sharing buttons are scattered everywhere across websites nowadays. They are basically little icons for Twitter, Facebook, Pinterest and other social networks. You could always use the link to navigate people to your social media pages but that is extremely basic and boring. Using buttons is way more intuitive and interesting. Instead of having to copy and paste each link, you can use a button that the users can click on to be taken to the page they need. These buttons seem like such an awesome idea. Well, that is because they are. These social icons can make sharing your content so much easier; however, you need to be careful. These buttons are not used all the time due to bad placement, lack of good designs, etc.

Due to this, we have some social network buttons for you in this post. These are Bootstrap colourful buttons designed to display social network icons. They are available in different sizes and various dimensions so you can use the one fir for your website. These Bootstrap social icons can be placed anywhere in the site either vertically or horizontally. The Bootstrap buttons include platforms such as Twitter, Facebook, Google Plus, and Pinterest. They also have all the vital SEO features to help your website rank better.

#

Bootstrap Button

#

Social Network Buttons

#

Bootstrap Colorful Buttons

#

Bootstrap Social Icons

<!-- This script got from frontendfreecode.com -->
<div class="sharebuttons btn-group">
	<a href="#" class="btn btn-twitter"><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest"><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div><code>btn-group</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group-xs">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div>  <code>btn-group-xs</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group btn-group-sm">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div> <code>btn-group-sm</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group-lg">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div> <code>btn-group-lg</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group-lg btn-group-justified">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div>
<code>btn-group-justified</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group-vertical">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div>
<code>btn-group-vertical</code>
<br>
<hr>
<br>
<div class="sharebuttons btn-group btn-group-lg showtext inline">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> Tweet</a>
	<a href="#" ><i class="fa fa-facebook"></i> Share</a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> Plus 1</a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> Link</a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> Pin</a>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
/* SHAREBUTTONS ========================= */
.sharebuttons a { color: #fff !important; }
.btn-facebook { background: #3b5998;}
.btn-twitter { background: #00acee;}
.btn-google { background: #dd4b39;}
.btn-pinterest { background: #c8232c;}
.btn-linkedin { background: #0e76a8;}
.btn-facebook:hover { background: #2f4679;}
.btn-twitter:hover { background: #0089bd;}
.btn-google:hover { background: #b03b2d;}
.btn-pinterest:hover { background: #9f1b23;}
.btn-linkedin:hover { background: #0b5e85;}
/* ====================== end SHAREBUTTONS */
body {font-size: 1.75em;padding: 40px;} span {display: none;}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script>
<style>
/* SHAREBUTTONS ========================= */
.sharebuttons a { color: #fff !important; }
.btn-facebook { background: #3b5998;}
.btn-twitter { background: #00acee;}
.btn-google { background: #dd4b39;}
.btn-pinterest { background: #c8232c;}
.btn-linkedin { background: #0e76a8;}
.btn-facebook:hover { background: #2f4679;}
.btn-twitter:hover { background: #0089bd;}
.btn-google:hover { background: #b03b2d;}
.btn-pinterest:hover { background: #9f1b23;}
.btn-linkedin:hover { background: #0b5e85;}
/* ====================== end SHAREBUTTONS */
body {font-size: 1.75em;padding: 40px;} span {display: none;}
</style>

</head>
<body>
<div class="sharebuttons btn-group">
	<a href="#" class="btn btn-twitter"><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest"><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div><code>btn-group</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group-xs">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div>  <code>btn-group-xs</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group btn-group-sm">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div> <code>btn-group-sm</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group-lg">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div> <code>btn-group-lg</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group-lg btn-group-justified">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div>
<code>btn-group-justified</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group-vertical">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div>
<code>btn-group-vertical</code>
<br>
<hr>
<br>
<div class="sharebuttons btn-group btn-group-lg showtext inline">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> Tweet</a>
	<a href="#" ><i class="fa fa-facebook"></i> Share</a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> Plus 1</a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> Link</a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> Pin</a>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview
Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes
TOP CODES
Toggle Switch Button for Changing Language with Bootstrap
Draggable Cards with Bootstrap Grids
Bootstrap Table with Add New Row Button
WHAT IS NEW IN KERIXA?
Glassy Chat Box Code with Reaction Emojis
Dark Neo Brutal Resume Template
Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability
Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability
Flat Photo Frame Template
Cute Photo Frame Template
16 React JS Accordions
17 React JS Buttons
RECENT CODES
Bootstrap Timeline with Colorful Lines and Icons
Simple Dark Vertical Timeline with Bootstrap
Colorful Icons for Bootstrap Timeline Joints
Bootstrap Vertical Timeline with Image Cards and Descriptions
Vertical Bootstrap Timeline in Half Page
Drop Down Menu by React JS
Animating React Popup with Float in and Zoom Effects
Popup vs. Alert Code using React JS
React Glassy Gradient Popup Modal
Animating Toggle Popup Menu with React JS
CATEGORIES
Bootstrap Accordions Bootstrap Buttons
Bootstrap Cards Bootstrap Footers
Bootstrap Forms Bootstrap Grids
Bootstrap Headers Bootstrap Paginations
Bootstrap Popups Bootstrap Progress Bars
Bootstrap Search Boxes Bootstrap Sidebars
Bootstrap Sliders Bootstrap Tables
Bootstrap Tabs Bootstrap Thumbnails
Bootstrap Timeline Bootstrap Toggle Switches
React Accordions React Buttons
React Forms React Headers
React Menus React Popups
React Progress Bars React Sidebars
Frontend Free Code
© 2024 Kerixa Inc