Clases en la tipografía en bootstrap 4

Tenemos la posibilidad de hacer cambios y modificar elementos de nuestras tipografías por medio de clases en bootstrap 4, vamos a ver en este capítulo como se hace.

diplay

Utilizando la clase display-[número del 1 al 4] podemos hacer que cambie el tamaño de la letra, donde 1 es el más grande (algo mayor que el h1 normal) y 4 el más pequeño pero aun muy grande para el texto normal, por lo que es usual utilizar la clase display en las cabeceras html
1
<h2 class="display-2">Hola a todos</h2>

small

La clase small nos hace que el texto sea más pequeño de lo que sería un párrafo normal, lo cual nos puede servir para por ejemplo, anotaciones o para crear enlaces en a la políticas de los pies de página.
1
<div class="small">Política de cookies</div>

mark

La clase mark se encarga poner un fondo a todo el espacio en el que se encuentra, con un color crema.
1
<div class="mark">Hola a todos</div>

font-weight-bold

Esta clase hace que el texto aparezca en negrita
1
<span class="font-weight-bold>Hola a todos</span>

font-weigth-light

Esta clase hace que el texto aparezca en letra más suave
1
<span class="font-weight-light">Hola a todos</span>

font-italic

Esta clase hace que el texto aparezca en cursiva
1
<span class="font-italic">Hola a todos</span>

text-left

Alinea el texto a la izquierda
1
<span class="text-left">Hola a todos</span>

text-right

Alinea el texto a la derecha
1
<span class="text-right">Hola a todos</span>

text-center

Centra el texto en el contenedor
1
<span class="text-center">Hola a todos</span>

text-justify

Hace que el texto se justifique en el contenedor
1
<span class="text-justify">Hola a todos</span>

text-nowrap

Hace que el texto no salte de línea y continué adelante. (Aunque no se muy bien para que usar esto, pero bueno)
1
<span class="text-nowrap">Hola a todos</span>

text-lowercase

pone todo el texto en minúscula
1
<span class="text-lowercase">Hola a todos</span>

text-uppercase

Pone todo el texto en mayúscula
1
<span class="text-uppercase">Hola a todos</span>

text-capitalize

Hace que cada palabra empiece por mayuscula
1
<span class="text-capitalize">Hola a todos</span>

text-[color]

Esto nos permite cambiar el color del texto según los parámetros de boostrap, estos son:
  • primary
  • secundary
  • dark
  • light
  • danger
  • warning
  • success
  • info
  • white

1
<span class="text-primary">Hola a todos</span>

Otros cambios

Boostrap 4 hace cambios en la presentación del texto en algunos elementos html como:
  • pre
  • abbr
  • code
  • ol
  • ul
  • kbd
  • …
Pero son cambios que realiza de forma interna para crear un estilo más atractivo que el propio html plano.
Como podemos observar podemos jugar con las clases para trabajar en bootstrap 4 sin tener que hacer demasiado con nuestro CSS, aunque obviamente es muy difícil que abarque lo que podemos necesitar en nuestros proyectos.

Comentarios

Publicar un comentario

Entradas populares de este blog

Como enlazar a una parte concreta de una página web

Imagen
En HTML4 y en HTML5 las diferentes etiquetas pueden tener un nombre concreto mediante un identificador . Por ejemplo, si entro en la parte de la edición HTML de este artículo puedo llamar “primerp” a este párrafo (<p>) que estoy escribiendo: <p id =”primerp”>. Que las etiquetas (sean <div>, <h2>, <p>…) estén denominadas de esta forma permite enlazar a ellas, pudiendo funcionar como ancla . Para conocer la utilidad de este atributo, tenemos que hacer primero como que hemos redactado un texto bastante largo. Párrafo – 3 Párrafo – 4 Párrafo – 5 Párrafo – 6 Párrafo – 7 Párrafo – 8 Párrafo – 9 Párrafo – 10 Párrafo – 11 Párrafo – 12 Párrafo – 13 Párrafo – 14 Párrafo – 15 Párrafo – 16 Párrafo – 17 Bien. Siempre hay dos pasos : denominar de alguna manera el párrafo al que queremos que se dirijan (id=”nombre”) y después poner un vínculo en la expresión que llevará hasta allí (<a href=”link#nombre”>Estas palabras tend
Leer más

Cómo colocar los checkboxs de contact form 7 en vertical

Vamos a ver cómo colocar los checkboxs de contact form 7 en vertical, ya que el magnifico plugin de formularios de WordPress de forma normal los coloca en línea, algo que realmente es anti estético y que tiene bastante poca usabilidad, fastidiando totalmente la experiencia de usuario. (Ea ya he dicho un montón de palabros que están de moda en solo un parrafo). Bueno vamos al lío que no me gusta enrollarme como ya sabéis… De forma normal, cuando hacemos un checkbox con contact form 7 nos crea un shortcode similar a este en nuestro formulario: 1 [checkbox Opciones "Opcion 1" "Opcion 2" "Opcion 3"] Lo que nos genera un código como este: 1 2 3 4 5 6 7 8 9 10 11 12 13 < span class = "wpcf7-form-control-wrap Opciones" >      < span class = "wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required" >          < span class = "wpcf7-list-item" >
Leer más

Cómo añadir aceptación de términos y condiciones en Contact Form 7

Imagen
Esta es una parte importante si quieres cumplir la ley. Normalmente nadie te va a decir nada hasta que algún día pase y te arrepientas de no haberlo puesto. Ya verás que es muy sencillo. Aquí te mostraremos cómo lo tenemos en Weberas, del mismo modo que también verás cómo añadir Placeholder en Contact Form 7 y quitar los nombres encima de los campos del formulario. Tienes que dirigirte a tu formulario de contacto y editar el cuadro HTML donde están los campos que quieres poner. En nuestro caso: <div class="one-half"><label> [text* your-name placeholder "Nombre"] </label></div> <div class="one-half last"><label> [email* your-email placeholder "Email"] </label></div> <div class="one-half"><label> [text your-subject placeholder "Asunto"] </label></div> <div class="one-half last"><label> [tel* tel-503 placeholder "Teléfo
Leer más