Aunque ya tienes 2 respuestas que solucionan el problema, yo te daré un enfoque más conservador.
En primer lugar, los elementos HTML tienen una semántica que debemos respetar siempre que sea posible.
De la documentación para los elementos tipo <H1> ... <H6>
(elementos de título) tenemos:
La información de encabezado puede ser usada por los agentes usuarios, por ejemplo, para construir una tabla de contenidos para un documento automáticamente.
No se deben usar niveles inferiores para reducir el tamaño de la fuente: use la propiedad CSS font-size para eso.
Una forma típica de navegación que utilizan las personas no videntes es moverse a través de la pantalla con las etiquetas de encabezado. De esta forma, pueden conocer rápidamente el contenido de la página en poco tiempo; por esta razón es importante prestar mucha atención a nuestras etiquetas de encabezado y no saltearse ningún nivel o podríamos confundir a este usuario.
Entonces, mi sugerencia es: no usar los elementos de encabezado o elementos título de forma no coherente. Para ello Bootstrap nos provee de la herramienta adecuada en CSS para hacer lo que pretendes sin crear un documento HTML con una sintaxis confusa para algunos casos de uso.
Lo que pretendes lograr lo puedes hacer sin ningún problema usando una etiqueta span
, la cual es un contenedor en línea a la cual le puedes aplicar los estilos h1 ... h6
definidos en tu archivo de estilos.
Por ejemplo:
/* Estilos para los elementos Hx */
h2 {
font-size: 1.3rem;
},
h4 {
font-size: 1rem;
}
/*Estilos personalizados para la clase .hx */
.h2 {
font-size: 1.3rem;
},
.h4 {
font-size: 1rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div>
<h1>Título Principal</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<h2>Título Secundario</h2>
<span class="h1">Hola</span>
<span class="h2">Hola</span>
<span class="h4">Hola</span>
</div>
De esta forma estaremos siendo respetuosos con el propósito de las etiquetas de título. Y estamos usando las herramientas que nos provee Bootstrap (en este caso) o las que consideremos apropiadas (estilos personalizados).
Como se puede observar, la primera etiqueta <span>
utiliza el estilo asignado por Bootstrap para .h1
Las clases .h1
hasta .h6
también están disponibles, para cuando se desee hacer coincidir el estilo de fuente de un elemento tipo título pero no se puede usar el elemento HTML asociado.