Bootstrap button with image and text example
May 18, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
To make a button with an image and text using bootstrap, you can put the image and text in the bootstrap button tag so it will show the button with the image and text.
Here is a short example of a design bootstrap button with an image and text.
<button class="btn btn-success">
<img src="image/apple-logo.jpg" width="30" /> Sign In Apple Logo
</button>
To button look cool choose an image the same size as the button height.
Maybe you are looking for it?
Bootstrap image with description example
Bootstrap image with description example
In this article, we will see
- Bootstrap 5 button with image and text
- Bootstrap 4 button with image and text
- Bootstrap 3 button with image and text
Let’s start today’s tutorial Bootstrap button with icon and text example
Bootstrap 5 button with image and text
To use the bootstrap 5 button and their class we have to install bootstrap 5 libraries and here we use CDN to install bootstrap 5 in this example.
Bootstrap 5 Installation
First, add the below meta tag in your html file in the head tag for proper responsive behavior on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1">
Add below CSS link in your head tag to install the bootstrap 5 library
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
and javascript scripts in your body tag.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Put the below javascript scripts in your body tag if you planning to use dropdowns, popovers, or tooltips in your project.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
Example of bootstrap 5 buttons with image and text
Here, we will make a Facebook social login button and to show the Facebook logo on the button I will use the Facebook icon with text on the button.
here is the sample code of the Bootstrap 5 button with icon and text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<style>
.button-container {
padding: 20px;
}
.facebook {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="button-container">
<button class="btn btn-md btn-primary facebook">
<img src="image/facebook.png" width="25" /><span
style="margin-left: 10px;"
>Facebook</span
>
</button>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
</body>
</html>
The output of the above program of bootstrap 5 buttons with image and text.
Here, we are provided code sandbox links for the above program for the bootstrap 5 buttons with image and text. Then you can use it whenever you want and do the changes as per your requirements.
Example of bootstrap 5 buttons with icon and text
To make the bootstrap 5 buttons with icon and text we will use fontawesome for the icon, to install fontawesome in your project you need fontawesome css and js files.
You can use the mentioned font awesome link and script below example or you can generate your own link which you will get in fontawesome website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://kit.fontawesome.com/0c0e49e11e.css"
crossorigin="anonymous"
/>
<style>
.button-container {
padding: 20px;
}
</style>
</head>
<body>
<div class="button-container">
<button class="btn btn-md btn-primary">
<i class="fa fa-facebook"></i> Facebook
</button>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
<script
src="https://kit.fontawesome.com/0c0e49e11e.js"
crossorigin="anonymous"
></script>
</body>
</html>
The output of the above program of bootstrap 5 buttons with icon and text.
Here, we are provided code sandbox links for the above program for the bootstrap 5 button with icon and text. Then you can use it whenever you want and do the changes as per your requirements.
Bootstrap 4 button with image and text
To use the bootstrap 4 button and their class we have to install the bootstrap 4 library and here we use CDN to install bootstrap 4 in this example.
Bootstrap 4 Installation
First, add the below meta tag in your html file in the head tag for proper responsive behavior on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1">
Add below CSS link in your head tag to install the bootstrap 4 library
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
and javascript scripts in your body tag.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
Example of bootstrap 4 buttons with image and text
Here, we will make a google social login button and to show the google logo on the button I will use the google icon with text on the button.
here is the sample code of the bootstrap 4 button with image and text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<style>
.button-container {
padding: 20px;
}
.facebook {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="button-container">
<button class="btn btn-md btn-danger facebook">
<img src="image/google.png" width="25" /><span
style="margin-left: 10px;"
>Google</span
>
</button>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"
></script>
</body>
</html>
The output of the above program of bootstrap 4 buttons with image and text.
Here, we are provided code sandbox links for the above program for the bootstrap 4 buttons with image and text. Then you can use it whenever you want and do the changes as per your requirements.
Example of bootstrap 4 buttons with icon and text
To make the bootstrap 4 buttons with icon and text we will use fontawesome for the icon, to install fontawesome in your project you need fontawesome css and js files.
You can use the mention fontawesome link and script below example or you can generate your own link which you will get in fontawesome website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://kit.fontawesome.com/0c0e49e11e.css"
crossorigin="anonymous"
/>
<style>
.button-container {
padding: 20px;
}
.google {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="button-container">
<button class="btn btn-md btn-danger">
<i class="fa fa-google"></i> Google
</button>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"
></script>
<script
src="https://kit.fontawesome.com/0c0e49e11e.js"
crossorigin="anonymous"
></script>
</body>
</html>
The output of the above program of bootstrap 4 buttons with icon and text.
Here, we are provided code sandbox links for the above program for the bootstrap 4 buttons with icon and text. Then you can use it whenever you want and do the changes as per your requirements.
Bootstrap 3 button with image and text
To use the bootstrap 3 button and their class we have to install the bootstrap 3 library and here we use CDN to install bootstrap 3 in this example.
Bootstrap 3 Installation
First, add the below meta tag in your html file in the head tag for proper responsive behavior on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1">
Add below CSS link in your head tag to install the bootstrap 3 library
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
and javascript scripts in your body tag.
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
Example of bootstrap 3 buttons with image and text
Here, we will make a twitter social login button and to show the twitter logo on the button I will use the twitter icon with text on the button.
here is the sample code of the bootstrap 3 buttons with image and text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
crossorigin="anonymous"
/>
<!-- Optional theme -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css"
integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ"
crossorigin="anonymous"
/>
<style>
.button-container {
padding: 20px;
}
.twitter {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="button-container">
<button class="btn btn-md btn-primary twitter">
<img src="image/twitter.png" width="25" /><span
style="margin-left: 10px;"
>Twitter</span>
</button>
</div>
<!-- Latest compiled and minified JavaScript -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"
></script>
</body>
</html>
The output of the above program of bootstrap 3 buttons with image and text.
Here, we are provided code sandbox links for the above program for the bootstrap 3 button with image and text. Then you can use it whenever you want and do the changes as per your requirements.
Example of bootstrap 3 buttons with icon and text
To make the bootstrap 3 buttons with icon and text we will use fontawesome for the icon, to install fontawesome in your project you need fontawesome css and js files.
You can use the mentioned fontawesome link and script below example or you can generate your own link which you will get in fontawesome website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css"
integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://kit.fontawesome.com/0c0e49e11e.css"
crossorigin="anonymous"
/>
<style>
.button-container {
padding: 20px;
}
.twitter {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="button-container">
<button class="btn btn-md btn-primary twitter">
<i class="fa fa-twitter"></i> <span
style="margin-left: 10px;"
>Twitter</span>
</button>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"
></script>
<script
src="https://kit.fontawesome.com/0c0e49e11e.js"
crossorigin="anonymous"
></script>
</body>
</html>
The output of the above program of bootstrap 3 buttons with icon and text.
Here, we are provided code sandbox links for the above program for the bootstrap 3 buttons with icon and text. Then you can use it whenever you want and do the changes as per your requirements.
Happy Coding,
I hope the above example with help you to do your task.