Bulma Elements

Insert pre-built Bulma CSS components to create rich, beautiful documentation layouts.

Accessing Bulma Elements

Click the 🧊 Bulma Element button in the toolbar to open the element selector.

Available Elements

Containers

Box

• Simple container with padding and border
• Perfect for highlighting content

Notification

• Colored notification boxes
• Colors: info, success, warning, danger
• Includes close button

Message

• Message with header and body
• Great for tips, warnings, notes
• Customizable colors

Content

Card

• Content card with title, subtitle, and footer
• Professional layout for features

Card with Image

• Card with image at the top
• Perfect for showcasing features

Media Object

• Content with image on the side
• Great for comments, profiles

Image Gallery

• 3-column responsive image grid
• Automatically adjusts to screen size

Layout

Hero Section

• Full-width banner area
• Available in multiple sizes

Hero Section (Medium)

• Medium-sized hero with more space

Hero Section (Full Height)

• Takes full viewport height
• Perfect for landing pages

Hero with Buttons

• Hero with call-to-action buttons

Two Columns

• Side-by-side layout

Three Columns

• Three-column grid

Level (Horizontal)

• Horizontal layout with left/right sections

Components

Icon

• Single icon wrapper

Icon with Text

• Icon paired with text

Icon Sizes

• Shows all icon sizes

Tabs

• Tabbed navigation

Tags

• Colored tag labels

Progress Bar

• Progress indicator

Table

• Styled data table

Buttons

Button Group

• Multiple buttons together

Button Addons

• Connected button group

Using Elements

1. Click "Bulma Element"
2. Select an element from the dropdown
3. See a live preview
4. View the HTML code
5. Click "Insert"

The element is inserted at your cursor position.

Customizing Elements

After inserting, you can:

• Edit the HTML directly
• Change colors (is-primary, is-info, etc.)
• Modify text content
• Add your own content

Bulma Colors

Use these color classes:

• is-primary - Primary color (turquoise)
• is-link - Link color (blue)
• is-info - Info color (cyan)
• is-success - Success color (green)
• is-warning - Warning color (yellow)
• is-danger - Danger color (red)
• is-dark - Dark color
• is-light - Light color

Bulma Sizes

Size modifiers:

• is-small - Small size
• is-medium - Medium size (default)
• is-large - Large size

Example: Creating a Feature Section

<div class="columns">
  <div class="column">
    <div class="card">
      <div class="card-content">
        <p class="title is-4">Feature 1</p>
        <p>Description of feature 1</p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="card">
      <div class="card-content">
        <p class="title is-4">Feature 2</p>
        <p>Description of feature 2</p>
      </div>
    </div>
  </div>
</div>

Example: Notification Boxes

<div class="notification is-info is-light">
  <strong>💡 Tip:</strong> This is an info notification!
</div>

<div class="notification is-success is-light">
  <strong>✅ Success:</strong> Operation completed!
</div>

<div class="notification is-warning is-light">
  <strong>⚠️ Warning:</strong> Be careful!
</div>

Best Practices

• Use elements consistently
• Don't overuse colors
• Keep layouts simple
• Test on mobile devices
• Use semantic HTML

Learn More

For complete Bulma documentation, visit: https://bulma.io/documentation/

---