Q:

Bootstrap 4: Text on image displaced on difference screen size

I want the text to look like this on my image:

which is slightly away from the "Center" point of the image(as i want to avoid the phone in the image), so text-center wouldnt work. I currently set the division of the row to "relative" and the text to "Absolute" in order to even get the text on top of the image. But when i resize the image, it will be displaced.
Code:
<section>
  <div class="col-lg-12 text-center"style="margin: 0;padding: 0;position: relative;">
    <img class="img-fluid" style="width:100%;" src="img/phone-transparent.png" alt=""></img>
    <h2 style="color:red;position: absolute; top: 120px; width: 100%;">This is also</br>available on your mobile.</h2>
  </div>
</section>

On original screensize:

On a different screensize:

A:

This can be done using only Bootstrap 4 classes. Read the documentation on using the grid, and the utility classes for positioning and flexbox. You don't need all the inline CSS styles.
<div class="container-fluid">
    <section class="row no-gutter align-items-center">
        <div class="col-lg-12 text-center p-0 d-flex align-items-center">
            <img class="img-fluid position-relative mx-auto" src="//placehold.it/1900x400" alt="">
            <h3 class="w-100 position-absolute text-danger my-auto">This is also<br>available on your mobile.</h3>
        </div>
    </section>
</div>

Demo

Remember that .col-* must be placed in the .row, and the .row
  should be inside a container.

You can use the spacing utils and CSS object-fit on the image to get the position and size: Demo 2 (you will need to tweak this as desired).

