Bulma LTR Property

Last Updated : 19 Oct, 2022

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> 
    <script src= 
"https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 
    </script> 
    <link rel="stylesheet" href="style.css"> 
      
</head> 
    
<body class="content container has-text-centered"> 
    <div> 
        <h1 class="title is-1 has-text-success"> 
            GeekforGeeks 
        </h1> 
        <h1 class="subtitle">Bulma LTR Position Mixins</h1> 
    </div> 
    
    <div class="bulma-ltr-position-mixin-parent"> 
        <img class="bulma-ltr-position-mixin" 
             height="120" 
             width="120" 
             src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
        <p>GeeksforGeeks | A computer science portal for geeks.</p> 
    </div> 
</body>   
</html>

CSS code:

CSS

$rtl: false; 
$ltr: true; 
@mixin ltr-property($property, $spacing, $right: true) { 
$normal: if($right, "right", "left"); 
$opposite: if($right, "left", "right"); 
    @if $rtl { 
        #{$property}-#{$opposite}: $spacing 
    } 
    @else 
    { 
        #{$property}-#{$normal}: $spacing 
    } 
} 
.bulma-ltr-property-mixin 
{ 
    @include ltr-property("margin", 10px, false); 
    border-radius: 0.25em; 
    position: absolute; 
}

Output:

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> 
    <script src= 
"https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 
    </script> 
    <link rel="stylesheet" href="style.css"> 
</head> 
    
<body class="content container has-text-centered"> 
    <div> 
        <h1 class="title is-1 has-text-success"> 
          GeekforGeeks 
        </h1> 
        <h1 class="subtitle">Bulma LTR Position Mixins</h1> 
    </div> 
    
    <div class="bulma-ltr-position-mixin-parent"> 
        <img class="bulma-ltr-position-mixin" 
             height="120" 
             width="120" 
             src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
        <p>GeeksforGeeks | A computer science portal for geeks.</p> 
    </div> 
</body>   
</html>

CSS code:

CSS

$rtl: true; 
$ltr: false; 
  
@mixin ltr-position($spacing, $right: true)  
{ 
      $normal: if($right, "right", "left"); 
      $opposite: if($right, "left", "right"); 
    @if $rtl { 
      #{$opposite}: $spacing; 
    } 
    @else { 
      #{$normal}: $spacing; 
    } 
} 
  
.bulma-ltr-position-mixin  
{ 
      @include ltr-position(1rem, false); 
      border-radius: 0.25em; 
      position: absolute; 
      top: 1rem; 
}