This guide will walk you through creating your first component with Bulma. You’ll learn the basic class naming conventions and how to use modifiers to customize components.
Prerequisites Before starting, make sure you have Bulma installed. If not, see the Installation guide .
For this quickstart, we’ll use the CDN for simplicity:
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected] /css/bulma.min.css" >
Understanding Bulma’s class system Bulma uses intuitive, semantic class names that follow clear patterns:
Base classes Components use simple, single-word names:
< button class = "button" > Button </ button > < div class = "card" > Card </ div > < nav class = "navbar" > Navbar </ nav >
Modifier classes with is-* Use is-* modifiers to change the state, style, or size of an element:
Colors : is-primary, is-success, is-danger, is-warning, is-infoSizes : is-small, is-normal, is-medium, is-largeStates : is-active, is-loading, is-disabled, is-hovered, is-focusedStyles : is-outlined, is-rounded, is-light, is-inverted
< button class = "button is-primary is-large" > Large Primary Button </ button >
Helper classes with has-* Use has-* helpers for utilities like text color, background, or text alignment:
Text colors : has-text-primary, has-text-white, has-text-dangerBackgrounds : has-background-primary, has-background-lightText alignment : has-text-centered, has-text-right, has-text-left
< p class = "has-text-centered has-text-primary" > Centered primary text </ p >
Modifier classes are always prefixed with is- or has- by default. This makes them easy to identify and prevents naming conflicts.
Build your first component Let’s create a user profile card step by step.
Create the HTML structure
Start with a basic HTML file: <! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < title > Bulma Profile Card </ title > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected] /css/bulma.min.css" > </ head > < body > < section class = "section" > < div class = "container" > <!-- Card will go here --> </ div > </ section > </ body > </ html >
Add the card component
Bulma’s card component uses a structured hierarchy: < div class = "card" > < div class = "card-image" > < figure class = "image is-4by3" > < img src = "https://bulma.io/assets/images/placeholders/1280x960.png" alt = "Placeholder image" > </ figure > </ div > < div class = "card-content" > <!-- Content will go here --> </ div > </ div >
The card structure:
.card - Main container.card-image - Image wrapper.card-content - Main content area
Add content with media object
Use Bulma’s media object for the profile section: < div class = "card-content" > < div class = "media" > < div class = "media-left" > < figure class = "image is-48x48" > < img class = "is-rounded" src = "https://bulma.io/assets/images/placeholders/96x96.png" alt = "Profile picture" > </ figure > </ div > < div class = "media-content" > < p class = "title is-4" > Jane Doe </ p > < p class = "subtitle is-6" > @janedoe </ p > </ div > </ div > < div class = "content" > Web developer and designer. I love creating beautiful, functional websites. < br > < time datetime = "2024-1-1" > Joined January 2024 </ time > </ div > </ div >
Add a card footer with actions
Add interactive buttons in the footer: < footer class = "card-footer" > < a href = "#" class = "card-footer-item" > Follow </ a > < a href = "#" class = "card-footer-item" > Message </ a > < a href = "#" class = "card-footer-item" > Share </ a > </ footer >
Enhance with modifiers
Add color and size modifiers to make it stand out: < div class = "card" > < div class = "card-image" > < figure class = "image is-4by3" > < img src = "https://bulma.io/assets/images/placeholders/1280x960.png" alt = "Placeholder image" > </ figure > </ div > < div class = "card-content" > < div class = "media" > < div class = "media-left" > < figure class = "image is-48x48" > < img class = "is-rounded" src = "https://bulma.io/assets/images/placeholders/96x96.png" alt = "Profile picture" > </ figure > </ div > < div class = "media-content" > < p class = "title is-4" > Jane Doe </ p > < p class = "subtitle is-6 has-text-grey" > @janedoe </ p > </ div > </ div > < div class = "content" > Web developer and designer. I love creating beautiful, functional websites. < br > < time datetime = "2024-1-1" class = "has-text-grey-light" > Joined January 2024 </ time > </ div > </ div > < footer class = "card-footer" > < a href = "#" class = "card-footer-item has-text-primary" > Follow </ a > < a href = "#" class = "card-footer-item" > Message </ a > < a href = "#" class = "card-footer-item" > Share </ a > </ footer > </ div >
Complete example Here’s the complete profile card with centering and responsive container:
complete-profile-card.html
<! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < title > Bulma Profile Card </ title > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected] /css/bulma.min.css" > </ head > < body > < section class = "section" > < div class = "container" > < div class = "columns is-centered" > < div class = "column is-half" > < div class = "card" > < div class = "card-image" > < figure class = "image is-4by3" > < img src = "https://bulma.io/assets/images/placeholders/1280x960.png" alt = "Placeholder image" > </ figure > </ div > < div class = "card-content" > < div class = "media" > < div class = "media-left" > < figure class = "image is-48x48" > < img class = "is-rounded" src = "https://bulma.io/assets/images/placeholders/96x96.png" alt = "Profile picture" > </ figure > </ div > < div class = "media-content" > < p class = "title is-4" > Jane Doe </ p > < p class = "subtitle is-6 has-text-grey" > @janedoe </ p > </ div > </ div > < div class = "content" > Web developer and designer. I love creating beautiful, functional websites. < br > < time datetime = "2024-1-1" class = "has-text-grey-light" > Joined January 2024 </ time > </ div > </ div > < footer class = "card-footer" > < a href = "#" class = "card-footer-item has-text-primary" > Follow </ a > < a href = "#" class = "card-footer-item" > Message </ a > < a href = "#" class = "card-footer-item" > Share </ a > </ footer > </ div > </ div > </ div > </ div > </ section > </ body > </ html >
Exploring modifiers Let’s experiment with different modifiers to see how they transform components.
Button variations < button class = "button is-primary" > Primary </ button > < button class = "button is-link" > Link </ button > < button class = "button is-info" > Info </ button > < button class = "button is-success" > Success </ button > < button class = "button is-warning" > Warning </ button > < button class = "button is-danger" > Danger </ button >
Combining modifiers You can combine multiple modifiers on a single element:
< button class = "button is-primary is-large is-rounded is-fullwidth" > Large Rounded Primary Button </ button >
This creates a:
Primary colored button (is-primary)
Large size (is-large)
Rounded corners (is-rounded)
Full width (is-fullwidth)
Responsive design Bulma is mobile-first and responsive by default. Use responsive modifiers to control visibility and layout:
< div class = "columns" > < div class = "column is-half-desktop is-full-mobile" > <!-- Half width on desktop, full width on mobile --> </ div > </ div > <!-- Hide on mobile, show on tablet and above --> < div class = "is-hidden-mobile" > This text is hidden on mobile devices </ div >
Breakpoint suffixes:
-mobile (up to 768px)-tablet (769px and above)-desktop (1024px and above)-widescreen (1216px and above)-fullhd (1408px and above)
Common patterns Here are some frequently used patterns:
Notification messages < div class = "notification is-success" > < button class = "delete" ></ button > Your account has been created successfully! </ div >
Hero section < section class = "hero is-primary is-medium" > < div class = "hero-body" > < p class = "title" > Welcome to My Site </ p > < p class = "subtitle" > A beautiful landing page with Bulma </ p > </ div > </ section >
Button group < div class = "buttons" > < button class = "button is-success" > Save </ button > < button class = "button is-danger" > Delete </ button > < button class = "button" > Cancel </ button > </ div >
What you’ve learned Base class names are simple and semantic (button, card, navbar)
Modifiers use is-* prefix for states and styles
Helpers use has-* prefix for utility classes
Multiple modifiers can be combined on one element
Bulma is mobile-first and responsive by default
Next steps
Customization Learn how to customize colors, spacing, and themes
Components Explore all available Bulma components
The best way to learn Bulma is by building. Try modifying the examples above or creating your own components using the official Bulma documentation . 