# Using bootstrap 4 classes in scss files

**URL:** https://discourse.roots.io/t/using-bootstrap-4-classes-in-scss-files/11048
**Category:** sage
**Tags:** sage8, bootstrap4, gulp
**Created:** 2017-12-01T14:36:45Z
**Posts:** 3

## Post 1 by @dpc — 2017-12-01T14:36:45Z

So i’m trying to use bootstrap classes in my scss files but they don’t get found and throw an error during compiling.

I’m trying to use Hiding Elements, d-none;

> **[Display property](https://getbootstrap.com/docs/4.0/utilities/display/#common-display-values)**
>
> Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.

The error i get is

```
messageOriginal: Invalid CSS after "...de text-hide();": expected "}", was ".d-none;"
```

But when i comment out the issue and compile the css is can see the class .d-none in dist/styles/main.css. In fact i can see all these ‘helper’ classes!

Any ideas?

---

## Post 2 by @MWDelaney — 2017-12-01T14:39:45Z

It’s hard to troubleshoot your issue without seeing any of your code. Is this the code you’re talking about?

> [@How the Heck? The Bootstrap 4 Beta thread](https://discourse.roots.io/t/how-the-heck-the-bootstrap-4-beta-thread/10198/26):
>
> i can’t seem to get the ‘.d-none’ classes working in sage 8.5.3. Preformatted textmessageOriginal: Invalid CSS after “…de text-hide();”: expected “}”, was “.d-none;” .featured-image-caption { // display: none; // @include text-hide(); .d-none; // // .hidden-xs-up; // @include hidden-xl-down(); // .d-none; // // .hide; } Am i missing something obvious?

If so, you’re writing it as though it were LESS, not scss. You need to use `@extend`.

[http://sass-lang.com/guide#topic-7](http://sass-lang.com/guide#topic-7)

---

## Post 3 by @dpc — 2017-12-01T14:43:53Z

crap - thanks - bad day!