How can i do responsive text that is over an image with bootstrap 4

Question

I have an image that has content inside, i want the letters that are inside of the image to be responsive, when i resize the screen the letters should have the same proportions, but now they overlap each other when resizing screen, i need to do it only with the grid of bootstrap, cant be with media queries

 .banner{ position: relative; } .heading-annual{ position: absolute; top: 10%; color: whitesmoke; left: 7%; } .heading-medicine{ position: absolute; top: 25%; color: whitesmoke; left: 7%; } .heading-manchester{ position: absolute; top: 43%; color: whitesmoke; left: 7%; } .heading-date{ position: absolute; top: 55%; color: whitesmoke; left: 7%; }

 <div class="container-fluid px-0"> <div class="row"> <div class="col-md-12 col-lg-12 banner"> <img src="https://rcpmedicine.co.uk/wp-content/uploads/2018/11/new_banner_home.png" height="100%" width="100%" > </div> </div> </div> <h1 class="heading-annual">RCP annual conference</h1> <h1 class="heading-medicine">Medicine 2019</h1> <h4 class="heading-manchester">Manchester Central</h4> <h4 class="heading-date">25-26 April 2019</h4>

Answer 1

Is there any reason you must use img? Could you not use background image instead?

Try this.

 .banner { min-height: 500px; display: flex; align-items: center; background-image: url(https://rcpmedicine.co.uk/wp-content/uploads/2018/11/new_banner_home.png); background-size: cover; background-repeat: no-repeat; background-position: center; padding: 50px; color: white; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container-fluid banner"> <div class="row"> <div class="col-md-12 col-lg-12 "> <h1 class="heading-annual">RCP annual conference</h1> <h1 class="heading-medicine">Medicine 2019</h1> <h4 class="heading-manchester">Manchester Central</h4> <h4 class="heading-date">25-26 April 2019</h4> </div> </div> </div>