Bootstrap 5 Social Media Buttons with Icons

This code snippet helps you to create social media buttons with icons for your Bootstrap 5 projects. It uses Font Awesome 4 icons and Bootstrap 5 native buttons classes to create awesome buttons. You can easily integrate these buttons into a social sharing project, login with social media profile, or link to your social profiles.

How to Create Bootstrap 5 Social Media Buttons

1. Load the Bootstrap 5 Framework and Font Awesome CSS by adding the following CDN link into the head tag of your HTML document.

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- Bootstrap 5 JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- Font Awesome 4-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

2. After that, create HTML structure for the social buttons as follows:

<div class="container">
  <div class="row">
    <div class="col social-buttons">
    <h3>Social Links</h3>
    <a class="btn btn-social text-white btn-bitbucket"><i class="fa fa-bitbucket"></i> Bitbucket</a>
    <a class="btn btn-social text-white btn-dropbox"><i class="fa fa-dropbox"></i> Dropbox</a>
    <a class="btn btn-social text-white btn-facebook"><i class="fa fa-facebook"></i> Facebook</a>
    <a class="btn btn-social text-white btn-flickr"><i class="fa fa-flickr"></i> Flickr</a>
    <a class="btn btn-social text-white btn-github"><i class="fa fa-github"></i> GitHub</a>
    <a class="btn btn-social text-white btn-google-plus"><i class="fa fa-google-plus"></i> Google</a>
    <a class="btn btn-social text-white btn-instagram"><i class="fa fa-instagram"></i> Instagram</a>
    <a class="btn btn-social text-white btn-linkedin"><i class="fa fa-linkedin"></i> LinkedIn</a>
    <a class="btn btn-social text-white btn-pinterest"><i class="fa fa-pinterest"></i> Pinterest</a>
    <a class="btn btn-social text-white btn-tumblr"><i class="fa fa-tumblr"></i> Tumblr</a>
    <a class="btn btn-social text-white btn-twitter"><i class="fa fa-twitter"></i> Twitter</a>
    <a class="btn btn-social text-white btn-vk"><i class="fa fa-vk"></i> VK</a>
    </div>
  </div>
</div>

3. Finally, customize the social buttons with additional CSS.

.btn.btn-social {
 border: 0;
  position: relative;
  padding-left: 44px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
    margin: 5px;
}
.btn.btn-social :first-child {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  line-height: 43px;
  font-size: 1.6em;
  text-align: center;
  border-right: 1px solid rgba(0,0,0,0.2);
}

.btn.btn-social-icon {
  position: relative;
  padding-left: 44px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 34px;
  width: 34px;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 4px;
}
.btn.btn-social-icon :first-child {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  line-height: 34px;
  font-size: 1.6em;
  text-align: center;
  border-right: 1px solid rgba(0,0,0,0.2);
  border: none;
  text-align: center;
  width: 100% !important;
}

.btn.btn-bitbucket {
  color: #fff;
  background-color: #205081;
  border-color: rgba(0,0,0,0.2);
}
.btn-bitbucket:hover,
.btn-bitbucket:focus,
.btn-bitbucket:active,
.btn-bitbucket.active,
.open .dropdown-toggle.btn-bitbucket {
  color: #fff;
  background-color: #183c60;
  border-color: rgba(0,0,0,0.2);
}
.btn-bitbucket:active,
.btn-bitbucket.active,
.open .dropdown-toggle.btn-bitbucket {
  background-image: none;
}
.btn-bitbucket.disabled,
.btn-bitbucket[disabled],
fieldset[disabled] .btn-bitbucket,
.btn-bitbucket.disabled:hover,
.btn-bitbucket[disabled]:hover,
fieldset[disabled] .btn-bitbucket:hover,
.btn-bitbucket.disabled:focus,
.btn-bitbucket[disabled]:focus,
fieldset[disabled] .btn-bitbucket:focus,
.btn-bitbucket.disabled:active,
.btn-bitbucket[disabled]:active,
fieldset[disabled] .btn-bitbucket:active,
.btn-bitbucket.disabled.active,
.btn-bitbucket[disabled].active,
fieldset[disabled] .btn-bitbucket.active {
  background-color: #205081;
  border-color: rgba(0,0,0,0.2);
}
.btn-dropbox {
  color: #fff;
  background-color: #1087dd;
  border-color: rgba(0,0,0,0.2);
}
.btn-dropbox:hover,
.btn-dropbox:focus,
.btn-dropbox:active,
.btn-dropbox.active,
.open .dropdown-toggle.btn-dropbox {
  color: #fff;
  background-color: #0d70b7;
  border-color: rgba(0,0,0,0.2);
}
.btn-dropbox:active,
.btn-dropbox.active,
.open .dropdown-toggle.btn-dropbox {
  background-image: none;
}

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.