Bulma | Card - GeeksforGeeks

23 Jun, 2020
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-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.
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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>    <!-- 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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>      <!-- 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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>      <!-- 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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>     <!-- 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="https://media.geeksforgeeks.org/wp-content/uploads/20200611151025/gfg202.png"                   alt="Placeholder image">            </figure>          </div>          <div class="card-content">            <div class="media">              <div class="media-left">                <figure class="image is-48x48">                  <img src="https://media.geeksforgeeks.org/wpcontent/uploads/20200611151025/gfg202.png"                       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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>      <!-- 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="https://media.geeksforgeeks.org/wp-content/uploads/20200611151025/gfg202.png"                    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: 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bulma
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?