Open In App

Bulma | Card

Improve
Improve
Like Article
Like
Save
Share
Report

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




<!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>


Output: 

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

html




<!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>


Output:

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

html




<!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>


Output: 

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

html




<!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>


Output: 

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

html




<!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>


Output: 



Last Updated : 23 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads