Bulma-Social

Social Buttons and Colors for Bulma

🎨 Live Demo · 📖 Documentation

✨ Features

• 🎨 26 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 (~9KB gzipped) -->
<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

.is-apple	.is-bitbucket	.is-discord	.is-dropbox
.is-facebook	.is-flickr	.is-foursquare	.is-github
.is-gitlab	.is-instagram	.is-linkedin	.is-microsoft
.is-odnoklassniki	.is-openid	.is-pinterest	.is-reddit
.is-slack	.is-soundcloud	.is-tumblr	.is-twitch
.is-twitter	.is-vimeo	.is-vk	.is-x
.is-yahoo	.is-youtube

---

🎭 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
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-x is-light">
  <span class="icon">
    <i class="fa-brands fa-x-twitter"></i>
  </span>
  <span>Sign in with X</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.

---