Bulma LTR Property

In this article, we will learn about the Bulma LTR property. The LTR property is a direction mixin that is used not only to quickly switch between left and right CSS properties. But also allows users to set the positioning CSS property.

Bulma LTR Property class: For creating a mixin, no specific class is provided by Bulma, instead we can create our class and then style the element with the help of SASS mixins.

Syntax:

<div class="bulma-ltr-property-mixin">
 //statement
</div>
.bulma-ltr-property-mixin 
{
 @include ltr-property($property, $spacing, $right);
}

Parameters: This mixin accepts three parameters which are defined as follows:

• $spacing: This parameter of the LTR property is used to define the value of the offset.
• $right: This parameter of the LTR property is used to define if the property outputs right (default) or left.

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 LTR property mixin.

CSS code:

Output:

Example 2: Below is another example that illustrates the Bulma LTR Position mixin.

CSS code:

Output: