issues with alignment between bootstrap div and canvas

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...

Answer №1

Everything looks good with your HTML and class usage. Just double-check to make sure your Bootstrap CSS files are loading correctly and being applied to your page.

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>
  <div class="row" style="background-color: whitesmoke; height: 100px"></div>
  <div class="row">
    <div class="col">
      <img src="https://placehold.it/400x350">
    </div>
    <div class="col-2" style="background: blueviolet; height: 621px;">test</div>
  </div>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Folding navigation bar vanishes once expanded

After I click the navbar toggler button, it opens but then the sliding animation disappears. Any advice on how to resolve this issue? Thank you. I've attempted to use the responsive navbar code from the Bootstrap website, but the problem persists. I ...

I am struggling to find the right way to center those images

https://i.sstatic.net/aRkvl.jpg Hello everyone, I'm currently attempting to set up the main content of the homepage resembling the image provided, but I'm encountering some challenges. Every approach I take seems to cause the image to overflow ...

ion-grid featuring alternate columns

As someone who is not very familiar with Angular, I am trying to create a grid layout like the one shown here: https://i.stack.imgur.com/nBavk.png The desired layout includes alternating rows with one image followed by two images. My current attempt at a ...

What is the best way to retrieve user data and format the output using JavaScript into a structured form?

I am trying to achieve the functionality shown in this image: https://i.sstatic.net/svzvc.png My goal is to extract user input from a form and display it on my webpage using JavaScript. Below is the code snippet that I have been working on. Code: f ...

Update the text within a textarea by clicking with the power of jquery

Is there a way to clear the content of my textarea on click? Below is the code snippet: http://jsfiddle.net/QMfyP/ <textarea name="adventage" style="width:400px; border-radius: 3px; border-left: 4px solid #6C3" id="adventage" cols="45" rows="5">Sh ...

Issue encountered while trying to exhibit jpg image content from server side on html

I am attempting to display an image from server-side data using an Ajax call. The data stored on the server looks something like this: "ÿØÿàJFIFÿÛC4­¶¸UOHlʵcBò)3¹_È'I4~&éüÿ§Ú<ã©ã4>'Øù¿ÇÄmËCÈgÚsZ¥ë" Upo ...

Deciphering the Mysteries of API Gateway Caching

It seems like a common pattern to enable an API Gateway to serve an Angular Webapp by pulling it from S3. The setup involves having the API gateway with a GET request set up at the / route to pull index.html from the appropriate location in the S3 bucket, ...

Selecting the next element in the DOM using Javascript

Here is the structure of my current setup: <div class="wrapper"> <div class="first"> <a class="button" href="">click</a> </div> <div class="second"> <div class="third"> S ...

Is it possible to add animation to an SVG filter to create a captivating rotating planet with color effects?

I've added a filter to my self-created SVG and I'm interested in animating it so that the colors move diagonally, giving the appearance of a spinning planet. Below is the code featuring my SVG and how I'd like it to begin with the blue colo ...

Tips for transferring a function declared within an object to a child component

Within my DatagridComponent, I have set it up to display rows of data. The component allows for the inclusion of multiple action bar items, along with a function that is triggered when an item (in this case, a button) is clicked: DatagridComponent: @Comp ...

Apologies, but it seems there was an issue with the installation of the "@angular/compiler-cli" package

Despite thoroughly searching through various threads, I am still unable to find a solution to my problem. I have cloned the angular2 quickstart project and ensured that all module versions are up to date. For reference, here is the link to the repository ...

What is the best way to pass form values from child components to parents when utilizing a value accessor implementation?

What is the most effective method to retrieve the values of a child component control group from a parent component? I have currently implemented this using value accessor, but I am curious about the best approach. You can check out the plunker demo I have ...

Adjusting Window Size Causes White Space to Appear Above Div

I currently have two inline-block div in my post page that showcase my latest book reviews. Typically, these sections align perfectly and occupy the same amount of space on the screen. However, for certain window sizes, one of the inline-block elements end ...

Issues with Bootstrap Table Column Widths not Adjusting Properly

I am facing an issue with my Bootstrap 4 table where the fixed column widths specified in the header row are not being respected when the table is rendered. The Time column, for example, should only be 5% of the width but it is taking up more space than ex ...

Step-by-step guide on resolving the error message "Unable to identify the dependencies of task ':app:preDebugBuild'" in Ionic 4 Cordova

Having trouble creating an Ionic 4 android app? Encountering a preDebugBuild error related to play-services-measurement-base and conflicting library versions? I've attempted various fixes including: - Running ionic repair - Reinstalling and updating ...

AngularJS: Issue with scope not updating across several views

Having one controller and two views presents a challenge. ClustersController angular.module('app.controllers').controller('ClustersController', [ '$scope', 'ClustersService', function($scope, ClustersService) { ...

Divs sliding out of alignment

I am experiencing an issue with the scrolling behavior of a wrapper div that contains two nested divs. Specifically, when I scroll the wrapper horizontally on Android devices, the header section and content section seem to be out of sync and there is a not ...

Utilizing CRUD Operations with an Interactive 3D Model in Three.js: A Comprehensive Guide

I am brand new to learning Three.js and I'm unsure if it's the right fit for my needs! I'm in the process of developing a PHP web application to log car accident details. I would like to know if it's feasible to have an interactive 3D ...

Diminishing of the darkness

Imagine a tree adorned with beautiful alpha leaf textures. The intricate pattern of the falling shadow casts a deep darkness on the leaves "below", causing the entire model to appear dark. https://i.sstatic.net/N5ocS.png https://i.sstatic.net/EL5BZ.png ...

Using JavaScript Functions to Resize Buttons and Change function on Click

I have a button in my code that triggers CSS changes by adding and removing classes. The JavaScript for this function works as intended - clicking once adds the class, clicking again removes it, and so on. However, I also implemented a feature to remove t ...