Stacked Social Sharing Buttons for Bootstrap

Learn how-to create stacked social sharing buttons using Bootstrap, which is a great addition to any sidebar.

HTML

You may add any social network that you wish. By default, I've included Twitter, Facebook, LinkedIn and Reddit. Just ensure that you add the links between <div class="share-sidebar"></div>.

<div class="share-sidebar">
    <a href="" title="Share on Twitter" target="_blank" data-toggle="tooltip" data-placement="left" class="btn btn-twitter btn-block"><strong>Share on</strong> Twitter</a>
    <a href="" title="Share on Facebook" target="_blank" data-toggle="tooltip" data-placement="left" class="btn btn-facebook btn-block"><strong>Share on</strong> Facebook</a>
    <a href="" title="Share on LinkedIn" target="_blank" data-toggle="tooltip" data-placement="left" class="btn btn-linkedin btn-block"><strong>Share on</strong> LinkedIn</a>
    <a href="" title="Share on Reddit" target="_blank" data-toggle="tooltip" data-placement="left" class="btn btn-reddit btn-block"><strong>Share on</strong> Reddit</a>
  </div>

CSS

The following is the CSS you will need to create the stacked social sharing buttons. Remember only Twitter, Facebook, LinkedIn and Reddit are included by default, so if you added any other social network buttons, you will also need to create the CSS for it.

.share-sidebar {
  width: 100%;
}
.btn-block {
  display: block;
  width: 100%;
}
.btn-block + .btn-block {
  margin-top: 0;
}
.share-sidebar .btn {
  padding: 10px;
  margin-top: 0;
  margin-bottom: 0;
}
.btn-twitter {
  background: #00acee;
  border-radius: 0;
  color: #fff;
}
.btn-twitter:link,
.btn-twitter:visited {
  color: #fff;
}
.btn-twitter:active,
.btn-twitter:hover {
  background: #0087bd;
  color: #fff;
}
.btn-facebook {
  background: #3b5998;
  border-radius: 0;
  color: #fff;
}
.btn-facebook:link,
.btn-facebook:visited {
  color: #fff;
}
.btn-facebook:active,
.btn-facebook:hover {
  background: #30477a;
  color: #fff;
}
.btn-linkedin {
  background: #0e76a8;
  border-radius: 0;
  color: #fff;
}
.btn-linkedin:link,
.btn-linkedin:visited {
  color: #fff;
}
.btn-linkedin:active,
.btn-linkedin:hover {
  background: #0b6087;
  color: #fff;
}
.btn-reddit {
  background: #EE3825;
  border-radius: 0;
  color: #fff;
}

.btn-reddit:link, .btn-reddit:visited {
  color: #fff;
}

.btn-reddit:active, .btn-reddit:hover {
  background: #b81e0e;
  color: #fff;
}