Bulma Element Mixins

In this article, we will know about Bulma Element Mixins. Bulma Element Mixins are the mixins that help the users to create visual HTML elements.

Bulma uses Sass mixins to create the CSS output and they are mainly used within the context of the Bulma framework. Bulma has various different types of CSS mixins as given below;

• Arrow Mixins: These CSS mixins are used to create a down-facing arrow.
• Hamburger Mixins: These CSS mixins are used to create a 16x16px set of 3 horizontal bars grouped within the square.
• Delete Mixins: These CSS mixins are used to absolutely position an element with fixed dimensions at the centre of its closest positioned parent class.
• Loader Mixins: These CSS mixins are used to create a spinner in the form circle.
• Font Awesome container Mixins: These CSS mixins are used to create a square inline-block element that is used for containing an icon, or group of icons of any type or category.

Syntax:

.bulma-[Element Mixin Name]-mixin {
 @include [Element Mixin Name](params);
}

Note: You must know the implementation of SASS mixins for the below examples. Please see the pre-requisite given on the link and then implement the below code.

Example 1: Below example illustrates the Bulma Font Awesome Container in a single icon.

Output:

Example 2: Below example illustrate the loader in Bulma.

Output: