7

Quiero poner en Bootstrap un contenido determinado que sea texto con dos estilos distintos, algo así como:

Holahola

O bien:

Holahola

Usando fundamentalmente propiedades CSS que ya tengo definidas en los h1, h2, h3, h4, etc.

Mi primera idea fue poner:

<div class="row">
  <h1>hola</h1>
  <h2>hola</h2>
</div>

h2 {
  font-size: 1.3rem;
},
h4 {
  font-size: 1rem;
}
<div class="row">
  <h2>hola</h2>
  <h4>hola</h4>
</div>

Pero el texto me queda alineado todo a la izquierda, supongo que porque está heredando de otros sitios. Luego empiezo a anidar <div> sustituyendo los <h1> y <h2> pero se complica porque luego debo "juntar" los div para que estén uno al lado del otro, etc.

Por ello, me pregunto: ¿cuál es la mejor manera de poner dos bloques de texto juntos, cada uno con un estilo diferente?

3
  • ¿Que versión de Bootstrap estas usando?
    – Marcos
    Commented el 6 oct. 2020 a las 13:10
  • Estoy con Bootstrap de Vue, versión exacta 4.4.1.
    – fedorqui
    Commented el 6 oct. 2020 a las 13:11
  • Los elementos de tipo header, por defecto, siempre se van a renderizar como cabecera, es decir, en su propia línea, todo lo que esté fuera del elemento header será puesto en otra línea, sea anterior o posterior. Creo que lo que buscas es usar elementos en línea tipo span Commented el 6 oct. 2020 a las 13:13

4 respuestas 4

5

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.

2
  • Excelente, gracias Mauricio. Por lo que veo, esto elimina la necesidad del d-inline.
    – fedorqui
    Commented el 7 oct. 2020 a las 14:16
  • Si, mi aporte es para que se entienda que los elementos <H1> ... <H6> no deberían usarse de la forma en que muestras en tu pregunta, por las razones antes expuestas. Saludos Commented el 7 oct. 2020 a las 14:45
4

Si vas a usar la clase row, entonces es necesario que el hijo inmediato sea un col. Esto sirve para corregir el margen negativo que tiene un row (Grid layout)

Para que los elementos se muestren uno al lado del otro podes usar d-inline (Display utilities)

Ejemplo

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 class="row">
  <div class="col">
    <h2 class="d-inline">hola</h2>
    <h4 class="d-inline">hola</h4>
  </div>
</div>

4
  • ¡Excelente! Curioso que deban anidarse dos div para conseguir esto: primero el de "row" y después el de "col".
    – fedorqui
    Commented el 6 oct. 2020 a las 13:41
  • Yo no se si diría que es curioso, ya que es el "framework" el que define la estructura de sus componentes. Si no te convence la idea de tener que agregar un div, deberías considerar no usar la clase row
    – Marcos
    Commented el 6 oct. 2020 a las 14:04
  • Bueno más que nada me parece algo pesado cargar el código de tanto div, pero seguramente me parece así por la novedad. ¿Hay alguna alternativa a esto?
    – fedorqui
    Commented el 6 oct. 2020 a las 14:05
  • Para una respuesta mas acertada, necesitaría saber el contexto exacto del div.row
    – Marcos
    Commented el 6 oct. 2020 a las 14:08
3

Debes tener presente que tanto los div como los h# son elementos de tipo bloque o contenido dinámico, es decir que ocuparán todo el ancho disponible de su etiqueta padre, lo cual generará que otros elementos se muevan al siguiente renglón.

Si lo que buscas es que ambos textos estén uno a lado del otro, debes modificar para ellos su display pasando de: block a inline; esto último hará que los elementos se acomoden en fila uno a lado del otro.

Con una regla mas o menos así:

selector {
    display: inline;
}

Bajo el contexto de tu ejercicio, no veo la necesidad de que el div contenedor tenga la clase row y alcanzaría como ya te mencionaron que tengan la clase d-inline así:

<div>
    <h2 class="d-inline">hola</h2>
    <h4 class="d-inline">hola</h4>
</div>
1

¿Para qué hacerlo con Bootstrap si HTML provee una forma de hacerlo con etiquetas?

Hola hola

<div>Hola <strong>hola</strong> </div>


Hola hola

<div>Hola <sub>hola</sub> </div>


También puedes colocar una etiqueta <span> al interno del bloque de texto al cual aplicar un estilo diferente con Bootstrap:

Hola hola

<!-- Bootstrap 4.5 css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- Ejemplo -->
<div>Hola <span class="text-muted font-weight-bold font-italic">hola</span> </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.