How to teach bootstrap mobile menu to open on the right?

Question

JavaScript

There is a bootstrap 4 menu in the mobile version of which I want to open the menu not from the standard top, but it should go to the right with content overlapping as here
There is an instruction for this example to connect the Off-canvas library specifically for Bootstrap 4 doesn't work.. What's wrong?
Code and fiddle

Answer 1

.menu {
  position: fixed;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  
  &.isOpen {
    transform: translateX(0);
  }
}

It is not clear why bootstrap is involved here.