Social Buttons and Colors for Bulma
📖 View Documentation · 🎨 Live Demo · 🐛 Report Bug
- 🎨 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
npm install bulma-socialyarn add bulma-socialpnpm add bulma-socialAfter installation, import the CSS in your project:
// 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";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"
/>.is-apple |
.is-discord |
.is-facebook |
.is-github |
.is-gitlab |
.is-instagram |
.is-linkedin |
.is-microsoft |
.is-pinterest |
.is-reddit |
.is-slack |
.is-twitter |
.is-youtube |
.is-vimeo |
.is-dropbox |
.is-bitbucket |
.is-flickr |
.is-foursquare |
.is-odnoklassniki |
.is-openid |
.is-soundcloud |
.is-tumblr |
.is-vk |
.is-yahoo |
| Class | Description |
|---|---|
.is-outlined |
Transparent background with border |
.is-inverted |
Inverted colors |
.is-light |
Light background variant |
.is-dark |
Dark background variant |
| Class / Attribute | Description |
|---|---|
.is-hovered |
Hover state |
.is-focused |
Focus state |
.is-active |
Active state |
.is-disabled |
Disabled state |
<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><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
<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><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>Full documentation with interactive examples is available at:
Contributions are welcome! Please read our Contributing Guide before submitting a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b new-provider) - Commit your changes (
git commit -m 'Add new provider') - Push to the branch (
git push origin new-provider) - Open a Pull Request
Released under the MIT License.