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
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
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
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