×

Html & Html5

The World's best Software Development Study Portal

Bootstrap Card


Card is like a box having some bordered-around the context with some padding.
Let’s understand this by the following program :-


Basic Card - It creates with .card class





Output of this Program


Basic Card

Basic card

So here we just created our basic card.



Card Images


We can also use images in our cards . The context which we want to write about , we can write that on the top of the image as well as at the bottom .And we use .card class for it.
Let’s understand them by this program :-






Output of this Program


Card Image

Image at the top

Card image

Scenery

It is a beautiful picture.

See details



Image at the bottom (card-img-bottom )

Scenery

It is a beautiful picture.

See details
Card image

So here we just put the images and write the context once at the top , and once at the bottom of the image.









Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute