Bulma LTR Position

Last Updated : 19 Oct, 2022

In this article, we will learn about the Bulma LTR Position. The LTR position is a direction mixin that is used to quickly switch between left and right CSS properties when dealing with positioning elements.

Bulma LTR Position 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-position-mixin">
    //statement
</div>
.bulma-ltr-position-mixin {
    @include ltr-position($spacing, $right);
}

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

$spacing: This parameter of LTR position is used to define the value of the offset
$right: This parameter of LTR position 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 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: false; 
$ltr: true; 
  
@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; 
}

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; 
}