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>

(RFS) Responsive font sizes would be helpful for you. RFS can be enabled by changing the $enable-responsive-font-sizes Sass variable to true and recompiling Bootstrap. — Behrouz Pooladrak, Mar 30 '20 at 21:30
And also check this https://stackoverflow.com/questions/14537611/bootstrap-responsive-text-size — Behrouz Pooladrak, Mar 30 '20 at 21:32

score 0 · Accepted Answer · answered Mar 30 '20 at 22:47

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>

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

1 Answers1