Bulma-Social v2.1.0

Social Buttons and Colors for Bulma

View on GitHub Download

Social Classes


Disable Hover Animation

.no-animation

Is there a social provider missing?

Submit a Pull Request!

Available Text Styles

.has-text-<social-provider>

.has-text-<social-provider>-light

.has-text-<social-provider>-dark


Available Background Styles

.has-background-<social-provider>

.has-background-<social-provider>-light

.has-background-<social-provider>-dark


Check them out in real projects

Awesome Bulma Templates


Install

npm install bulma-social

Bulma-Social is compatible with all icon font libraries: Font Awesome 5, Font Awesome 4, Material Design Icons, Ionicons, etc.


Examples

In the examples below, we are goint to use Font Awesome 5.

Start using the buttons as you would normally do adding additionally the social class. For example:

Buttons with text

<a class="button is-medium is-facebook">
    <span class="icon">
      <i class="fab fa-facebook"></i>
    </span>
    <span>Facebook</span>
</a>
<a class="button is-medium is-facebook is-outlined">
    <span class="icon">
      <i class="fab fa-facebook"></i>
    </span>
    <span>Facebook</span>
</a>
<a class="button is-medium is-facebook is-light">
    <span class="icon">
      <i class="fab fa-facebook"></i>
    </span>
    <span>Facebook</span>
</a>

Icon Buttons

<a class="button is-medium is-facebook">
    <span class="icon">
      <i class="fab fa-facebook fa-lg"></i>
    </span>
</a>
<a class="button is-medium is-facebook is-outlined">
    <span class="icon">
      <i class="fab fa-facebook fa-lg"></i>
    </span>
</a>
<a class="button is-medium is-facebook is-light">
    <span class="icon">
      <i class="fab fa-facebook fa-lg"></i>
    </span>
</a>
<a class="button is-medium is-facebook is-inverted">
    <span class="icon">
      <i class="fab fa-facebook fa-lg"></i>
    </span>
</a>

Text colors

<a class="is-size-4 has-text-facebook">Hello Facebook</a>
<a class="is-size-4 has-text-facebook-light">Hello Facebook Light</a>
<a class="is-size-4 has-text-facebook-dark">Hello Facebook Dark</a>

Background colors

Hello Facebook
Hello Facebook light
Hello Facebook dark
<div class="is-size-4 has-background-facebook has-text-white">Hello Facebook</div>
<div class="is-size-4 has-background-facebook-light">Hello Facebook Light</div>
<div class="is-size-4 has-background-facebook-dark has-text-white">Hello Facebook Dark</div>
Fork me on GitHub Fork me on GitHub