Bulma LTR Position

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

Output:

Explore