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
<!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' > w3wiki' 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 Beginner 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 Beginner </ 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"> GeekforBeginner </ div > </ div > < div class = "card-content" > < p class = 'is-success' > w3wiki' 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 Beginner 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 Beginner </ 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" > GeekforBeginner </ div > </ div > < div class = "card-content" > < p class = 'is-success' > w3wiki' 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 Beginner 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 Beginner </ 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.w3wiki.net/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.w3wiki.net/wpcontent/uploads/20200611151025/gfg202.png" alt = "Placeholder image" > </ figure > </ div > < div class = "media-content" > < p class = "title is-5" > GeekforBeginner </ p > < p class = "subtitle is-6" > @w3wiki </ p > </ div > </ div > < div class = 'content' > < div class = "media-content" > < p class = 'is-success' > w3wiki' 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 Beginner 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.w3wiki.net/wp-content/uploads/20200611151025/gfg202.png" alt = "Placeholder image" > </ figure > </ div > < div class = "media-content" > < p class = "title is-5" > GeekforBeginner </ p > < p class = "subtitle is-6" > @w3wiki </ p > </ div > </ div > < div class = 'content' > < div class = "media-content" > < p class = 'is-success' > w3wiki' 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 Beginner 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: