Card

Descripción

Uno de los componentes más útiles de Bootstrap 4. Card es un contenedor con múltimples variantes y opciones.

Parámetros

  • header: Encabezado.
  • title: Título.
  • footer: Pie.
  • style: Estilo del elemento. Posibles valores: Cualquiera de las opciones de background, border y color disponibles en Bootstrap para este elemento.
  • img: URL de una imagen a mostrar.
  • img_overlay: Si se incluye una imagen en el parámetro img, img_overlay mostrará dicha imagen en el fondo del elemento. Posibles valores: true, false. Valor predeterminado: false.

Uso

[card header="" title="" footer="" style="" img="" img_overlay="false"][/card]

Ejemplos

Básico

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

Estilos de fondo y color

Card Header

Card Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

Card Footer
Card Header

Card Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

Card Footer
Card Header

Card Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

Card Footer
Card Header

Card Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

Card Footer
Card Header

Card Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

Card Footer
Card Header

Card Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

Card Footer
Card Header

Card Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

Card Footer

Estilos de bordeado

Card Header

Card Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

Card Footer
Card Header

Card Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

Card Footer
Card Header

Card Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

Card Footer
Card Header

Card Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

Card Footer
Card Header

Card Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

Card Footer
Card Header

Card Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

Card Footer
Card Header

Card Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

Card Footer

Imagen

Card Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus

Imagen de fondo

Card Title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.