# Sass utilities Bootstrap 5?

**URL:** https://forum.pinegrow.com/t/sass-utilities-bootstrap-5/6703
**Category:** Questions
**Created:** [July 19, 2022, 8:17am UTC](https://forum.pinegrow.com/t/sass-utilities-bootstrap-5/6703 "2022-07-19T08:17:31Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)
#### Post date: [July 19, 2022, 8:17am UTC](https://forum.pinegrow.com/t/sass-utilities-bootstrap-5/6703/1 "2022-07-19T08:17:31Z")

</div>

Hi @matjaz ,

I want to modify the opacity in a Bootstrap 5 project, but wonder where to add the Utility code like this in the sass file in Pinegrow? Thanks! David

```auto
 "opacity": (
      property: opacity,
      values: (
        0: 0,
        25: .25,
        50: .5,
        75: .75,
        85: .85,
        90: .90,
        100: 1,
      )
    ),
    

```

---

<div class="post-metadata">

### Author: ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)
#### Post date: [July 24, 2022, 10:51am UTC](https://forum.pinegrow.com/t/sass-utilities-bootstrap-5/6703/2 "2022-07-24T10:51:12Z")

</div>

@AllMediaLab to extend utilities, edit custom.scss and insert the following code **before** the line `@import "bootstrap/bootstrap"`

```auto
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/utilities";

$utilities: map-merge(
  $utilities,
  (
    "opacity": map-merge(
      map-get($utilities, "opacity"),
      (
        values: map-merge(
          map-get(map-get($utilities, "opacity"), "values"),
          (10: 0.1, 90: 0.9), //Add additional opacity values
        ),
      ),
    ),
  )
);

```

Then you can use opacity-10 and bg-opacity-10 in the project. Note, use Assign Class tool, as these values will not be available in the Properties panel controls.

---

<div class="post-metadata">

### Author: ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)
#### Post date: [July 25, 2022, 7:58am UTC](https://forum.pinegrow.com/t/sass-utilities-bootstrap-5/6703/3 "2022-07-25T07:58:17Z")

</div>

@matjaz Hi

Thanks! Is it an idea to add this to the custom.scss as a update?

David

---

<div class="post-metadata">

### Author: ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)
#### Post date: [July 25, 2022, 8:53am UTC](https://forum.pinegrow.com/t/sass-utilities-bootstrap-5/6703/4 "2022-07-25T08:53:55Z")

</div>

No plans for that at the moment.