Catalog / Bulma CSS Framework Cheatsheet
Bulma CSS Framework Cheatsheet
A comprehensive cheat sheet for the Bulma CSS framework, covering its key components, modifiers, and utilities for building responsive web layouts.
Layout Components
Container
The Usage:
|
You can use Usage:
|
Columns
Bulma uses a column-based layout system. Start with a Usage:
|
Columns are automatically equal width. You can specify the width using Example:
|
To make columns stack on smaller screens, use the Usage:
|
Grid
The Usage:
|
Use Example:
|
Form Elements
Input
Basic text input: Usage:
|
Different states can be added using modifiers:
Example:
|
To show a loading state, use Example:
|
Select
Basic select dropdown: Usage:
|
Use the Example:
|
Textarea
Basic textarea: Usage:
|
States like Example:
|
Radio & Checkbox
Basic checkbox: Usage:
|
Basic radio button: Usage:
|
Elements
Box
The Usage:
|
Button
Basic button: Usage:
|
Different styles can be applied using modifiers like Example:
|
Sizes can be adjusted using Example:
|
To make a button full width, use Example:
|
A button can be disabled using the Example:
|
Image
To display a responsive image: Usage:
|
Different aspect ratios can be achieved using classes like Example:
|
Notification
To display a notification message: Usage:
|
You can modify the notification style using classes like Example:
|
Modifiers and Helpers
Typography
Bulma provides several helper classes for typography:
|
Example:
|
Colors
Bulma provides a set of color modifiers:
|
Example:
|
Example:
|
Spacing
Bulma provides spacing helpers using the
followed by:
|
Example:
|
Responsiveness
Bulma is responsive by default. You can use breakpoint-specific classes to control visibility:
And so on for inline, inline-block, flex, inline-flex. |
Example:
|