bulma/docs/documentation/overview/mixins.html

---
title: Mixins
layout: documentation
doc-tab: overview
doc-subtab: mixins
breadcrumb:
- home
- documentation
- overview
- overview-mixins
---

<div class="table-container">
  <table class="table is-bordered">
    <tr>
      <td><code>=arrow($color)</code></td>
      <td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
    </tr>
    <tr>
      <td><code>=block</code></td>
      <td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
    </tr>
    <tr>
      <td><code>=clearfix</code></td>
      <td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
    </tr>
    <tr>
      <td><code>=center($size)</code></td>
      <td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
    </tr>
    <tr>
      <td><code>=delete</code></td>
      <td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
    </tr>
    <tr>
      <td><code>=fa($size, $dimensions)</code></td>
      <td>Sets the style of a Font Awesome icon container.</td>
    </tr>
    <tr>
      <td><code>=hamburger($dimensions)</code></td>
      <td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
    </tr>
    <tr>
      <td><code>=loader</code></td>
      <td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
    </tr>
    <tr>
      <td><code>=overflow-touch</code></td>
      <td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
    </tr>
    <tr>
      <td><code>=overlay($offset: 0)</code></td>
      <td>Makes the element overlay its parent container, like the transparent modal background.</td>
    </tr>
    <tr>
      <td><code>=placeholder</code></td>
      <td>Sets the styles of an input placeholder.</td>
    </tr>
    <tr>
      <td><code>=unselectable</code></td>
      <td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
    </tr>
  </table>
</div>

<div class="content">
  <p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
</div>