Bootstrap button with image and text example

Hi 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

  1. Bootstrap 5 button with image and text
  2. Bootstrap 4 button with image and text
  3. 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.

bootstrap 5, 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.

Try It Yourself

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.

bootstrap 5, 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.

Try It Yourself

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.

bootstrap 4, 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.

Try It Yourself

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.

bootstrap 4, 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.

Try It Yourself

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.

bootstrap 3, 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.

Try It Yourself

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.

bootstrap 3, 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.

Try It Yourself

Happy Coding,

I hope the above example with help you to do your task.

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts