✨ Features

• 🎨 24 Providers — All major social platforms included
• 🧩 Bulma Native — Seamlessly integrates with Bulma's class naming conventions
• 📦 Modular Imports — Import only what you need, keep your bundle minimal
• 🌙 Dark Mode Ready — Fully optimized for light and dark themes
• 🔧 Framework Agnostic — Works with React, Vue, Angular, Svelte, or plain HTML
• 🎯 Any Icon Library — Compatible with Font Awesome, Material Icons, Ionicons, and more

📦 Installation

Bulma-Social is an add-on stylesheet for Bulma, so Bulma is required (peer dependency: bulma >= 1.0.0). Make sure Bulma’s CSS is loaded before Bulma-Social.

NPM

npm install bulma-social

Yarn

yarn add bulma-social

pnpm

pnpm add bulma-social

After installation, import the CSS in your project:

// Bulma (required)
import "bulma/css/bulma.min.css";

// Import all social providers
import "bulma-social/css/all.min.css";

// Or import specific providers for smaller bundle size
import "bulma-social/css/single/facebook/facebook.min.css";
import "bulma-social/css/single/github/github.min.css";

CDN

Use via jsDelivr — no installation required:

<!-- All social providers (~8KB minified) -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bulma-social@3/css/all.min.css"
/>

<!-- Or load specific providers -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bulma-social@3/css/single/facebook/facebook.min.css"
/>

🎨 Supported Social Providers

🎭 Button Styles & States

Styles

| Class | Description | | -------------- | ---------------------------------- | | .is-outlined | Transparent background with border | | .is-inverted | Inverted colors | | .is-light | Light background variant | | .is-dark | Dark background variant |

States

| Class / Attribute | Description | | ----------------- | -------------- | | .is-hovered | Hover state | | .is-focused | Focus state | | .is-active | Active state | | .is-disabled | Disabled state |

🖌️ Color Utilities

Text Colors

<span class="has-text-facebook">Facebook Blue</span>
<span class="has-text-facebook-light">Facebook Light</span>
<span class="has-text-facebook-dark">Facebook Dark</span>

Background Colors

<div class="has-background-facebook">Facebook Background</div>
<div class="has-background-facebook-light">Light Variant</div>
<div class="has-background-facebook-dark">Dark Variant</div>

💡 Replace facebook with any supported provider name.

💡 Usage Examples

Buttons with Text

<a class="button is-facebook">
  <span class="icon">
    <i class="fa-brands fa-facebook"></i>
  </span>
  <span>Sign in with Facebook</span>
</a>

<a class="button is-github is-outlined">
  <span class="icon">
    <i class="fa-brands fa-github"></i>
  </span>
  <span>Continue with GitHub</span>
</a>

<a class="button is-google is-light">
  <span class="icon">
    <i class="fa-brands fa-google"></i>
  </span>
  <span>Sign in with Google</span>
</a>

Icon-Only Buttons

<a class="button is-facebook">
  <span class="icon"><i class="fa-brands fa-facebook fa-lg"></i></span>
</a>

<a class="button is-twitter is-outlined">
  <span class="icon"><i class="fa-brands fa-twitter fa-lg"></i></span>
</a>

<a class="button is-instagram is-inverted">
  <span class="icon"><i class="fa-brands fa-instagram fa-lg"></i></span>
</a>

📖 Documentation

Full documentation with interactive examples is available at:

👉 aldi.github.io/bulma-social

Upgrading from an older version?

👉 Migration Guide

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide before submitting a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b new-provider)
3. Commit your changes (git commit -m 'Add new provider')
4. Push to the branch (git push origin new-provider)
5. Open a Pull Request

📄 License

Released under the MIT License.