Bootstrap redefine estilos para el elemento HTML <abbr> que se emplea para indicar abreviaturas y acrónimos.
Una abreviatura representa una palabra pero solo escribimos una o varias letras de la misma y un acrónimo es una palabra que se forma generalmente con el primer caracter de un conjunto de palabras.
La siguiente página define una abreviatura y un acrónimo:
<!DOCTYPE html> <html> <head> <title>Prueba de Bootstrap</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <p>Este es un ejemplo de una abreviatura <abbr title="Señor/a">Sr./a.</abbr></p> <hr> <p>Este es un ejemplo de un acrónimo <abbr title="Objeto Volador No Identificado" class="initialism">ovni</abbr></p> </div> </body> </html>
Tanto para abreviaturas y acrónimos empleamos el elemento HTML <abbr>.
En la definición de una abreviatura y un acrónimo indicamos la propiedad title con el valor que se mostrará cuando pasemos con la flecha del mouse.
En un acrónimo además especificamos la clase class="initialism" (esto hace que el texto que se muestre siempre aparece en mayúsculas.
En el navegador tenemos la siguiente representación: