Why is my display element not responsive?

Question

I would like my header to change with the page size, so I used bootstrap display, but it is not responsive. I am working in Vue JS 3.

The element:

.header-title {
    font-family: Poppins, sans-serif;
    color: #555555;
}

  <h1 class="header-title display-4">Title</h1>

The styles displayed in the console no matter the screen size.

.header-title {
    font-family: Poppins, sans-serif;
    color: #555555;
}

.display-4 {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.2;
}

 <h1 class="header-title display-4">Title</h1>