How to add a button and a text on an image and make them responsive?

Question

I am new to the web designing and I am trying to put a button and a text on an image. I could do this but the problem is that it's not responsive. Could somebody help me fix it?

My code:

.imagewrap {display:inline-block;position:relative;}
.bookbutton {position:absolute;bottom:25px;left:505px;}

.bottom-left {
  position: absolute;
  bottom: 25px;
  left: 20px;
  font-weight: bold;
  font-stretch:ultra-condensed;
  font-size: 20px;
  padding-right: 10px;
  padding-left: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="main_heading my-5">
  <div class="text-center">
    <h1 class="display-1">Games available for paying</h1>
    <h5 class="display-6">Book your slot now</h5>
    <hr class="w-25 mx-auto" />
  </div>

  <div class="container">
    <div class="row">

      <div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
        <figure>
          <img src="https://via.placeholder.com/150" alt="FIFA 2020" class="img-fluid naFIFA ">
        </figure>
        <div class="bottom-left p-6 mb-0 bg-secondary text-light "> FIFA 2020 </div>
        <button type="button" class="btn btn-info bookbutton ">Book Now</button>
      </div>

      <div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
        <figure>
          <img src="https://via.placeholder.com/150" alt="NFS Heat" class="img-fluid naNFS">
        </figure>
        <button type="button" class="btn btn-info bookbutton">Book Now</button>
        <div class="bottom-left p-6 mb-0 bg-secondary text-light"> NFS- Heat </div>
      </div>

      <div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
        <figure>
          <img src="https://via.placeholder.com/150" alt="Controller" class="img-fluid naNFS">
        </figure>
        <button type="button" class="btn btn-info bookbutton">Book Now</button>
        <div class="bottom-left p-6 mb-0 bg-secondary text-light"> DualShock 4 </div>
      </div>

    </div>
  </div>
</section>

I have done it with the help of some online tutorials and I want to use Bootstrap in my code.

Edit: I forgot to mention that I have the problem with the button, which always stays in the same place when I resize the browser. Other items seem to be OK to me, but kindly point out if I have made any other blunders in my code as a newbie.

Answer 1

Here is your answer just change your images and don't forget to link bootstrap 4. Otherwise it will overlap the content.

.bookbutton {
        position: absolute;
        bottom: 25px;
        right: 20px;
      }

      .bottom-left {
        position: absolute;
        bottom: 25px;
        left: 20px;
        font-weight: bold;
        font-stretch: ultra-condensed;
        font-size: 20px;
        padding-right: 10px;
        padding-left: 10px;
      }

<section class="main_heading my-5">
      <div class="text-center">
        <h1 class="display-1">Games available for paying</h1>
        <h5 class="display-6">Book your slot now</h5>
        <hr class="w-25 mx-auto" />
      </div>

      <div class="container">
        <div class="row">
          <div class="col-12 col-md-6 mb-4">
            <div class="position-relative">
              <img
                src="https://placeimg.com/640/480/nature"
                alt="FIFA 2020"
                class="img-fluid naFIFA"
              />
              <span class="bottom-left p-6 mb-0 bg-secondary text-light">
                FIFA 2020
              </span>
              <button type="button" class="btn btn-info bookbutton">
                Book Now
              </button>
            </div>
          </div>

          <div class="col-12 col-md-6 mb-4">
            <div class="position-relative">
              <img
                src="https://placeimg.com/640/480/nature"
                alt="FIFA 2020"
                class="img-fluid naFIFA"
              />
              <span class="bottom-left p-6 mb-0 bg-secondary text-light">
                NFS-HEAT
              </span>
              <button type="button" class="btn btn-info bookbutton">
                Book Now
              </button>
            </div>
          </div>

          <div class="col-12 col-md-6 mb-4">
            <div class="position-relative">
              <img
                src="https://placeimg.com/640/480/nature"
                alt="FIFA 2020"
                class="img-fluid naFIFA"
              />
              <span class="bottom-left p-6 mb-0 bg-secondary text-light">
                Dualshock 4
              </span>
              <button type="button" class="btn btn-info bookbutton">
                Book Now
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>

Answer 2

Change left:505px; on .bookbutton to right: 0; and it will stay on the right side of the container.

full code:

.imagewrap {
  display: inline-block;
  position: relative;
}

.bookbutton {
  position: absolute;
  bottom: 25px;
  right: 0;
}

.bottom-left {
  position: absolute;
  bottom: 25px;
  left: 20px;
  font-weight: bold;
  font-stretch: ultra-condensed;
  font-size: 20px;
  padding-right: 10px;
  padding-left: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<section class="main_heading my-5">
  <div class="text-center">
    <h1 class="display-1">Games available for paying</h1>
    <h5 class="display-6">Book your slot now</h5>
    <hr class="w-25 mx-auto" />
  </div>

  <div class="container">
    <div class="row">

      <div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
        <figure>
          <img src="https://via.placeholder.com/150" alt="FIFA 2020" class="img-fluid naFIFA ">
        </figure>
        <div class="bottom-left p-6 mb-0 bg-secondary text-light "> FIFA 2020 </div>
        <button type="button" class="btn btn-info bookbutton ">Book Now</button>
      </div>

      <div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
        <figure>
          <img src="https://via.placeholder.com/150" alt="NFS Heat" class="img-fluid naNFS">
        </figure>
        <button type="button" class="btn btn-info bookbutton">Book Now</button>
        <div class="bottom-left p-6 mb-0 bg-secondary text-light"> NFS- Heat </div>
      </div>

      <div class="col-lg-6 col-md-6 col-12 col-xxl-6 imagewrap">
        <figure>
          <img src="https://via.placeholder.com/150" alt="Controller" class="img-fluid naNFS">
        </figure>
        <button type="button" class="btn btn-info bookbutton">Book Now</button>
        <div class="bottom-left p-6 mb-0 bg-secondary text-light"> DualShock 4 </div>
      </div>

    </div>
  </div>
</section>