I am currently working on a project with a canvas inside a div using three.js. My goal is to display a purple bar for user settings on the right side of the three.js window. However, I am encountering an issue where Bootstrap is not recognizing that I want to place these two columns together in a row and is instead placing them on separate rows. I would expect my current setup to work, as I don't see anything wrong with it. Interestingly, I have a similar situation elsewhere in the project with only divs, and it is functioning correctly. There is no layout SCSS code other than one that resets the margin and padding. Additionally, there are no other HTML files being used for this component.
const threeCanvas = document.getElementById('threejs-canvas') as HTMLCanvasElement;
this.renderer = new THREE.WebGLRenderer({ canvas: threeCanvas });
<div class="row" style="background-color: whitesmoke; height: 100px"></div>
<div class="row">
<div class="col">
<canvas id="threejs-canvas">
<app-threejs [width]=400 [height]=350></app-threejs>
</canvas>
</div>
<div class="col-2" style="background: blueviolet; height: 621px;">test</div>
</div>
https://i.sstatic.net/6VslV.png
EDIT: The desired outcome should resemble something like the image in this link:
SOLVED: It turns out I had ng-bootstrap installed without Bootstrap...