Bootstrap Cheatsheet

RTL cheatsheet

Contenido

Tipografía

Documentación

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Este es un párrafo principal. Se destaca de los párrafos regulares.

Puedes usar la etiqueta mark para resaltar texto.

Esta línea de texto debe tratarse como texto eliminado.

Esta línea de texto debe tratarse como si ya no fuera precisa.

Esta línea de texto debe tratarse como una adición al documento.

Esta línea de texto aparecerá subrayada.

Esta línea de texto debe tratarse como letra pequeña.

Esta línea aparece en negrita.

Esta línea aparece como texto en cursiva.

Una cita conocida, contenida en un elemento blockquote.

Alguien famoso en Título de la fuente
  • Esta es una lista.
  • Parece completamente sin estilo.
  • Estructuralmente, sigue siendo una lista.
  • Sin embargo, este estilo solo se aplica a los elementos secundarios inmediatos.
  • Listas anidadas:
    • no se ven afectados por este estilo
    • seguirá mostrando una viñeta
    • y tener un margen izquierdo apropiado
  • Esto aún puede ser útil en algunas situaciones.
  • Este es un elemento de lista.
  • Y otro.
  • Pero se muestran en línea.

Imágenes

Documentación
Placeholder Imagen responsive
Una imagen placeholder cuadrada genérica con un borde blanco alrededor, lo que la hace parecerse a una fotografía tomada con una cámara instantánea antigua 200x200

Tablas

Documentación
# Primero Último Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# Primero Último Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Class Heading Heading
Por defecto Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
# Primero Último Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Figures

Documentación
Placeholder 400x300
Un título para la imagen de arriba.

Formularios

Descripción general

Documentación
Nunca compartiremos tu correo electrónico con nadie más.
Radios buttons

Formularios deshabilitados

Documentación
Disabled radios buttons

Dimensionamiento

Documentación

Input group

Documentación
@
@example.com
https://example.com/users/
$ .00
With textarea

Validación

Documentación
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.

Componentes

Accordion

Documentación

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Alerts

Documentación

Badge

Documentación

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Primary Secondary Success Danger Warning Info Light Dark

Buttons

Documentación

Card

Documentación
Placeholder Capa de imagen
Título de la tarjeta

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Featured
Título de la tarjeta

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
2 days ago
Título de la tarjeta

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Un elemento
  • Un segundo elemento
  • Un tercer elemento
Card link Another link
Placeholder Image
Título de la tarjeta

Esta es una tarjeta más amplia con texto de apoyo a continuación como una introducción natural a contenido adicional. Este contenido es un poco más largo.

Last updated 3 mins ago

List group

Documentación
  • A disabled item
  • Un segundo elemento
  • Un tercer elemento
  • Un cuarto elemento
  • Y un quinto elemento
  • Un elemento
  • Un segundo elemento
  • Un tercer elemento
  • Un cuarto elemento
  • Y un quinto elemento
A simple default list group item A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item

Popovers

Documentación

Scrollspy

Documentación

Primer encabezado

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Segundo encabezado

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Tercer encabezado

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Cuarto encabezado

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Quinto encabezado

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Spinners

Documentación

Toasts

Documentación

Tooltips

Documentación