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>
<link rel='stylesheet' href=
<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>
<link rel='stylesheet' href=
<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>
<link rel='stylesheet' href=
<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>
<link rel='stylesheet' href=
<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>
<link rel='stylesheet' href=
<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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
23 Jun, 2020
Like Article
Save Article