Bootstrap 4 Cards


Learn how to create digital cards using Bootstrap 4 card layout component.

▶ Download Exercise Files

▶ Digital Cards
Digital cards are design containers that provide flexible content with the use of headings, paragraphs, lists, links, images, and more.

They are a great tool for communicating quick stories, improve the user experience, encourage users to share content on social media, they represent actions and are great for pulling in information from multiple sources. And so let’s go ahead and see how Bootstrap handles the Card Layout Component.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.

▶ Bootstrap 4 Cards
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Card decks
Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

Card Titles, text, and links
Card titles are used by adding .card-title to an h tag. In the same way, links are added and placed next to each other by adding .card-link to an a tag.

More from Elias Sarantopoulos ❤
Creative tutorials from Elias Sarantopoulos. Helping you develop your skills with Affinity Designer, Adobe Illustrator, After Effects, and Bootstrap tutorials.

▶ Helping You Develop –






Xem thêm bài viết khác:


  1. So, If we add extra more text on any one of the card..
    The height of the cards will be uneven…
    How can we fix that??

  2. Thank you for this but i have a question. My one of the h5 title is longer than the other so it change the size(hight) of the card grid , but others size are normal how can i make it all the same size as hight thank you eferisto poli

  3. Thanks for the tutorial sir <3

    But I have a question:

    How to set an Only one card to align in center?? (Sorry If my questions is kinda difficult sir)

    Greetings from the Philippines

  4. Nice tutorial! But when I use the cards and the length of the content is not the same, the buttons are not aligned. How can I make sure the cards all have the same size and the buttons are aligned to the bottom?

  5. What happend with the panels? why did they get rid of them completely in bootstrap 4, whats the diffrence to cards? edit: i know i am a little late with this but i started programming with a older course ^^

  6. What if I have 2 different sized cards, and i wanted the smaller card to be centered with the larger cards, like this:

    | |
    | | |—————-|
    | | | |
    | | |__________|
    | |

  7. if i write something less/more in the paragraph in one of the card that changes the size of card. How can i fix the size of the card?

  8. hi, thanks,,isnt there a website that devs have bootstraped the bootstrap for me to use with loads of template designs… seems a lot of work unless your front end dev all day .

  9. Thank you so much I needed a lot of this info, you just taught me how to use multiple classes and how does bootstrap work in general.

  10. and what if a want the cards be responsive?
    i mean 3 rows and each row have 3 cards(col) but in 728*862 be 2 cards(col) and 479*862 be just one card per row?


Please enter your comment!
Please enter your name here