В мобильной версии страницы стандартные HTML элементы H1-H6 могут выглядеть сильно больше, чем это нужно для размеров блоков. Может появляться горизонтальная прокрутка. Напоминаю, что в 2020 году — это очень НЕ круто.
«Первый экран» который увидит пользователь на мобилке скорее всего будет содержать HTML заголовок H1. В некоторых тематиках этот заголовок будет содержать длинные слова, которые нужно будет переносить классом «text-break«. Из-за этого может получиться так, что перенесённая одна буква от слова будет занимать целую строку места на экране пользователя. Убого и растратно. Оно вам надо?
Как уменьшить размер заголовка в Bootstrap? (способ без правки основных конфигов)
Чтобы этого избежать, можно воспользоваться подменой размеров HTML заголовков и присваивать им классы с одноимёнными названиями. Это нужно делать для того, чтобы не страдало SEO. Есть куча алгоритмов ранжирования, которые в первую очередь смотрят на разметку, а уже потом на «визуальный» внешний вид.
Итак может получиться:
<h1 class="h3">Я волшебный верстальщик</h1>
В этом примере элемент разметки «h1» имеет класс «h3». Визуально текст заголовка уменьшится и сумеет эстетичнее встроиться в блок.
