Bootstrap Card

Posted on Feb 18, 2019 By Haman

Bootstrap card is one of the most flexible feature in bootstrap. As the name implies it is a card, that has the capacity to hold all kinds of information. It has the capacity to hold different containers, images, images and text. The most amazing feature of bootstrap card is that it is extendible. As a creator, you can add multiple variety of content in multiple forms.

Building a bootstrap card from step one can be a daunting task for an inexperienced hand. To learn maximum, it is always good to take one step at a time. In this article we will discuss only about making a simple card, not a modifed one.


BUILDING A BOOTSTRAP CARD

The building block for a bootstrap card is a .card class. It comes with automatic padding which saves all the extra work of adding css to it. But the option to manually increase or decrease padding is always available.

The '.card’ class gives the complete entity a boundary space. Everything that has to go in the class goes within .card div. ‘Card-body’ is the next step. This is where the real action start.

Bootstrap card step 1

This is how a simple card should look. Also this is the only step required. We can add many elements in this simple card. For the sake of understanding we will add all these elements one by one into this card.


Header/Footer

To add a header just put ‘card-header’ class to the content. This will add a header that to your card body. In the case of footer, repeat the same, just use ‘card-footer’ instead.

Bootstrap card header and footer

Card body

The ‘card-body’ class will give a padded section inside a card, without any adjustments.

Card title/subtitle

Card title can be added by writing ‘card-title’ in class. This will automatically generate a bold text and there will be no need to add any kind of CSS.

Similarly, to add a subtitle just specify class as ‘card-subtitle’. This will again generate a subtitle that is bolded but is very different from card title.

Bootstrap card header and footer

Card text

Displaying a card without text would be like a website without name. To add text section in card use ‘card-text’ class, inside ‘card-body’.

Bootstrap card text

Card link

Similarly, to add a link you can use ‘card-link’ inside class element. The text you type in that anchor text will automatically turn to blue.

Bootstrap card link

Card image, top and bottom

Just like everything else, adding pictures is also very easy in bootstrap. To add an image on the top use ‘card-img-top’. Bootstrap card top-image To add the image in bottom of the card, add ‘card-img-bottom’ .Remember that while doing this, the html for image must be written by the end.

Bootstrap card botto-image

Subscribe to our news letter

And get best offers in your mail box

Don't worry, we wont spam you!