Bootstrap 5: Texto/Tipografía

Tabla de contenido

    Mostrar tabla de contenidos

Configuración predeterminada de Bootstrap 5

Bootstrap 5 usa un Translate="no">font-size predeterminado de 1rem (16px por defecto), y su Translate="no ">altura de línea es 1,5.

Además, todos los elementos <p> tienen margin-top: 0 y margin-bottom: 1rem (16px por defecto).

<h1> - <h6>

Bootstrap 5 estilos de encabezados HTML (<h1> a <h6>) con un peso de fuente más negrita y un tamaño de fuente responsivo.

Ejemplo

Pruébelo usted mismo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <p>The font-size of each Bootstrap heading depends on the screen size. Try to resize the browser window to see the effect.</p>
  <h1>h1 Bootstrap heading</h1>
  <h2>h2 Bootstrap heading</h2>
  <h3>h3 Bootstrap heading</h3>
  <h4>h4 Bootstrap heading</h4>
  <h5>h5 Bootstrap heading</h5>
  <h6>h6 Bootstrap heading</h6>
</div>

</body>
</html>

También puedes usar las clases .h1 a .h6 en otros elementos para que se comporten como encabezados si lo deseas. :

Ejemplo

<p class="h1">h1 Bootstrap heading</p>
<p class="h2">h2 Bootstrap heading</p>
<p class="h3">h3 Bootstrap heading</p>
<p class="h4">h4 Bootstrap heading</p>
<p class="h5">h5 Bootstrap heading</p>
<p class="h6">h6 Bootstrap heading</p>

Pruébelo usted mismo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <p class="h1">h1 Bootstrap heading</p>
  <p class="h2">h2 Bootstrap heading</p>
  <p class="h3">h3 Bootstrap heading</p>
  <p class="h4">h4 Bootstrap heading</p>
  <p class="h5">h5 Bootstrap heading</p>
  <p class="h6">h6 Bootstrap heading</p>
</div>

</body>
</html>

Mostrar encabezados

Los títulos de visualización se utilizan para destacar más que los títulos normales (más grandes tamaño de fuente y peso de fuente más ligero), y allí Hay seis clases para elegir: .display-1 a .display-6:

Ejemplo

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Pruébelo usted mismo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Display Headings</h1>
  <p>Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):</p>
  <h1 class="display-1">Display 1</h1>
  <h1 class="display-2">Display 2</h1>
  <h1 class="display-3">Display 3</h1>
  <h1 class="display-4">Display 4</h1>
  <h1 class="display-5">Display 5</h1>
  <h1 class="display-6">Display 6</h1>
</div>

</body>
</html>

<small>

En Bootstrap 5 el elemento HTML

<small>

(y la clase .small) se utiliza para crear un texto secundario más pequeño en cualquier encabezado:

Ejemplo

Pruébelo usted mismo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Smaller, Secondary Text</h1>
  <p>The small element (and the .small class) is used to create a smaller, secondary text in any heading:</p>       
  <h1>h1 heading <small>secondary text</h1>
  <h2>h2 heading <small>secondary text</h2>
  <h3>h3 heading <small>secondary text</h3>
  <h4>h4 heading <small>secondary text</h4>
  <h5>h5 heading <small>secondary text</h5>
  <h6>h6 heading <small>secondary text</h6>
</div>

</body>
</html>

<mark>

Bootstrap 5 diseñará la etiqueta mark y la clase .mark con un color de fondo amarillo y algo de relleno:

Ejemplo

Utilice el elemento mark para resaltar texto.

Pruébelo usted mismo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Highlight Text</h1>    
  <p>Use the mark element (or the .mark class) to <mark>highlight</mark> text.</p>
</div>

</body>
</html>

<abbr>

Bootstrap 5 diseñará el elemento HTML abbr con un borde inferior punteado y un cursor con un signo de interrogación al pasar el mouse:

Ejemplo

The WHO was founded in 1948.

Pruébelo usted mismo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Abbreviations</h1>
  <p>The abbr element is used to mark up an abbreviation or acronym:</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

</body>
</html>

<blockquote>

Agregue la clase .blockquote a un <blockquote> al citar bloques de contenido de otra fuente. Y al nombrar una fuente, como "del sitio web de WWF", use la clase .blockquote-footer:

Ejemplo

Pruébelo usted mismo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
</div>

</body>
</html>

<dl>

Bootstrap 5 diseñará el elemento HTML dl de la siguiente manera:

Ejemplo

Pruébelo usted mismo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Description Lists</h1>    
  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>

</body>
</html>

<code>

Bootstrap 5 diseñará el elemento HTML code de la siguiente manera:

Ejemplo

Pruébelo usted mismo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Code Snippets</h1>
  <p>Inline snippets of code should be embedded in the code element:</p>
  <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
</div>

</body>
</html>

<kbd>

Bootstrap 5 diseñará el elemento HTML <kbd> de la siguiente manera:

Ejemplo

Pruébelo usted mismo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Keyboard Inputs</h1>
  <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

</body>
</html>

<pre>

Bootstrap 5 diseñará el elemento HTML <pre> de la siguiente manera:

Ejemplo

Pruébelo usted mismo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>

</body>
</html>

Más clases de CSS de tipografía

Las siguientes clases de Bootstrap 5 se pueden agregar para diseñar aún más los elementos HTML:

Clase:

.lead

Descripción: Hace que un párrafo se destaque.

Ejemplo :

Intentalo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p>Use the .lead class to make a paragraph "stand out":</p>
  <p class="lead">This paragraph stands out.</p>
  <p>This is a regular paragraph.</p>
</div>

</body>
</html>

Clase:

.text-start

Descripción: Indica texto alineado a la izquierda

Ejemplo :

Intentalo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p class="text-start">Left-aligned text.</p>
  <p class="text-end">Right-aligned text.</p>      
  <p class="text-center">Center-aligned text.</p>
  <p class="text-nowrap">No wrap text. No wrap text. No wrap text. No wrap text.</p>
</div>

</body>
</html>

Clase:

.text-break

Descripción: Evita que el texto largo rompa el diseño

Ejemplo :

Intentalo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
<body>

<div class="container mt-3">
  <h2>Text break / Word break</h2>
  <p>The .text-break class prevents long text from breaking layout.</p>
  <p>With .text-break:</p>
  <p class="text-break">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</p>
  <p>Without .text-break:</p>
  <p>AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</p>
</div>

</body>
</html>

Clase:

.text-center

Descripción: Indica texto alineado al centro.

Ejemplo :

Intentalo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p class="text-start">Left-aligned text.</p>
  <p class="text-end">Right-aligned text.</p>      
  <p class="text-center">Center-aligned text.</p>
  <p class="text-nowrap">No wrap text. No wrap text. No wrap text. No wrap text.</p>
</div>

</body>
</html>

Clase:

.text-decoration-none

Descripción: Elimina el subrayado de un enlace.

Ejemplo :

Intentalo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Text Decoration</h2>
  <p>Use the .text-decoration-none class to remove the underline from a link.</p>
  <a href="#" class="text-decoration-none">A link without underline.</a>
</div>

</body>
</html>

Clase:

.text-end

Descripción: Indica texto alineado a la derecha

Ejemplo :

Intentalo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p class="text-start">Left-aligned text.</p>
  <p class="text-end">Right-aligned text.</p>      
  <p class="text-center">Center-aligned text.</p>
  <p class="text-nowrap">No wrap text. No wrap text. No wrap text. No wrap text.</p>
</div>

</body>
</html>

Clase:

.text-nowrap

Descripción: Indica que no hay texto ajustado

Ejemplo :

Intentalo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p class="text-start">Left-aligned text.</p>
  <p class="text-end">Right-aligned text.</p>      
  <p class="text-center">Center-aligned text.</p>
  <p class="text-nowrap">No wrap text. No wrap text. No wrap text. No wrap text.</p>
</div>

</body>
</html>

Clase:

.text-lowercase

Descripción: Indica texto en minúsculas

Ejemplo :

Intentalo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p class="text-lowercase">Lowercased text.</p>
  <p class="text-uppercase">Uppercased text.</p>      
  <p class="text-capitalize">Capitalized text.</p>
</div>

</body>
</html>

Clase:

.text-uppercase

Descripción: Indica texto en mayúsculas

Ejemplo :

Intentalo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p class="text-lowercase">Lowercased text.</p>
  <p class="text-uppercase">Uppercased text.</p>      
  <p class="text-capitalize">Capitalized text.</p>
</div>

</body>
</html>

Clase:

.text-capitalize

Descripción: Indica texto en mayúscula

Ejemplo :

Intentalo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p class="text-lowercase">Lowercased text.</p>
  <p class="text-uppercase">Uppercased text.</p>      
  <p class="text-capitalize">Capitalized text.</p>
</div>

</body>
</html>

Clase:

.initialism

Descripción: Muestra el texto dentro de un elemento en un tamaño de fuente ligeramente más pequeño.

Ejemplo :

Intentalo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948. (normal abbr)</p>      
  <p>The <abbr title="World Health Organization" class="initialism">WHO</abbr> was founded in 1948. (slightly smaller abbr)</p>
</div>

</body>
</html>

Clase:

.list-unstyled

Descripción: Elimina el estilo de lista predeterminado y el margen izquierdo de los elementos de la lista (funciona tanto en <ul> como en <ol>). Esta clase solo se aplica a los elementos de la lista secundaria inmediata (para eliminar el estilo de lista predeterminado de cualquier lista anidada, aplique esta clase también a cualquier lista anidada)

Ejemplo :

Intentalo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p>The class .list-unstyled removes the default list-style and left margin on list items (immediate children only):</p>
  <ul class="list-unstyled">
    <li>Coffee</li>
    <li>Tea
      <ul>
        <li>Black tea</li>
        <li>Green tea</li>
      </ul>
    </li>
    <li>Milk</li>
  </ul>
</div>

</body>
</html>

Clase:

.list-inline

Descripción: Coloca todos los elementos de la lista en una sola línea (se usa junto con .list-inline-item en cada elemento <li>)

Ejemplo :

Intentalo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Typography</h2>
  <p>The class .list-inline places all list items on a single line, when used together with the .list-inline-item:</p>
  <ul class="list-inline">
    <li class="list-inline-item">Coffee</li>
    <li class="list-inline-item">Tea</li>
    <li class="list-inline-item">Milk</li>
  </ul>
</div>

</body>
</html>