Can a Bootstrap 4 column have equal height and width, creating a quadratic design with three columns?
Is it feasible to make the first two columns as quadratic dimensions, with the third column matching their height?
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12">
</div>
<div class="col-lg-3 col-md-3 col-sm-12">
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
</div>
</div>
Unfortunately, the feature you seek is not currently available in Bootstrap 4. However, you can achieve your desired layout using display: grid.
For a comprehensive guide on using CSS Grid, check out this resource: https://css-tricks.com/snippets/css/complete-guide-grid/
Achieving specific column ratios in Bootstrap can be challenging with CSS alone, but there is a workaround using <svg> elements.
To maintain the ratio of columns, you can place an empty <svg> inside each column and use the bootstrap class invisible to hide it from view. Position your content within the column using position: absolute.
For example, for a 3:2 ratio, set the viewBox attribute to "0 0 3 2". Adjust the viewBox values accordingly for different column sizes like col-3 and col-6 to maintain the desired ratio.
Keep in mind that in a Bootstrap layout, columns are by default stretched to equal sizes, so adjusting the viewBox values is necessary to maintain the specified ratios.
Feel free to check out the demo below for a visual representation:
/*DEMO*/body{padding:3rem}
.content{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
overflow:hidden;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="row border">
<div class="col-3 border border-primary">
<svg class="invisible" viewBox="0 0 1 1"></svg>
<div class="content">Lorem Ipsum</div>
</div>
<div class="col-3 border border-danger">
<svg class="invisible" viewBox="0 0 1 1"></svg>
<div class="content">Lorem Ipsum</div>
</div>
<div class="col-6 border border-success">
<svg class="invisible" viewBox="0 0 2 1"></svg>
<div class="content">Lorem Ipsum</div>
</div>
</div>After defining top and left attributes for a Canvas Object using a JavaScript function, I encounter an issue when creating a fabric Canvas object. var fabricCanvas = new fabric.Canvas('mycanvas'); Upon creation, my HTML Canvas has its top and ...
I'm exploring ways to build an online form within Netsuite. Our predefined fields include firstname, lastname, etc. Within these, we also have a NLSUBSCRIPTIONS tag, but it's currently set up as a drop-down with multiple select options. I ...
Despite running smoothly in most browsers, this website goes haywire and crashes on Safari when viewed on a Mac. I've attempted troubleshooting by removing the Google map, CSS transforms, and the Stellar jQuery plugin, but the issue persists. Does any ...
It seems like I'm having trouble making this work, and it appears to not be possible. That's why I'm reaching out for help... Here is the CSS that is being used: label.btn { cursor:pointer; display:inline-block; } label.btn>inpu ...
I am currently developing a memory game that involves clicking on images as the main objective. After clicking on an image, the pictures are then rearranged on the page. However, if you click on the same image twice, you will lose and the game will reset. ...
Struggling to vertically align three items in a row using Material UI's Grid component. Despite setting "justifyContent: 'center'," it only horizontally centers the items. Here are my styles: const styles = (theme) => ({ root: { te ...
I currently have 2 files available: data.php page.php The data.php file is responsible for fetching a row from a SQL database and sending it to the page.php file. Within the page.php file, there is a JavaScript script that receives this row through AJAX ...
I am currently using an ajax function to refresh a specific division on a webpage with HTML content. <script> $('#scene_container').load('scene.html', function () { cache: false }); </script> ...
After submitting the form, I am dynamically creating buttons. <template name="workflow"> {{#each newaction}} <div class="btn-box" > {{> actioncardsubcontent}} <button type="button" class="cancelsub" >New Action</button&g ...
I'm attempting to set a fixed height for a div in order to enable overflow scrolling. However, I am encountering issues as I am using JavaScript within a useEffect hook to accomplish this task. The problem is inconsistent as sometimes the height is se ...
The containing element has some content that is set to have a fixed height and overflow: auto; as shown in the JSFiddle link provided. When scrolling through the text, you will notice that the border comes into contact with the text both above and below. ...
Recently, I've been delving into the world of HTTP requests. My latest task involves uploading an image from the client and sending it to the server using a POST request. When testing this process in Postman, everything works smoothly as I receive th ...
Looking to include a simple dropdown menu with 5 choices. Once a selection is made, an answer corresponding to that choice will appear in another field next to it. For example: Choosing France from the dropdown would display 'Paris' in the adjac ...
I am experiencing difficulties in positioning my elements after a drop event. Within my "list" of divs... In order to keep the divs together and update the list, I utilize jQuery's append function to move the element from the list to its designated ...
I'm currently in the process of mastering template literals as I have a project where I need to utilize them. However, I seem to be encountering an issue that I can't quite figure out. Here is the code that is currently working: const classes = ...
I am having trouble with the alignment of the subscription payment page, which is currently displaying all information in a single line. I would like to format it like a traditional payment form with card number, CVV, and expiry on separate lines rather th ...
Currently, I am working on a VueJS project that utilizes bootstrap-vue. The issue I am facing is that when rendering a list of tabs, it exceeds the width of its parent container. To address this problem, I aim to implement a solution involving a set of but ...
I am currently working with bootstrap 4 and have a layout that includes a container class: body #content.container .row .col-6 | Great content .col-6 | I really like it .row .col-12 And so forth .row ...
I am currently working on a component to display random products from an array. Despite being able to see the attributes like props.products[random].company when I console log them, they are not rendering properly when placed inside HTML tags. Although th ...
I am using JavaScript to display a 12-hour digital clock that updates continuously. However, the code I found online resulted in a 24-hour clock and incorrect am/pm output. Currently, it displays 13:33 am. I have experimented with various code snippets, in ...