bootstrap 5 social media icon button example

Bootstrap 5 Social Media Icon Button Example

06/22 By frontendshape

In today’s tutorial, we will see how to use social media button in bootstrap 5. For this section we will see social media icon buttons, social media sharing button, social media gradient button. We will create all icon button using font awesome 6.


Bootstrap 5 Social Media Icon Button Example

1. Bootstrap 5 social median button using font awsome 6.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap 5 Social Media Icon Button</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- font asesome 6 cdn -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.css">
  </head>

  <body>
    <button class="btn btn-danger" type="button">
      <i class="fa-brands fa-youtube"></i>
    </button>
    <button class="btn btn-info" type="button">
      <i class="fa-brands fa-twitter text-white"></i>
    </button>
    <button class="btn btn-primary" type="button">
      <i class="fa-brands fa-facebook"></i>
    </button>
    <button class="btn btn-danger" type="button">
      <i class="fa-brands fa-instagram"></i>
    </button>
    <button class="btn btn-success" type="button">
      <i class="fa-brands fa-whatsapp"></i>
    </button>
    <button class="btn btn-dark" type="button">
      <i class="fa-brands fa-github"></i>
    </button>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

  </body>

</html>
bootstrap 5 social media icon button

bootstrap 5 social media icon button


2. Bootstrap 5 social media share buttons with font awesome 6 icons. share button with, Youtube, twitter, Facebook, Whatsapp etc..

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap 5 Social media share buttons</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- font asesome 6 cdn -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.css">
  </head>

  <body>
    <button class="btn btn-danger" type="button">
      <span><i class="fa-brands fa-youtube"></i></span> <span>Youtube</span>
    </button>
    <button class="btn btn-info" type="button">
      <span><i class="fa-brands fa-twitter text-white"></i></span><span class="text-white">Twitter</span>
    </button>
    <button class="btn btn-primary" type="button">
      <span> <i class="fa-brands fa-facebook"></i></span> <span>Facebook</span>
    </button>
    <button class="btn btn-danger" type="button">
      <span> <i class="fa-brands fa-instagram"></i> </span> <span>instagram</span>
    </button>
    <button class="btn btn-success" type="button">
      <span> <i class="fa-brands fa-whatsapp"></i> </span> <span>Whatsapp</span>
    </button>
    <button class="btn btn-dark" type="button">
      <span><i class="fa-brands fa-github"></i></span> <span>GitHub</span>
    </button>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

  </body>

</html>
Bootstrap 5 Social media share buttons

Bootstrap 5 Social media share buttons

3. Bootstrap 5 social media share outline buttons with font awesome 6 icons.

<button class="btn btn-outline-danger" type="button">
  <span><i class="fa-brands fa-youtube"></i></span> <span>Youtube</span>
</button>
<button class="btn btn-outline-info" type="button">
  <span><i class="fa-brands fa-twitter text-info"></i></span><span class="text-info">Twitter</span>
</button>
<button class="btn btn-outline-primary" type="button">
  <span> <i class="fa-brands fa-facebook"></i></span> <span>Facebook</span>
</button>
<button class="btn btn-outline-danger" type="button">
  <span> <i class="fa-brands fa-instagram"></i> </span> <span>instagram</span>
</button>
<button class="btn btn-outline-success" type="button">
  <span> <i class="fa-brands fa-whatsapp"></i> </span> <span>Whatsapp</span>
</button>
<button class="btn btn-outline-dark" type="button">
  <span><i class="fa-brands fa-github"></i></span> <span>GitHub</span>
</button>
bootstrap 5 social media outline button

bootstrap 5 social media outline button

4. Bootstrap 5 social media share gradient buttons with font awesome 6 icons.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap 5 Social media share gradient buttons</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- font asesome 6 cdn -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.css">
  </head>

  <body>


    <button class="btn bg-danger bg-gradient" type="button">
      <span><i class="fa-brands fa-youtube text-white"></i></span> <span class="text-white">Youtube</span>
    </button>
    <button class="btn bg-info bg-gradient" type="button">
      <span><i class="fa-brands fa-twitter text-white"></i></span><span class="text-info text-white">Twitter</span>
    </button>
    <button class="btn bg-primary bg-gradient" type="button">
      <span> <i class="fa-brands fa-facebook text-white"></i></span> <span class="text-white">Facebook</span>
    </button>
    <button class="btn bg-danger bg-gradient" type="button">
      <span> <i class="fa-brands fa-instagram text-white"></i> </span> <span class="text-white">instagram</span>
    </button>
    <button class="btn bg-success bg-gradient" type="button">
      <span> <i class="fa-brands fa-whatsapp text-white"></i> </span> <span class="text-white">Whatsapp</span>
    </button>
    <button class="btn bg-dark bg-gradient" type="button">
      <span><i class="fa-brands fa-github text-white"></i></span> <span class="text-white">GitHub</span>
    </button>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

  </body>

</html>
Bootstrap 5 Social media share gradient buttons

Bootstrap 5 Social media share gradient buttons


Enter Your Search Query