Bootstrap button with image and text example

GuideHub

May 18, 2022

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this tutorial, we will learn to create a bootstrap button with an image and text.

To create a bootstrap button you have to use at least 2 classes:

btn- The btn class provides the basic structure to the button, like padding, border, border-radius, etc
btn-*- The classes like btn-primary, btn-danger, btn-success, etc specifies color, background-color and border-color to the button. Which gives different look to the button. Here, we will use .btn class to make a button in bootstrap.

Table of contents

Includes bootstrap view
Includes bootstrap library
Define its class name
Includes css in html page

This article will guide you to adding button block in Bootstrap with example.

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Step 2: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

<!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <link rel="stylesheet" href="css/stylesheet.css">

Step 3: Define its class name

After that, create the button with image with a class name .btn btn-success.

    <h1> Bootstrap button with image and text example </h1>
    <button class="btn btn-success">
        <img src="image/apple-logo.jpg" width="30" /> Sign In Apple Logo
    </button>
    <button class="btn btn-primary">
        <img src="image/Beautiful-Facebook.jpg" width="30" /> Sign In with Facebook
    </button>
    <button class="btn btn-danger">
        <img src="image/istockphoto.jpg" width="30" /> Sign In with Istockphoto
    </button>

    <button class="btn btn-dark">
        <img src="image/logo-icon.jpg" width="30" /> Sign In with Logo Icon
    </button>

Example.

Let’s look at the following example to understand how it basically works:

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <link rel="stylesheet" href="css/stylesheet.css">

    <title>Bootstrap</title>
</head>

    <h1> Bootstrap button with image and text example </h1>
    <button class="btn btn-success">
        <img src="image/apple-logo.jpg" width="30" /> Sign In Apple Logo
    </button>
    <button class="btn btn-primary">
        <img src="image/Beautiful-Facebook.jpg" width="30" /> Sign In with Facebook
    </button>
    <button class="btn btn-danger">
        <img src="image/istockphoto.jpg" width="30" /> Sign In with Istockphoto
    </button>

    <button class="btn btn-dark">
        <img src="image/logo-icon.jpg" width="30" /> Sign In with Logo Icon
    </button>
</body>

</html>

Check the output of the above code example.

All the best 👍

GuideHub’s Newsletter

Discussion about this post