Übersicht über unterschiedliche Card-Implementierungen

Bei Bootstrap 4 ist das Card-Modul neu und sehr flexibel einsetzbar.

.card-deck für gleich hohe Cards

Card image cap

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

Card title
Card subtitle

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

Card link Another link
Card title

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

Go somewhere

.card-deck für gleich hohe Cards

Card image cap

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

Card title
Card subtitle

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

Card link Another link
Card title

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

Go somewhere
Card title
Card subtitle

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


Die Cards stecken in einem Grid

Card image cap

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

Card title
Card subtitle

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

Card link Another link
Card title

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

Go somewhere

Mit .card-columns können viele Cards in einen Container gepackt werden!

Card image cap

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

Card title

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

Go somewhere
Card title

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

Go somewhere
Card title
Card subtitle

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

Card link Another link
Card title
Card subtitle

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

Card image cap

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

Card title
Card subtitle

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

Card link Another link
Card title

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

Go somewhere
Card title

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

Go somewhere
Card title
Card subtitle

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

Card image cap

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

Card title
Card subtitle

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

Card link Another link
Card title

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

Go somewhere
Card title
Card subtitle

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

Mit dieser Klasse werden die Cards nicht mit einer Flexbox umfasst, sondern mit dem Columns-Modul von CSS. Dadurch wird ein Layout im Masonry-Stil möglich. Die Orientierung geht also vertikal. Die Container sind extra durchnummeriert.