What is Bulma Card Parts?

In this article, we will learn Bulma Card Parts,This free Bulma tutorial for complete beginners will help you learn Bulma from scratch.

Bulma Card Parts - ❤️Bulma Tutorials In 2024

Bulma is a CSS framework that makes it easy to develop beautiful and responsive websites. It is based on flexbox. In this article, we will be seeing the parts of the card element in Bulma. The card has the following 4 parts: The card reader, the card image, the card content, and the card footer.

Bulma Card Parts Classes: These classes can be used together to make a card. It is not required to all four parts to building a card, you can use the part you need.

card-header: This class is used to warp the header of the card.
card-image: This class is used to warp the image of the card.
card-content: This class is used to warp the content of the card.
card-footer: This class is used to warp the footer of the card.

Syntax:

<div class="card">
    <div class="Card Parts Classes">
    ....
    </div>
</div>

Example: In the example below, we have used all four parts of the card to make the card shown in the output.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
  
    <style> 
        .card { 
            max-width: 300px; 
            margin: 0 auto; 
            margin-top: 25px; 
        } 
  
        .card-header { 
            justify-content: center; 
            padding: 10px 0px; 
        } 
    </style> 
</head> 
  
<body class="has-text-centered"> 
    <h1 class="is-size-2 has-text-success"> 
        w3wiki 
    </h1> 
    <b>Bulma Card Parts</b> 
    <div class="container"> 
        <div class="card"> 
            <div class="card-header"> 
                <p class="is-size-3"> 
                    <b>w3wiki</b> 
                </p> 
  
            </div> 
            <div class="card-image"> 
                <figure class="image"> 
                    <img src= 
"https://media.w3wiki.net/wp-content/uploads/20220115184050/gfglogo-300x300.png"
                        alt="w3wiki logo"> 
                </figure> 
            </div> 
            <div class="card-content"> 
                <p> 
                    w3wiki is a computer science  
                    portal for Beginner by Beginner. Here you  
                    can find articles on various computer  
                    science topics like Data Structures,  
                    Algorithms and many more. 
                </p> 
            </div> 
  
            <div class="card-footer"> 
                <a href="#" class="card-footer-item"> 
                    w3wiki 
                </a> 
                <a href="#" class="card-footer-item"> 
                    Practice 
                </a> 
                <a href="#" class="card-footer-item"> 
                    Courses 
                </a> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html> 

Output:

Bulma Card parts

Reference: https://bulma.io/documentation/components/card/#card-parts