Bulma | Card

Bulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

A Card is a flexible component that can be composed of the content needed. It includes several other components that we have to add exclusively to design our content well. These components are listed below:

  • card-header: It is a horizontal box type component with a shadow.
    • card-header-title: It is left aligned and bold which is used to represent the header of the card.
    • card-header-icon: It is a placeholder for the icon that is added to the header part of the card.
  • card-image: It is a container for including a responsive image.
  • card-content: It is a container where one can insert any element like paragraphs, icons, buttons or images.
  • footer: It is a container used to store the footer elements of the card. 
    • card-footer-item: It reserved spaces for list of footer items.

Example 1: This example represents how to create a simple card using Bulma.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Card</title>
    
  <!-- Include Bulma CSS -->
  <link rel='stylesheet' href=
  
  <!-- Custom CSS -->
  <style>
    div.columns {
      margin-top: 80px;
    }
  
    p {
      font-family: calibri;
      font-size: 20px;
    }
  
    p.has-text-danger {
      margin-left: 95px;
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-5'>
        <div class="card">
          <div class="card-content">
            <p class='is-success'>
              GeeksforGeeks' is a computer 
              science portal.it was created
              with a goal in mind to provide
              well written, well thought and
              well explained solutions for
              selected questions. The core
              team of five super geeks 
              constituting of technology lovers
              and computer science enthusiasts
              have been constantly working
              in this direction .
            </p>
  
            <p class='has-text-danger'>
              ___A computer science portal for geeks
            </p>
  
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

chevron_right


Output: 



Example 2: This example creating a card with header using Bulma.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Card</title>
  
  <!-- Include Bulma CSS -->
  <link rel='stylesheet' href=
    
  <!-- Custom CSS -->
  <style>
    div.columns {
      margin-top: 80px;
    }
  
    p {
      font-family: calibri;
      font-size: 20px;
    }
  
    p.has-text-danger {
      margin-left: 90px;
    }
  
    .card-header-title {
      font-size: 20px;
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-5'>
        <div class="card">
          <div class='card-header'>
            <div class="card-header-title
                        has-text-success">
              GeekforGeeks
            </div>
          </div>
          <div class="card-content">
            <p class='is-success'>
              GeeksforGeeks' is a computer
              science portal.it was created with
              a goal in mind to provide well
              written, well thought and
              well explained solutions for
              selected questions. The core team
              of five super geeks constituting
              of technology lovers and computer
              science enthusiasts have been 
              constantly working in this
              direction .
            </p>
  
            <p class='has-text-danger'>
              ___A computer science portal for geeks
            </p>
  
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

chevron_right


Output:

Example 3: This example creating a card with header and footer using Bulma.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Card</title>
    
  <!-- Include Bulma CSS -->
  <link rel='stylesheet' href=
    
  <!-- Custom CSS -->
  <style>
    div.columns {
      margin-top: 80px;
    }
  
    p {
      font-family: calibri;
      font-size: 20px;
    }
  
    .card-header-title {
      font-size: 20px;
    }
  
    span {
      margin-left: 95px;
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-5'>
        <div class="card">
          <div class='card-header'>
            <div class="card-header-title has-text-success">
              GeekforGeeks
            </div>
          </div>
          <div class="card-content">
            <p class='is-success'>
              GeeksforGeeks' is a computer
              science portal.it was created with
              a goal in mind to provide well 
              written, well thought and
              well explained solutions for 
              selected questions. The core team
              of five super geeks constituting
              of technology lovers and
              computer science enthusiasts have
              been constantly working
              in this direction .
            </p>
  
          </div>
          <div>
            <footer class="card-footer">
              <p class='card-footer-item'>
                <span class='has-text-danger'>
                  ___A computer science portal for geeks
                </span>
              </p>
  
            </footer>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

chevron_right


Output: 

Example 4: This example creating a card with an image using Bulma.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Card</title>
    
  <!-- Include Bulma CSS -->
  <link rel='stylesheet' href=
   
  <!-- Custom CSS -->
  <style>
    div.columns {
      margin-top: 20px;
    }
  
    p {
      font-family: calibri;
      font-size: 20px;
    }
  
    .card-header-title {
      font-size: 20px;
    }
  </style>
</head>
  
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-5'>
        <div class="card">
          <div class="card-image">
            <figure class="image is-2by1">
              <img src=
                   alt="Placeholder image">
            </figure>
          </div>
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <figure class="image is-48x48">
                  <img src=
                       alt="Placeholder image">
                </figure>
              </div>
  
              <div class="media-content">
                <p class="title is-5">
                  GeekforGeeks
                </p>
  
                <p class="subtitle is-6">
                  @geeksforgeeks
                </p>
              </div>
            </div>
  
            <div class='content'>
              <div class="media-content">
                <p class='is-success'>
                  GeeksforGeeks' is a computer
                  science portal.it was created with
                  a goal in mind to provide well 
                  written, well thought and
                  well explained solutions for 
                  selected questions. The core
                  team of five super geeks 
                  constituting of technology 
                  lovers and computer science 
                  enthusiasts have been constantly
                  working in this direction .
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

chevron_right


Output: 

Example 5: This example creating a coloured card with an image using Bulma.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>Bulma Card</title>
    
  <!-- Include Bulma CSS -->
  <link rel='stylesheet' href=
    
  <!-- Custom CSS -->
  <style>
    div.columns {
      margin-top: 80px;
    }
  
    p {
      font-family: calibri;
      font-size: 20px;
    }
  
    .card-header-title {
      font-size: 20px;
    }
  </style>
</head>
  
<body>
  <div class='container 
              has-text-centered'>
    <div class='columns 
                is-mobile is-centered'>
      <div class='column is-5'>
        <div class="card 
                    has-background-primary">
  
          <div class="card-content">
            <div class="media">
              <div class="media-left">
                <figure class="image is-48x48">
                  <img src=
                    alt="Placeholder image">
                </figure>
              </div>
  
              <div class="media-content">
                <p class="title is-5">
                  GeekforGeeks
                </p>
  
                <p class="subtitle is-6">
                  @geeksforgeeks
                </p>
              </div>
            </div>
  
            <div class='content'>
              <div class="media-content">
                <p class='is-success'>
                  GeeksforGeeks' is a computer 
                  science portal.it was created 
                  with a goal in mind to provide 
                  well written, well thought and
                  well explained solutions for 
                  selected questions. The core team
                  of five super geeks constituting 
                  of technology lovers and
                  computer science enthusiasts
                  have been constantly working
                  in this direction .
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

chevron_right


Output: 

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.