Bulma Card Parts

Last Updated : 09 Feb, 2022

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"> 
        GeeksforGeeks 
    </h1> 
    <b>Bulma Card Parts</b> 
    <div class="container"> 
        <div class="card"> 
            <div class="card-header"> 
                <p class="is-size-3"> 
                    <b>GeeksforGeeks</b> 
                </p> 
  
            </div> 
            <div class="card-image"> 
                <figure class="image"> 
                    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo-300x300.png"
                        alt="GeeksforGeeks logo"> 
                </figure> 
            </div> 
            <div class="card-content"> 
                <p> 
                    GeeksforGeeks is a computer science  
                    portal for geeks by geeks. 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"> 
                    GeeksforGeeks 
                </a> 
                <a href="#" class="card-footer-item"> 
                    Practice 
                </a> 
                <a href="#" class="card-footer-item"> 
                    Courses 
                </a> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html> 