How to create a button on the image in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To create a button on the image in bootstrap, put the .btn class and <img src="image/autumn-poolside.jpg">, and use css class. it will create a button on the image in bootstrap.

Today, I am going to show you. how to create a button on the image in bootstrap with code example.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Define its css class

This article will guide you to creating a button on the image 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">

Step 2: Includes bootstrap library

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

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Step 3: Define its css class

After that, create a button on the image and use of css class .container .btn position of absolute, top of 50%, background-color of #ee99d6, color of white.

.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.container img {
  width: 100%;
  height: auto;
  padding-bottom: 80px;
}

.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #ee99d6;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  
}

.container .btn:hover {
  background-color: rgb(136, 229, 207);
}

Example.

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

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Create a button on the image in bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        .container {
          position: relative;
          width: 100%;
          max-width: 400px;
        }
        
        .container img {
          width: 100%;
          height: auto;
          padding-bottom: 80px;
        }
        
        .container .btn {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          background-color: #ee99d6;
          color: white;
          font-size: 16px;
          padding: 10px 20px;
          border: none;
          cursor: pointer;
          border-radius: 5px;
          text-align: center;
          
        }
        
        .container .btn:hover {
          background-color: rgb(136, 229, 207);
        }
        </style>
</head>
    <body>
        <h3 class="text-center">how to create a button on the image in bootstrap</h3>
        <div class="container">
            <img src="image/autumn-poolside.jpg" alt="image" style="width:100%">
            <button class="btn">Button</button>
        </div>
    </body>

</html>

Check the output of the above code example.

Bootstrap, button, on, image

All the best 👍

Premium Content

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

Books

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.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Stay tuned working on React Js Cheat Sheets Book

Related Posts